ElementUI :el-upload调用一次接口同时上传多个文件及表单

最新推荐文章于 2024-08-14 01:24:28 发布

原创

最新推荐文章于 2024-08-14 01:24:28 发布 · 1.3w 阅读

85 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #el-upload #同时上传多个文件及表单

目的

el-upload组件默认情况下上传多少个文件就会请求多少次上传接口实现请求一次接口同时上传多个文件及表单

实现方案

multiple 支持多选文件
:auto-upload="false" 不在选取文件后立即进行上传
:http-request="httpRequest" 覆盖默认的上传行为自定义上传的实现
this.$refs.upload.submit()

代码实现

<template>
    <div id="text">
    <el-form ref="form" :model="newData" label-width="80px" label-position="right" size="mini">
        <el-form-item label="上传文件" prop="name">
            <el-upload
                ref="upload"
                multiple
                name="File"
                action=""
                :auto-upload="false"
                accept=".dll, .DLL, .xml, .XML"
                :http-request="httpRequest"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <span slot="tip" class="el-upload__tip">&nbsp;&nbsp;&nbsp;只能上传dll/xml文件</span>
            </el-upload>
        </el-form-item>
        <el-form-item label="作者名称" prop="authorName">
            <el-input v-model="newData.authorName"

最低0.47元/天解锁文章