（1）綁定上傳地址，上傳數(shù)據(jù)對(duì)象
<el-upload class="upload-demo" :action="uploadUrl" :data="uploadData"
:on-success="handleSuccess" :file-list="[]" :show-file-list="false" :limit="1">
</el-upload>（2）定義數(shù)據(jù)
// 商戶(hù)的driver
driver: null,
// 圖片上傳的路徑
uploadUrl: '',
// 上傳圖片的攜帶的信息
uploadData: {},
// 圖片的鏈接頭部分
cdn: ""（3）定義方法文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-694124.html
????????圖片的路徑就是圖片頭加上返回的key文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-694124.html
/**
* 獲取獲取商戶(hù)的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}`;
}到了這里，關(guān)于el-upload上傳圖片到七牛云或阿里云的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
