vue继承组件会继承html吗,Vue 继承 element-ui upload 重写定义上传组件.

代码参考:

继承 uplaod 重写http-request, 定义新的上传组件 OSSUpload

import {Upload} from 'element-ui';

import OSS from 'ali-oss';

import {getToken} from 'api/oss';

export default {

name: "OSSUpload",

mixins: [Upload],

props: {

ossOnSuccess: {

type: Function,

default: Function

},

httpRequest: {

type: Function,

default: async params => {

try {

const {result} = await getToken();

const ossClient = new OSS({

region: "oss-cn-shanghai",

accessKeyId: result.AccessKeyId,

accessKeySecret: result.AccessKeySecret,

stsToken: result.SecurityToken,

bucket: result.bucket

});

const file = params.file;

ossClient.put(file.name, file).then(val => {

if (val.res.statusCode === 200) {

params.onSuccess(val);

}

}, err => {

params.onError(err);

});

} catch (e) {

params.onError(e);

}

}

},

},

methods: {}

}

复制代码使用组件

Hello OSS !!!

list-type="picture-card"

:file-list="picList"

:on-success="handleSuccess">

import {Upload} from 'element-ui';

import OSSUpload from "./OSSUpload";

export default {

name: "oss",

components: {OSSUpload},

mixins: Upload,

data() {

return {

picList: []

};

},

methods: {

handleSuccess(...params) {

if (params[0]) {

console.log("上传成功", params[0]);

}

}

}

}

复制代码