vue3语法
1.1 upload组件
<template>
<div class="upload-container">
<el-upload
ref="uploadRef"
:name="fileName"
:limit="limit"
:accept="accept"
:multiple="true"
:file-list="defaultFileList"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-change="handleChange"
class="editor-slide-upload"
:action="action"
>
<el-button size="small" type="primary"> 点击上传 </el-button>
<template #tip>
<div class="el-upload__tip">{
{ tips }}</div>
</template>
</el-upload>
</div>
</template>
<script>
import {
reactive, defineComponent, toRefs, onMounted, ref } from 'vue'
import {
ElMessage } from 'element-plus'
export default defineComponent({
name: 'Upload',
props: {
tips: {
type: String,
default: '',
},
action: {
type: String,
default: '',
},
limit: {
type: Number,
default: 5,
},
accept: {
type: String,
default: '',
},
fileName: {
type: String,
default: 'file',
},
fileList: {
type: Array,
default: [],
},
},
emits: ['success-callback', 'remove-callback', 'change-callback'],
setup(_, ctx) {
const uploadRef = ref()
let UploadObject = {
}
const dataMap = reactive({
defaultFileList: _.fileList,
dialogVisible: false,
checkAllSuccess: () => {
return Object.keys(UploadObject).every(
(item) => UploadObject[item].hasSuccess
)
},
handleSuccess: (response, file) => {
const uid = file.uid
const objKeyArr = Object.keys(UploadObject)
if (response.retCode !== 0)
return ElMessage.error(response.retMsg || '请求失败,请重新上传文件!')
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (UploadObject[