问题: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是否在选取文件后立即进行上传booleantrue
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在通过接口传递即可。问题不大。

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐