因公司的项目需求，需要前端图片直接上传阿里云，并且采取的是后端签名后oss上传阿里云。
html代码使用http-request覆盖组件的默认上传行为， 图片操作（限制格式或者大小）可以放在before-upload钩子函数内复制代码
picUpload(file) { // 图文上传 // 采取后端签名方式，获取的签名保存到cookies中，可以保证阿里云的安全性，账号不可见 let pro = new Promise((resolve, rej) => { // 从cookies中取签名，判断签名有没有过期 var res = JSON.parse(Cookies.get("sign")); var timestamp = Date.parse(new Date()) / 1000; if (res.expire - 3 > timestamp) { console.log("签名没过期"); resolve(res); } else { //签名过期的话重新请求签名 this.$http.get("http://请求签名的地址").then(res => { console.log(res, "签名过期"); Cookies.set("sign", JSON.stringify(res.data)); resolve(res.data); }); } }); var that = this; pro.then(success => { //success就是请求的签名，里面的内容经过加密了 var data = success; //图片通过表单方式上传，所以要声明一个表单对象 var ossData = new FormData(); //时间为了创建不同的层级目录，时间戳为了保证上传同一张图片不会被覆盖 var date = new Date(); var s = date.getTime() var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); ossData.append("name", file.file.name); //key就代表文件层级和阿里云上的文件名 ossData.append("key",data.dir + "/" + y + "/" + m + "/" + d + "/" +s+file.file.name); ossData.append("policy", data.policy); ossData.append("OSSAccessKeyId", data.accessid); //阿里云正常返回204，然后返回信息是空的，想看到返回信息强制让它返回201，返回一个xml文件可以提取有用的信息 ossData.append("success_action_status", 201); ossData.append("signature", data.signature); ossData.append("file", file.file, file.file.name); that.$http.post(data.host, ossData, { headers: { "Content-Type": "multipart/form-data; boundary={boundary}" } }) .then(res => { console.log(this.fileList); this.imgText.push(ossData.get("key")); console.log(this.imgText, "imgtext"); }) .catch(error => { console.log(error, "错误"); }); }); },复制代码 上传成功201的返回信息（被我删掉一些关键字）复制代码 open http://open.oss-cn-beijing.aliyuncs.com//openservice/2017/12/30/15149708053651234.jpg open/2017/12/30/15149708053651234.jpg 5EB52967855E151E2433B465F858E5