## H5版本 H5版本 H5版本 ##### 一、安裝依賴 ``` npm i ali-oss --save ``` ##### 二、在需要上傳的頁面或者JS文件中引入 ``` const OSS = require('ali-oss'); ``` ##### 三、通過uni-app的API選擇照片 > 此處獲取的是圖片的臨時地址，在H5上為 **blob地址** ``` uni.chooseImage({ count: 6, //默認9 sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album'], //從相冊選擇 success: function (res) { console.log(JSON.stringify(res.tempFilePaths)); // 獲取到的應該是 blob地址 } }); ``` ##### 四、獲取 OSS STS 簽名 > 此處為后臺簽名接口返回。 獲取 臨時 密鑰。  ##### 五、(重點!)將選擇的blob地址實例化為一個文件對象 就行input選擇出的文件對象一樣 > 傳入 blob地址，返回promise, 打點then() 即可獲取 blob對象 ``` function h5_url_to_blob(url){ return new Promise((resolve,reject)=>{ var xhr = new XMLHttpRequest(); xhr.open( 'GET', url, true); xhr.responseType = 'blob'; xhr.onload = function( e) { if(this.status == 200) { var Blob = this.response; // console.log(myBlob) resolve(Blob) // myBlob現在是對象URL指向的blob。 } }; xhr.send(); }) } ``` ##### 六、實例化OSS，并上傳。 ``` let client = new OSS({ accessKeyId: sign.AccessKeyId, // 后臺的臨時簽名ID accessKeySecret: sign.AccessKeySecret, // 后臺的臨時簽名密鑰 stsToken: sign.SecurityToken, endpoint: 'xxxxbeijing.aliyuncs.com/', // 上傳后的域名 bucket: 'xxx', // OSS倉庫名 }); let curTime = new Date(); let year = curTime.getFullYear(), month = curTime.getMonth() + 1, day = curTime.getDate() 生成日期文件夾 自定義，可根據自身業務 區分文件夾。每個 ‘ / ’ 即是一級目錄 let dir = 'imgs/' + year + '/' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + '/' let result = await client.put(dir +'文件名', '通過第五步轉換的blob對象'); ```