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 引入
2.2 代码示例
  • 有几个需要注意的点:

(1)plupload 会自动生成选择上传的方式和方法,所以需要在页面初始化后就初始化 Uploader,比如:在 window.onloadvuemounted 等地方调用;

(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

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

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 7,177评论 0 15
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 86,947评论 14 122
  • 这个春天来北京,给我最大的视觉享受就是北京的朝阳和夕阳,还有满大院的杨柳,柳芽吐蕊,杨柳依依,真正让你能品位出贺知...
    一笑人生阅读 290评论 1 6
  • 葡萄一个月前才激动地告诉我她谈恋爱了,可昨天却哭着给我打电话说失恋了。我从来没见到葡萄这么难过,我们从小一起长大,...
    长草的心阅读 316评论 0 4
  • 病房寂静,雨水叮咚。(原创) 前言:头脑欠佳,难以组织成文,将散碎聚集。 当灵魂疲惫不堪,我坐在房间里,神游不...
    帥哥阅读 44评论 0 0