Web端常见的上传方法是用户在浏览器或app端上传文件到应用服务器，然后应用服务器再把文件上传到OSS。就是这样，
和数据直传到OSS相比，以上方法有三个缺点：
上传慢。先上传到应用服务器，再上传到OSS，网络传送比直传到OSS多了一倍。如果直传到OSS，不通过应用服务器，速度将大大提升，而且OSS采用BGP带宽，能保证各地各运营商的速度。扩展性差。如果后续用户多了，应用服务器会成为瓶颈。费用高。需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器。
所以我们今天来实现oss直传阿里云，废话不多说，直接上代码！
安装ali-oss
npm install ali-oss --save
html部分：
<el-upload:action="oss.url"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-success="handleSuccessrotation":data="oss.data":before-upload="beforeUploadrotation":multiple="multi":class="rotationhide":limit="10" <!-- 最大上传数量 -->><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
data中声明：
oss: {url: "",//签名地址data: {key: "",policy:"eyJleHBpcmF0aW9uIjoiMjAzMy0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==",OSSAccessKeyId: "LTAI5tF5sntEmuc6LnHyca9W",success_action_status: 200, //如果不设置success_action_status为200，文件上传成功后则返回204状态码。signature: "wzc0uiYPYHS1k6vcQPE0nqF6WMQ=",},},multi: true,dialogVisible: false,dialogImageUrl: "",banner_img: "",
script部分：
export default {methods:{handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handleRemove(file, fileList) {console.log(file, fileList);},handleSuccessrotation(res, file, fileList) {this.banner_img = this.oss.url + file.uid + "_" + file.name;},beforeUploadrotation(file) {this.oss.data.key = file.uid + "_" + file.name;},},}
如果觉得《oss图片直传阿里》对你有帮助，请点赞、收藏，并留下你的观点哦！
