el-upload 多文件上传

uploadResourcesFile.vue的封装

<template>
	<div
		v-loading="loading"
		class="upload-file-panel"
		element-loading-text="上传资源比较大，请耐心等待...">
		<el-upload
			ref="upload"
			:action="action"
			:file-list="fileList"
			:data="paramsData"
			:on-change="handleChange"
			:on-success="handleSuccess"
			:on-remove="handleRemove"
			:before-upload="beforeUpload"
            :http-request="uploadFile"
			class="upload-demo"
			:auto-upload="false"
			name="file"
			:accept="acceptFileType"
			multiple
			drag
		>
			<i class="el-icon-upload" />
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			<div
				slot="tip"
				class="el-upload__tip">
				只能上传{{ fileType }}文件
				<div style="position:absolute;right:20px;top:250px;">
					<el-button
						type="primary"
						size="mini"
                        @click="handleUpload"
                    >上传</el-button>
				</div>
			</div>


		</el-upload>
	</div>
</template>

<script>
const {
    mapState
} = require(`vuex`);
const { $ } = window;
export default {
    name: `upLoad`,
    props: {
        autoUpload: {
            type: Boolean,
            default: false
        },
        fileType: {
            type: String,
            default: `.jpg,.mp4`
        },
        url: {
            type: String,
            default: ``
        },
        paramsData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            acceptFileType: `.jpg,.mp4`,
            loading: false,
            uploadFileName: ``,
            fileList: [],
            file : []
        };
    },
    computed: {
        ...mapState([`userInfo`]),
        action() {
            const interfaceHost = (this.$base.path.interfaceServiceHost).substring(0, this.$base.path.interfaceServiceHost.length - 5);
            return `${interfaceHost}/vision/experience/dataset/upload`;
        }
    },
    mounted() {
    },
    methods: {
        handleChange(file, fileList) {
            let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
            if (existFile) {
                this.$message.error('当前文件已经存在!');
                fileList.pop();
            }
            this.fileList = fileList;
        },
        uploadFile(file){
            this.file.push(file.file);
        },
        handleUpload(){
            var formData = new FormData();
            this.$refs.upload.submit();
            this.file.forEach(function (file) {
                formData.append('file', file, file.name); 
            });
            this.loading = true;
        　　
            formData.append('dataId',this.paramsData.dataId);
            $.ajax({
                    url: this.action,
                    type: 'post',
                    dataType: 'json',
                    data: formData,
                    headers : {
                        accessToken : this.$base.config.accessToken
                    },
                    processData: false,     
                    contentType: false, 
                    success: (res) => {
                        this.$message({
                            message: `${res.msg}`,
                            type: res.success === true ? `success` : 'warning'
                        });
                        this.loading = false
                        this.$emit(`on-load-success`);
                    }
            });
        },
        handlePreview(fileList) {
            console.log(fileList);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleSuccess(res) {
            this.loading = false;
            if (res.success) {
                this.$refs.upload.clearFiles();
                
            } else {
                this.$message({
                    showClose: true,
                    message: `文件上传失败！`,
                    type: `error`
                });
                this.$emit(`on-load-fail`);
            }
        },
        handleError() {
            this.loading = false;
            this.$message({
                showClose: true,
                message: `文件上传失败！`,
                type: `error`
            });
            this.$emit(`on-load-fail`);
        },
        handleExceed(files, fileList) {
            this.$message({
                showClose: true,
                message: `最多只能选择${this.fileTypeInfo.limit}个文件`,
                type: `warning`
            });
            console.log(files, fileList);
        },
        beforeUpload(file) {
            this.uploadFileName = file.name;
        }
    }
};
</script>

<style lang="scss" scoped>
    .upload-file-panel {
        margin-bottom: 2.5rem;
        .upload-btn {
            margin-top: 1rem;
        }
    }
</style>

调用

<UploadResourcesFile
     :paramsData="{dataId: currentInfo.id}"
      @on-load-success="handleUploadSuccess"
  />

效果