web端阿里云oss直传

官方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。

目前没有找到好的解决方案，由于“快推”中图片只是临时展示，所以没有产生影响。