(1)绑定上传地址,上传数据对象
html
<el-upload class="upload-demo" :action="uploadUrl" :data="uploadData"
:on-success="handleSuccess" :file-list="[]" :show-file-list="false" :limit="1">
</el-upload>
(2)定义数据
javascript
// 商户的driver
driver: null,
// 图片上传的路径
uploadUrl: '',
// 上传图片的携带的信息
uploadData: {},
// 图片的链接头部分
cdn: ""
(3)定义方法
图片的路径就是图片头加上返回的key
javascript
/**
* 获取获取商户的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) {
// 图片的路径就是图片头加上返回的key
let imgUrl = `${this.cdn}${res.key}`;
}