文件上傳
- 上傳組件：
- 自定義：使用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;
});
};