(1)绑定上传地址,上传数据对象
<el-upload class="upload-demo" :action="uploadUrl" :data="uploadData":on-success="handleSuccess" :file-list="[]" :show-file-list="false" :limit="1">
</el-upload>
(2)定义数据
// 商户的driver
driver: null,
// 图片上传的路径
uploadUrl: '',
// 上传图片的携带的信息
uploadData: {},
// 图片的链接头部分
cdn: ""
(3)定义方法
图片的路径就是图片头加上返回的key
/*** 获取获取商户的driver*/
async getDriver() {let res = await customerService.getDriver();if (res.code == 200) {this.driver = res.data.cdn_driver;this.cdn = res.data.cdn;this.driver ? this.getUploadToken() : "";}
},
/*** 上传图片获取token*/
async getUploadToken() {let params = {driver: this.driver};let res = await customerService.getUploadToken(params);if (res.code == 200) {switch (this.driver) {case 'oss':this.uploadData = {OSSAccessKeyId: res.data.accessid,policy: res.data.policy,success_action_status: '200',callback: res.data.callback,signature: res.data.signature,dir: res.data.dir};this.uploadUrl = res.data.host;break;case 'qiniu':this.uploadData = {dir: '',token: res.data.token};this.uploadUrl = "https://up.qiniup.com";}}
},
/*** 上传图片成功*/
handleSuccess(res, file, fileList) {// 图片的路径就是图片头加上返回的keylet imgUrl = `${this.cdn}${res.key}`;
}