因公司的專案需求，需要前端圖片直接上傳阿里雲，並且採取的是後端簽名後oss上傳阿里雲。
html程式碼 <el-upload
action="http://檔案目錄.oss-cn-beijing.aliyuncs.com"
list-type="picture-card"
:on-preview="handlePreview"
:on-remove="handleRemovePic"
:before-upload="handPic"
:file-list="picList"
:http-request="picUpload" > <i class="el-icon-plus"></i> </el-upload>
使用http-request覆蓋元件的預設上傳行為，
圖片操作（限制格式或者大小）可以放在before-upload鉤子函式內複製程式碼picUpload(file) { // 圖文上傳
// 採取後端簽名方式，獲取的簽名儲存到cookies中，可以保證阿里雲的安全性，賬號不可見
let pro = new Promise((resolve, rej) => {
// 從cookies中取簽名，判斷簽名有沒有過期
var res = JSON.parse(Cookies.get("sign"));
var timestamp = Date.parse(new Date()) / 1000;
if (res.expire - 3 > timestamp) {
console.log("簽名沒過期");
resolve(res);
} else {
//簽名過期的話重新請求籤名
this.$http.get("http://請求籤名的地址").then(res => {
console.log(res, "簽名過期");
Cookies.set("sign", JSON.stringify(res.data));
resolve(res.data);
});
}
});
var that = this;
pro.then(success => {
//success就是請求的簽名，裡面的內容經過加密了
var data = success;
//圖片通過表單方式上傳，所以要宣告一個表單物件
var ossData = new FormData();
//時間為了建立不同的層級目錄，時間戳為了保證上傳同一張圖片不會被覆蓋
var date = new Date();
var s = date.getTime()
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
ossData.append("name", file.file.name);
//key就代表檔案層級和阿里雲上的檔名
ossData.append("key",data.dir + "/" + y + "/" + m + "/" + d + "/" +s+file.file.name);
ossData.append("policy", data.policy);
ossData.append("OSSAccessKeyId", data.accessid);
//阿里雲正常返回204，然後返回資訊是空的，想看到返回資訊強制讓它返回201，返回一個xml檔案可以提取有用的資訊
ossData.append("success_action_status", 201);
ossData.append("signature", data.signature);
ossData.append("file", file.file, file.file.name);
that.$http.post(data.host, ossData, {
headers: { "Content-Type": "multipart/form-data; boundary={boundary}" }
})
.then(res => {
console.log(this.fileList);
this.imgText.push(ossData.get("key"));
console.log(this.imgText, "imgtext");
})
.catch(error => {
console.log(error, "錯誤");
});
});
},複製程式碼上傳成功201的返回資訊（被我刪掉一些關鍵字）
<PostResponse>
<Bucket>open</Bucket>
<Location>http://open.oss-cn-beijing.aliyuncs.com//openservice/2017/12/30/15149708053651234.jpg</Location>
<Key>open/2017/12/30/15149708053651234.jpg</Key>
<ETag>5EB52967855E151E2433B465F858E5</ETag>
</PostResponse>複製程式碼