element-ui中el-upload多文件一次性上传

前端代码

<el-upload
           ref="upload"
           drag
           :file-list="fileList"
           :limit="50"
           multiple
           :auto-upload="false"
           :on-change="handleChange"
           :on-exceed="handleExceed"
           :http-request="uploadFile">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将license文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</div>
<el-button type="info" icon="el-icon-download" @click="submitUpload">生成</el-button>
  • :auto-upload="false"属性为false,阻止组件的自动上传

  • :http-request="uploadFile"覆盖上传事件

  • @click=“submitUpload”,给上传按钮绑定事件

  • limit : 是限制上传个数

export default {
    data() {
        return {
            userKey:"xzhongwei.com",
            fileData: '',  // 文件上传数据(多文件合一)
            fileList:[]
        };
    },
    methods: {
        // 选取文件超过数量提示
        handleExceed() {
            this.$message.warning(`当前限制选择 50 个文件`);
        },       
        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) {
            console.log(file)
            // append增加数据
		    this.fileData.append( "files",file.file);
		},
        submitUpload() {
            if (this.userKey === '') {
                this.$message({
                message: '填写用户密钥',
                type: 'warning'
                })
            } 
            else if (this.fileList.length === 0) {
                this.$message({
                message: '请先选择文件',
                type: 'warning'
                })
                } else {
                const isLt1M = this.fileList.every(file => file.size / 1024 / 1024 < 1);
                if (!isLt1M) {
                    this.$message.error('请检查,上传文件大小不能超过1MB!');
                } else {
                    this.fileData = new FormData(); // new formData对象
                    this.$refs.upload.submit(); // 提交调用uploadFile函数
                    this.fileData.append('key', this.userKey); // 除了上传文件还能同时传数据
                    
                    //console.log(this.fileData)
                    uploadFiles(
                       this.fileData
                        
                    ).then((res)=>{
                        let status = res.status;
                        if (status == 200){
                            this.fileList = [];
                            this.$message.info(res.obj)
                        }else{
                            this.$message.error(res.message)
                        }
                    });
                }
            }
        },
    }
};

uploadFiles实现
multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式

var instance_files = axios.create({ headers: { 'content-type': 'multipart/form-data', "Request-Source": "client" } });

export const uploadFiles = params => {
return instance_files.post(`https://127.0.0.1/upload`,
    params).then(res => res.data);
};

后端代码

在spring中实现

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public RespBean uploadFile(@RequestParam("files") List<MultipartFile> files,@RequestParam("key")String key) {
        for(MultipartFile file : files) {
			。。。
        }

        return RespBean.ok();
    }

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×