element-ui upload 多个文件一次请求上传（Vue精简版）

问题：element-ui 自带el-upload文件上传可以实现多文件上传，但是会触发多次请求。

需求：在使用el-upload多文件上传的时候，发送后端一次请求。

---

el-upload在文档中已经有例子限制图片格式和大小，这里不举例。

这里使用代码例子：手动上传

Html全部代码

<template>
    <el-upload
            class="pop-upload"
            ref="upload"
            action=""
            :file-list="fileList"
            :auto-upload="false"
            :multiple="true"
            :on-change="handleChange"
            :on-remove="handleRemove"
    >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
</template>

 

Element官网提供的参数的意思

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
multiple	是否支持多选文件	boolean	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]

action参数必填，这里不走el-upload的默认上传，所以用不到这个地址，填空即可

因为是用自己封装方法提交，所以用不到on-success和on-error方法。

JS全部代码

<script>
    import request from "@/utils/request"    // 此处为请求的封装方法，没有引用可以忽略
    export default {
        data() {
            return {
                fileList: [],   // 定义一个空数组
            };
        },
        methods: {
            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            //上传服务器
            submitUpload() {
                //判断是否有文件再上传
                if (this.fileList.length === 0) {
                    return this.$message.warning('请选取文件后再上传')
                }
                // 下面的代码将创建一个空的FormData对象:
                const formData = new FormData()
                // 你可以使用FormData.append来添加键/值对到表单里面；
                this.fileList.forEach((file) => {
                    formData.append('file', file.raw)
                })
                // 添加自定义参数，不传可删除
                formData.append('parentId', '49')
                formData.append('uploadType', '备料单')
                formData.append('versions', 'v4.0')

                //自定义的接口也可以用ajax或者自己封装的接口
                request({
                    method: 'POST',
                    url: '/uploadFile',   //填写自己的接口
                    data: formData        //填写包装好的formData对象
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error('上传失败');
                    }
                    //清空fileList
                    this.fileList = []
                })
            },
        },
    };
</script>

这里不通过submit去提交，通过自己定义方法提交需要用到new FormData()对象，不了解FormData的朋友可以点击这里FormData

用element自带的on-change和on-remove可以很方便获取到fileList，最后把获取到的formData在通过接口传递即可。问题不大。