vue 上传图片到oss阿里云

需求： 调用ios客户端sdk（返回一个base64的图片地址），上传到阿里云oss先来看下前期准备工作

一、oss 要求必须提供Buffer/BLOB 上传

如果你是base64 那么要转成file文件

 convert(urlData, filename) { // 64转file
      if (typeof urlData != 'string') {
        alert("urlData不是字符串")
        return;
      }
      var arr = urlData.split(',')
      var type = arr[0].match(/:(.*?);/)[1]
      var fileExt = type.split('/')[1]  //后缀jpg
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], 'filename.' + fileExt, {
        type: type
      });
    },

二、 后台要配置跨域

否则会报跨域

三、403 权限禁止

说明这是一个私有读。（这里我们只介绍公有读）

四、获取服务器通行证（即获取accessKeyId和accessKeySecret）

let res = await this.$axios.get('getToken')  // 后端给你的
      if (res.data.code == 0) {
        let options = res.data.data;
        const client = new OSS({
          region: '你买的区域',
          accessKeyId: options.accessKeyId,
          accessKeySecret: options.accessKeySecret,
          stsToken: options.securityToken,
          bucket: '名称'
        });

五、都准备好了，就上传吧

5.1 准备个随机名字

const setFileRandomName = function() { // 设置文件随机名字
  let currentTimestamp = parseInt(new Date().getTime() / 1000);
  let id = uuid.generate();
  let randomName = `/test/${id}-${currentTimestamp}.jpg`;
  return randomName
}

5.2 准备好file文件

input type="file" 选择的文件可以直接上传，base64需要转一下

5.3 上传（简单上传）

还可以去分片上传等

try {
  let imgObject = await client.put(randomName, localFile);
  // imgObject.url 插入你要插入的img 的src中
} catch (e) {
  console.log("上传失败",e)
}