VUE上传文件到阿里云OSS

最新推荐文章于 2024-07-29 23:56:27 发布

Nicker2013

最新推荐文章于 2024-07-29 23:56:27 发布

阅读量541

点赞数

分类专栏：前端 # VUE 文章标签： vue nodejs 前端 javascript

本文链接：https://blog.csdn.net/Nicker_/article/details/112370893

版权

前端同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

VUE

11 篇文章 2 订阅

订阅专栏

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 });
},