ZBLOG

uniapp 图片上传阿里云

在 UniApp 中上传图片到阿里云的步骤通常包括以下几个部分:

1. 准备工作

  • 阿里云账号:确保你有一个阿里云账号,并创建了对象存储(OSS)服务。
  • Access Key ID 和 Access Key Secret:在阿里云控制台中获取这两个密钥。
  • Bucket 名称:创建一个存储桶,并记录它的名称。

2. 获取上传地址和签名

在进行文件上传前,您需要使用后端服务器生成上传的签名。可以通过以下步骤来实现:

后端代码示例(Node.js)

const OSS = require('ali-oss');

async function getSignature() {
    const client = new OSS({
        region: '<your-region>',
        accessKeyId: '<your-access-key-id>',
        accessKeySecret: '<your-access-key-secret>',
        bucket: '<your-bucket-name>'
    });

    // 生成上传的策略
    const result = await client.signatureUrl('<object-key>', { expires: 60 });
    
    return result;
}

此代码会返回一个有效的 URL,你可以使用这个 URL 来进行文件上传。

3. UniApp 前端代码

在 UniApp 中,可以使用 uni.uploadFile 方法来上传图片。

// 假设你已经拿到了服务器返回的 uploadUrl
let uploadUrl = 'https://your-upload-url.com'; // 从后端获取

uni.chooseImage({
    success: (chooseResult) => {
        const filePath = chooseResult.tempFilePaths[0];

        uni.uploadFile({
            url: uploadUrl,
            filePath,
            name: 'file', // 要与后端约定好这个字段名
            formData: {
                'key': '<object-key>', // 对象存储中的文件路径,比如 images/xxx.png
            },
            success(uploadFileRes) {
                console.log('Upload successful', uploadFileRes);
                // 上传成功后的处理逻辑
            },
            fail(err) {
                console.error('Upload failed', err);
            }
        });
    }
});

4. 注意事项

  • CORS 配置:确保你的 OSS 存储桶启用了 CORS,以允许来自不同域的请求。

  • 安全性:为了保护你的 Access Key,建议将相关操作放在后端,通过 API 获取必要的信息,而不是直接在前端硬编码。

以上就是基本流程。如果需要更详细的实现,可以参考阿里云官方文档或根据具体需求调整。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20433

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?