官方API地址：https://help.aliyun.com/document_detail/31947.html
1. 獲取 OSS 圖片上傳憑證
這個需要后端的配合浙踢，發(fā)送請求獲取即可。
要注意獲取和保存的時機穗椅，根據(jù)過期時間記錄相關(guān)
sessionStorage比較好，既能減少請求的次數(shù)客蹋，又能保證上傳時憑證有效塞蹭。獲取憑證的流程和七牛直傳類似，可以看看上一篇 《七牛直傳文件》
下面是一段示例：
http.post('url', function (res) {
sessionStorage.setItem('accessInfo', res.returnInfo); // returnInfo 表示后端返回的值
sessionStorage.setItem('expireTime', new Date().getTime() + 30 * 60 * 1000); // 時間可以與后端約定好讶坯，比后端短一點為佳番电，單位為 毫秒（ms）
});
2. 初始化上傳方法
- 獲取之后就可以進行上傳了，這里用到了
plupload插件辆琅，如果有更好的方案也可以交流一下漱办。
2.1 plupload 引入
script標(biāo)簽引入或者npm install plupload --save附一篇
plupload上傳博客，里面有更全面的參數(shù)說明：https://www.cnblogs.com/2050/p/3913184.html#plupload_doc1
2.2 代碼示例
- 有幾個需要注意的點：
（1）plupload 會自動生成選擇上傳的方式和方法婉烟，所以需要在頁面初始化后就初始化 Uploader娩井，比如：在 window.onload、vue 的 mounted 等地方調(diào)用隅很；
（2）可能會出現(xiàn)頁面中需要多個上傳的地方撞牢，browse_button 可以接收數(shù)組參數(shù)（組件化則不需要）；
（3）不要忘記在 FilesAdded 后進行獲取憑證叔营、傳參、上傳等操作所宰；
- 下面直接展示一段示例代碼绒尊，在代碼注釋中做介紹。
/**
* 初始化 plupload
* @param id 觸發(fā)文件上傳的按鈕 id
*/
function initPlupload (id) {
var maxSize = '5mb';
// 定義 plupload 對象
var uploader = new plupload.Uploader({
mulit_selection: false, // 禁止多文件上傳
browse_button: id, // 觸發(fā)文件上傳的按鈕 id（傳入的參數(shù)）
url: 'http://oss-cn-hangzhou.aliyuncs.com', // 服務(wù)器的地址仔粥，與提供的阿里云的地址一致
filters: {
mime_types: [
{
title: 'Image files',
extensions: 'jpg,png.bmp,jpeg' // 允許上傳的文件類型
}
],
max_file_size: maxSize, // 允許上傳的最大尺寸
prevent_duplicates: false // 不允許上傳重復(fù)文件
},
resize: {
width: 600, // 壓縮后的寬
height: 400, //壓縮后的高
crop: true, // 開啟圖片裁剪
quality: 55, // 裁剪質(zhì)量婴谱，數(shù)值越小圖片越小
preserve_headers: false, // 不保留圖片原數(shù)據(jù)
},
init: {
// 上傳初始化
PostInit: function () {},
// 文件添加到上傳隊列后
FilesAdded: function (up, files) {
access = JSON.parse(session.getItem('accessInfo')); // 獲取信息，確保已拿到
// 這里可以做一個判斷躯泰，如果沒有 accessInfo 則調(diào)用方法獲取
/*** 這里有一點千萬要注意谭羔，添加到隊列后需要手動觸發(fā)上傳方法 ***/
// 從后端獲取的憑證
var params = {
key: access.key,
policy: access.policy,
OSSAccessKeyId: access.accessid,
success_action_status: 200, // 默認(rèn)是 204
signature: access.signature
}；
// 配置參數(shù)
up.setOption({
url: 'http://oss-cn-hangzhou.aliyuncs.com', // 后端返回的地址麦向，如果固定也可以不用修改瘟裸，與上面的 url 是一樣的
mulitipart_params: params // 傳入憑證，相當(dāng)于請求參數(shù)
});
// 開啟上傳
up.start();
},
// 上傳進度
UploadProgress: function (up, files) {},
FileUploaded: function (up, file, info) {
// file 里可以得到壓縮率
if (info.status === 200) {
// 上傳成功后執(zhí)行的操作
// ... 例如獲取圖片的 url 地址
} else if (info.status === 203) {
console.log('上傳到OSS成功诵竭，但是oss訪問用戶設(shè)置的上傳回調(diào)服務(wù)器失敗话告，失敗原因是:' + info.response);
} else {
console.log(info.respose);
}
},
// 錯誤信息
Error: function (up, err) {
if (err.code === -600) {
console.log('圖片大小不能超過' + maxSize);
} else if (err.code === -601) {
console.log('文件類型不正確');
} else if (err.code === -602) {
console.log('已上傳過');
} else {
console.log(err);
}
}
}
});
}
3. 其他問題
- 后端返回的圖片地址也有訪問的時間限制，如果過期了卵慰，就會返回
403沙郭。
目前沒有找到好的解決方案，由于“快推”中圖片只是臨時展示裳朋，所以沒有產(chǎn)生影響病线。
