官方API地址：https://help.aliyun.com/document_detail/31947.html
1. 获取 OSS 图片上传凭证
这个需要后端的配合，发送请求获取即可。
要注意获取和保存的时机，根据过期时间记录相关
sessionStorage比较好，既能减少请求的次数，又能保证上传时凭证有效。获取凭证的流程和七牛直传类似，可以看看上一篇 《七牛直传文件》
下面是一段示例：
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标签引入或者npm install plupload --save附一篇
plupload上传博客，里面有更全面的参数说明：https://www.cnblogs.com/2050/p/3913184.html#plupload_doc1
2.2 代码示例
- 有几个需要注意的点：
（1）plupload 会自动生成选择上传的方式和方法，所以需要在页面初始化后就初始化 Uploader，比如：在 window.onload、vue 的 mounted 等地方调用；
（2）可能会出现页面中需要多个上传的地方，browse_button 可以接收数组参数（组件化则不需要）；
（3）不要忘记在 FilesAdded 后进行获取凭证、传参、上传等操作；
- 下面直接展示一段示例代码，在代码注释中做介绍。
/**
* 初始化 plupload
* @param id 触发文件上传的按钮 id
*/
function initPlupload (id) {
var maxSize = '5mb';
// 定义 plupload 对象
var uploader = new plupload.Uploader({
mulit_selection: false, // 禁止多文件上传
browse_button: id, // 触发文件上传的按钮 id（传入的参数）
url: 'http://oss-cn-hangzhou.aliyuncs.com', // 服务器的地址，与提供的阿里云的地址一致
filters: {
mime_types: [
{
title: 'Image files',
extensions: 'jpg,png.bmp,jpeg' // 允许上传的文件类型
}
],
max_file_size: maxSize, // 允许上传的最大尺寸
prevent_duplicates: false // 不允许上传重复文件
},
resize: {
width: 600, // 压缩后的宽
height: 400, //压缩后的高
crop: true, // 开启图片裁剪
quality: 55, // 裁剪质量，数值越小图片越小
preserve_headers: false, // 不保留图片原数据
},
init: {
// 上传初始化
PostInit: function () {},
// 文件添加到上传队列后
FilesAdded: function (up, files) {
access = JSON.parse(session.getItem('accessInfo')); // 获取信息，确保已拿到
// 这里可以做一个判断，如果没有 accessInfo 则调用方法获取
/*** 这里有一点千万要注意，添加到队列后需要手动触发上传方法 ***/
// 从后端获取的凭证
var params = {
key: access.key,
policy: access.policy,
OSSAccessKeyId: access.accessid,
success_action_status: 200, // 默认是 204
signature: access.signature
}；
// 配置参数
up.setOption({
url: 'http://oss-cn-hangzhou.aliyuncs.com', // 后端返回的地址，如果固定也可以不用修改，与上面的 url 是一样的
mulitipart_params: params // 传入凭证，相当于请求参数
});
// 开启上传
up.start();
},
// 上传进度
UploadProgress: function (up, files) {},
FileUploaded: function (up, file, info) {
// file 里可以得到压缩率
if (info.status === 200) {
// 上传成功后执行的操作
// ... 例如获取图片的 url 地址
} else if (info.status === 203) {
console.log('上传到OSS成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + 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。
目前没有找到好的解决方案，由于“快推”中图片只是临时展示，所以没有产生影响。
