前端oss上传文件

工作笔记保存，前端使用oss上传文件方法。

小型互联网公司（或者项目成本预算较低）为减少服务器压力节约成本，选择使用阿里云是一个不错对选择，整个过程在前端操作，只需要保存上传后对oss地址，不多说了，直接上代码（官方API：https://help.aliyun.com）

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script> 有多个版本选择，之间的差异不大，只是封装的key和value的变更和新增一些原型方法。

开始使用，首先需要实例化OSS.Wrapper，参数为开发者信息对象，官方说明

1. var client = new OSS.Wrapper({
7. 　　bucket: ‘<Your bucket name>‘//自定义的上传后地址，加在oss前
8. });

将申请的keyId,accessKeySecret放入/如何获取？

1. 登录阿里云控制台。
   

2. 将鼠标放在右上方的用户名区域，在弹出的快捷菜单中选择accesskeys。

3. 系统弹出安全提示对话框，单击继续使用AccessKey。

   页面显示Access Key ID和Access Key Secret。

var client = new OSS.Wrapper({





});

下面，我们就可以使用oss上传文件了，在页面上加一个file,绑定change事件，接收文件参数

function upload(obj){

　 var backurl=result.res.requestUrls[0].split("?")[0];//截取前面的地址，可以直接在浏览器打开

}).catch(function (err) {


}

multipartUpload方法接受两个参数，参数一为上传后的文件路径和文件名（自定义），为防止重复建议使用时间戳；参数二为文件对象

回调函数，成功回调返回一个对象，包含文件的信息

上传成功，可以看到上传后的文件地址，我们可以截取？之前的部分，也可以自己拼接出文件地址，因为我们上传之前已经知道了自己文件的域和名称，代码中已经说明。

这样前端就完成了整个文件上传，后端直接保存文件地址就可以了。

至此完成整个开发阶段，向所有奋斗在前线的前端同行致敬。工作辛苦，但也要记得休息好。

原文：https://www.cnblogs.com/cczk/p/9229795.html