前端vue 配合ali-oss上傳文件到阿里雲

1. 安裝ali-oss

npm i ali-oss -D (安裝到生產依賴)

2.引入

const OSS = require("ali-oss");

3.調用接口獲取阿里雲OSS的region、accessKeyId、accessKeySecret、bucket以及要存放的文件夾名稱（就是下面第五步中使用當前時間拼接完整的文件名稱的filePath）

4.使用

 let client = new OSS({
          region: region,
          accessKeyId: accessKeyId,
          accessKeySecret: accessKeySecret,
          bucket: bucket

});

注意點: region 爲 "oss-cn-hangzhou"  (後面的hangzhou可以是其他的地區簡寫, 具體看自己的阿里雲)不需要加後面的aliyun.com， 它會自動拼接成完整的url

5. 上傳文件

獲取文件流   ===》  let file = this.$refs.fileName.files[0] 或者是原生的 document.getElementById("fileName").files[0]

獲取當前選擇的文件名 ===》 let val = this.$refs.fileName.value 或者是原生的document.getElementById("fileName").value

截取文件後綴名   ==》   let suffix = val.substr(val.indexOf(".")); / let suffix = val.substring(val.indexOf("."));

使用當前時間拼接完整的文件名稱 ===》 let storeAs = `/${_confValue.filePath}/${this.timestamp()}${suffix}`;

最後調用multipartUpload方法即可完成上傳： storeAs是完整的文件名稱包括在哪個文件夾下main，file是將要上傳的文件流

  client

          .multipartUpload(storeAs, file)

          .then(result => {

            let _res = result.res;

            if (_res.status === 200 && _res.statusCode === 200) {

                       這裏是指文件上傳到阿里OSS成功，之後可以調用後端接口判斷此文件是普通上傳、追加上傳還                      是                            覆蓋上傳  、、、、、、、彈個窗就好了

            }

}）

 

你個香白菜 永遠愛你!! 超愛你

不改了 wujun 老子愛你 !!!