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