ZBLOG

uniapp 把图片上传到阿里云oss,header传参

在 UniApp 中将图片上传到阿里云 OSS,并在请求头中传递参数,通常需要进行以下几个步骤。由于直接使用 Access Key 和 Secret 在前端是不安全的,建议通过后端生成一个临时的签名来进行上传。

步骤 1: 后端生成签名

首先,在后端实现一个接口,用于生成阿里云 OSS 的上传签名。这是一个 Node.js 的示例:

const Koa = require('koa');
const Router = require('koa-router');
const OSS = require('ali-oss');

const app = new Koa();
const router = new Router();

router.get('/api/sign', async (ctx) => {
  const client = new OSS({
    region: 'your-region',
    accessKeyId: 'your-access-key-id',
    accessKeySecret: 'your-access-key-secret',
    bucket: 'your-bucket-name'
  });

  try {
    // 创建上传策略
    const result = await client.sign({
      key: `uploads/${Date.now()}.png`, // 自定义文件名和路径
      expires: 60 // 签名有效期(单位:秒)
    });

    ctx.body = {
      url: result.url,
      policy: result.policy,
      signature: result.signature,
      accessKeyId: 'your-access-key-id'
    };
  } catch (err) {
    ctx.throw(500, err);
  }
});

app.use(router.routes());
app.listen(3000);

步骤 2: 前端调用并上传图片

然后,在 UniApp 中,你可以调用这个接口获取签名,然后使用该签名进行文件上传:

export default {
  data() {
    return {
      imageUrl: ''
    };
  },

  methods: {
    async uploadImage() {
      const res = await uni.chooseImage({
        count: 1
      });
      
      const filePath = res.tempFilePaths[0];
      
      // 获取签名
      const signRes = await this.getSignature();
      
      if (signRes) {
        this.uploadToAliyun(filePath, signRes);
      }
    },

    async getSignature() {
      try {
        const response = await uni.request({
          url: 'http://localhost:3000/api/sign', // 替换为你的后端地址
          method: 'GET'
        });

        return response.data;
        
      } catch (error) {
        console.error('Error getting signature:', error);
        return null;
      }
    },

    async uploadToAliyun(filePath, signData) {
      try {
        const response = await uni.uploadFile({
          url: signData.url, // 签名返回的 URL
          filePath,
          name: 'file', // 此处根据后端要求调整字段名称
          header: { 
            'Authorization': `OSS ${signData.accessKeyId}:${signData.signature}`,
            'x-oss-security-token': signData.securityToken || '' // 如果需要的话,也可以添加 Security Token
          },
          formData: {
            key: `uploads/${Date.now()}.png`, // 自定义文件名和路径,与后端一致
            policy: signData.policy,
            success_action_status: "200" // 用于确认是否成功,可以根据实际需求调整
          }
        });

        if (response.statusCode === 200) {
          console.log('Upload Success:', response.data);
          this.imageUrl = JSON.parse(response.data).url; // 假设返回了文件的访问 URL,这里的处理根据实际返回格式而定。
        } else {
          console.error('Upload Failed:', response);
        }

      } catch (error) {
        console.error('Error uploading to Aliyun:', error);
      }
    }
  }
}

注意事项

  1. 安全性:不要在前端代码中暴露你的 Access Key Secret,应该通过后台服务生成临时的签名。
  2. CORS 配置:确保你在阿里云控制台配置了 CORS,以允许跨域请求。
  3. 文件路径和命名:可以根据需求自定义文件路径和命名方式。

以上示例提供了一种基本的实现思路,可以根据具体情况进一步完善。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?