文件上傳到阿里雲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給出的只能一次上傳一個文件，因此這裏如果要同時上傳多個文件的話注意應該文件遍歷挨個上傳

• 開始上傳
  • 上傳組件中我們獲取了需要上傳的文件進行上傳
  • 方法：
    • 直接引入使用
    • 使用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;
  });
};

未完待續…(內容上傳；文件列表獲取；案例demo；待定)