1. 程式人生 > >vue2上傳圖片到OSS

vue2上傳圖片到OSS

client span 拼接 font -- hang style 例如 req

第一步:安裝阿裏雲OSS

<!-- 引入在線資源 -->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
<!-- 引入本地資源 -->
<script src="./aliyun-oss-sdk-x.x.x.min.js"></script>

註意:

  • x.x.x代表版本號,具體版本信息可在這訪問查看
  • 引入在線資源方式依賴於CDN服務器的穩定性,推薦用戶使用離線方式引入,即通過本地資源或自行構建的方式

也可使用npm安裝SDK

npm install ali-oss

第二步:安裝完成後使用

可使用 import 或 require 進行引用。

region,accessKeyId,stsToken,bucket需要後端同事提供接口獲取,其中region是阿裏雲所在區域,登錄阿裏雲右上角能查看,例如“oss-cn-hangzhou”,bucket是阿裏雲倉庫的名稱

let OSS = require(‘ali-oss‘);
let client = new OSS({
  region: ‘<oss region>‘,
 accessKeyId:‘your accessKeyId‘,
 stsToken:‘your stsToken‘,
 bucket:‘your bucket name‘
});

第三步:上傳

your_route是你要上傳文件夾的路徑,後端同事可以返給你也可以自己拼接,我這裏是自己拼接的,比如你的bucket下有個文件夾叫pc,你要上傳到pc這個文件夾下,your_route就是‘/pc/’,file是你的上傳的file
其中分片上傳如果圖片大於100k,返回的路徑最後會自動帶一個?uploadId=***********之類的參數,我在這裏是自己截取處理了一下

          //文件名
                    const storeAs = ‘your_routte‘ + file.name;   
                    client.multipartUpload(storeAs, file, {

                    }).then(results => {
                        //console.log(results)
                        if(results.res.requestUrls[0].indexOf(‘?‘) != -1){
                            this.url = results.res.requestUrls[0].split(‘?‘)[0];
                        }else{
                            //console.log(‘圖片100k以內‘)
                            this.url = results.res.requestUrls[0]
                        }
                        Toast(‘頭像上傳成功‘);
                    }).catch((err) => {
                        console.log(err);
                    }); 

vue2上傳圖片到OSS