vue上传图片至又拍云

vue项目中上传图片至又拍云使用的是官方的FORM API方法，官方链接：https://help.upyun.com/knowledge-base/form_api/#old-authorization。
图片的上传过程中主要用到的参数为file，policy、signature，file这里直接使用的element-ui上传组件。

policy

policy主要参数，参考官方链接：https://help.upyun.com/knowledge-base/form_api/#upload_args。从官方链接中可以看出，policy中主要必填参数为（bucket：文件上传到的服务，即又拍云的服务名称；save-key：文件保存路径，可用占位符；expiration：请求的过期时间，UNIX UTC 时间戳，单位秒。建议设为 30 分钟），其他参数可看情况添加。最终结果需进行转json和Base64处理（Base64编码：window.btoa(str)，解码：window.atob(str)）。

signature

signature为policy与文件密钥使用&拼接而成，文件密钥可在又拍云-云存储-存储管理-文件密钥处获得，拼接后字符串计算md5为最终结果，这里使用的是CryptoJS的MD5方法。

import CryptoJS from 'crypto-js'const upyunSignature=()=>{let policy=window.btoa(JSON.stringify({'bucket': '服务名称','content-length-range': '0,10240000',//文件大小限制'save-key': '/{filemd5}{.suffix}',//文件路径'expiration': Math.floor(new Date().getTime() / 1000) + 86400//过期时间}))let signature=CryptoJS.MD5(policy+'&文件密钥').toString()//此处文件密钥前要添加&符号，容易出错return {policy:policy,signature:signature}
}export {upyunSignature}

页面引用：

<el-uploadref="upload":show-file-list="false"accept="image/png, image/jpeg":max-size="2048"class="avatar-uploader":on-success="handleSuccess":on-error="handleFormatError":data="upyunSignature"action="//v0.api.upyun.com/服务名称"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//js部分
handleSuccess (res) {this.imageUrl = this.imageUrl+res.urlconsole.log(this.imageUrl);
},
handleFormatError (file) {this.$Notice.warning({title: 'The file format is incorrect',desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'})
},