文件上传到阿里云OSS存储（前端js含demo）
文件上传
- 上传组件：
- 自定义：使用input的file
- 使用antd框架的Upload组件中有阿里云上传组件(react)
//自定义
<input ref = 'uploadbtn' type="file" multiple="multiple" onChange={changeFiles}/>
补充：
multiple="multiple"用于定义是否允许一次多文件上传;changeFiles方法在每次更改文件时候触发；在react中用ref方法this.refs.uploadbtn.files拿到这个节点选择的files；
⚠️注意：由于阿里云oss给出的只能一次上传一个文件，因此这里如果要同时上传多个文件的话注意应该文件遍历挨个上传(同时这里需要注意；下载同时下载多个文件时，如果前一个暂未下载完成导致后面failed，需要等待前面一个文件下载完成之后再下载另外一个)
- 开始上传
- 上传组件中我们获取了需要上传的文件进行上传
- 方法：
- 直接引入使用
- 使用ali-sdk 进行
//直接引入使用
/**
**html中引入aliyun-oss-sdk.min.js
**/
<script type="text/javascript" src="./aliyun-oss-sdk.min.js"></script>
//js部分
var progress = function (p) {
console.log(p) //上传进度
};
var options = {
progress: progress, //可以拿到文件上传进度；用于写进度条
partSize: 500 * 1024,
meta: {
year: 2017,
people: 'test'
},
timeout: 60000,
callback: {
//如果有后台鉴权；那么这里是鉴权的回调；回调返回给后台的数据；下面只是样例
'url': appHost + '/oss/callback',
'body': "{\"bucket\":${bucket},\"object\":${object}, \"type\":${x:type}, \"name\":${x:name}, \"iscover\":${x:iscover}}",
'contentType': 'application/json',
'customValue': { // 自定义参数
'type': '0',
'name': 'default图片.jpeg',
'iscover': '0', //0:否 1:是
},
},
},
};
var uploadFile = function (file) {
//如果使用后台鉴权返回临时accessKeyId、accessKeySecret、stsToken需要前面的 OSS.urllib.request；如果没有后台鉴权、那么直接填写阿里云OSS给出的值（就安全方面；阿里云平台建议采用鉴权方式，避免前端将访问accessKeyId、accessKeySecret、stsToken直接在浏览器暴露）；下面url是指鉴权服务器地址
OSS.urllib.request(url, {
method: 'GET'
}).then(function (result) {
var creds = JSON.parse(result.data);
var client = new OSS({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
//objectKey, file, options三个参数分别是：objectKey阿里云上buket中的虚拟文件地址（String）；file是读取的文件，注意这里是一个文件；options见上定义的options
client.multipartUpload(objectKey, file, options).then(function (res) {
console.log('upload success: %j', res);
}
});
}
//使用ali-sdk进行
/**
** 1、安装npm install ali-oss --save
** 2、引入let OSS = require('ali-oss');
** 3、使用 var client = new OSS({....});初始client不一样;其他同上
**/
文件下载
let OSS = require('ali-oss');
var appHost = ''; //阿里云host地址
var appServerUrl = appHost+'/oss/ststoken';
var bucket = '';
var region = ''; //阿里云OSS服务区地区
export const downloadFile = function (fileurl) { //fileurl是指文件在阿里云上的存储地址
var url = appServerUrl;
return OSS.urllib.request(url, {
method: 'GET'
}).then(function (result) {
var creds = JSON.parse(result.data);
var client = new OSS({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
var result = client.signatureUrl(fileurl, {
response: {
'content-disposition': 'attachment; filename="' + downloadFilename + '"' //downloadFilename是指下载下来的文件名称
}
});
window.location = result;
return result;
});
};
