为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用，谁返回来都行)
代码部分：
<template> <div class="upLoad"> <div class="file">上传图片 <input type="file" :accept="typeArr" @change="upload($event)"> </div> </div> </template> <style lang="less" scoped> .file { position: relative; left: .26rem; top: .2rem; display: inline-block; background: #32d582; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: white; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } </style> <script> export default{ props: ['typeArr', 'size'], data(){ return { client: '', fileSize: 5000000 } }, methods: { getRight(){ if (this.size) { this.fileSize = this.size; } this.client = new OSS.Wrapper({ region: "同endpoint", secure: true,//https endpoint: '运维会告诉你', accessKeyId: "id和secret去阿里云控制台获得", /*accessKeyId,accessKeySecret两者到阿里云控制台获得*/ accessKeySecret: "", bucket: '' /*装图片的桶名*/ }); }, /**上传图片**/ upload(event){ var self = this; var file = event.target.files[0]; var type = file.name.split('.')[1]; var storeAs = new Date().getTime() + '.' + type; var boolean = true; if (file.size > this.fileSize) { Toast('亲,图片不能超过!' + this.fileSize / 1000 + 'kb'); return false; } if (this.typeArr && this.typeArr.indexOf(type) > 0) { boolean = false; } if (boolean) { Toast('上传图片格式不支持!请选择' + this.typeArr); return false; } this.getRight(); this.client.multipartUpload(storeAs, file).then(function (result) { console.log(result)//至此就拿到了返回的路径 self.data.url = result.res.requestUrls[0].split('?')[0]; }).catch(function (err) { console.log(err); }); }, } }</script> 父组件调用
<up-Load class="files" typeArr="image/png,image/jpg,image/gif,image/jpeg" size="500000"></up-Load>
注：需引入官网推荐的oss对象的cdn
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
需再次强调的是:该代码为前端直传,accessKeyId,accessKeySecret都暴露在外面，更安全的方法可见官网的“服务端签名后上传”(貌似没示例)
原文地址：https://segmentfault.com/a/1190000013153127