(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) {
- // 图片的路径就是图片头加上返回的key
- let imgUrl = `${this.cdn}${res.key}`;
- }