可以自定义上传方法、覆盖默认的上传行为
主要是这个属性 :http-request="uploadFn"
<template>
<span>
<el-upload
action="#"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:limit="limit"
:http-request="uploadFn"
:on-exceed="handleExceed"
:file-list="fileList"
:on-change="hanldeChange"
:accept="accept">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{ tipText }}</div>
</el-upload>
</span>
</template>
<script>
export default {
props: {
fileList: {
type: Array,
default: () => {}
},
limit: {
type: Number,
default: 1
},
tipText: {
type: String,
default: '请上传文件'
},
accept: {
type: String,
default: ''
}
},
data() {
return {
// fileList: []
};
},
methods: {
uploadFn() {},
hanldeChange(file) {
//新增筛选代码
this.fileList.push(file);
if (file.status !== 'ready') return;
this.$emit('fileSelect', file);
},
handleSuccess(file) {
this.$emit('success', file);
},
handleRemove(file, fileList) {
this.$emit('remove', fileList)
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制最多可选择 ${this.limit} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
}
}
};
</script>
<style lang="scss" scoped>
</style>