VUE上传文件到阿里云OSS

VUE上传文件到阿里云OSS

时间：2021-01-08
版本：ali-oss ^6.11.2

安装

推荐npm安装，因为使用npm安装，所以此教程理论上和node.js后端的使用方式是通用的。

npm install ali-oss --save

yarn add ali-oss

初始化

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

let client = new OSS({
  // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
  // oss-cn-hongkong.aliyuncs.com则填写oss-cn-hongkong
  region: '<oss region>',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
  accessKeyId: '<Your accessKeyId(STS)>',
  accessKeySecret: '<Your accessKeySecret(STS)>',
  stsToken: '<Your securityToken(STS)>',
  bucket: '<Your bucket name>'
});

其中，使用STS临时授权访问OSS的情况下，才需要上传stsToken，否则可以不定义。
其值一般访问自己app的服务器获取。
node服务器如何获取STS临时授权
php服务器如何获取STS临时授权

上传

可上传的三种文件类型，可以是File，Blob，也可以是Buffer

// const data = '<File Object>';
// or const data = new Blob('content');
// or const data = new OSS.Buffer('content'));
let result = await client.put(upload_path, data);

如果data是dataURL类型，则先转为Blob然后再上传。

let updata = util.dataURLtoBlob(data);
let result = await client.put(upload_path, updata);

转换函数

dataURLtoBlob(dataurl) {  
  var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
},

上传路径upload_path可以直接是文件名，也可以是相对路径。最好填写相对路径。例如upload/image/IMG_2342.jpg。

官方文档参考地址

安装：https://help.aliyun.com/document_detail/64041.html
上传：https://help.aliyun.com/document_detail/64047.html