web直接上传oss_web端阿里云oss直传

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

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。

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