Element之el-upload多文件一次性上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element之el-upload多文件一次性上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一：

页面展示：

Element之el-upload多文件一次性上传

Html部分代码：

Element之el-upload多文件一次性上传

      <el-upload
        accept=".pdf"
        name="fileName"
        class="upload-demo"
        multiple
        action="https://xxxxxxxxxxxx"
        :headers="headers"
        :file-list="fileList"
        :auto-upload="false"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-change="handleChange"
      >
        <el-button size="default" icon="el-icon-upload" type="primary" round>上传文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button size="default" @click="uploadDialog = false">取 消</el-button>
        <el-button type="primary" size="default" :disabled="!fileList.length" @click="submitUpload">确定</el-button>
      </span>

accept	用于限制允许上传哪些类型文件
name	上传的文件字段名（默认为 file）
multiple	是否支持多选文件
action	必选参数，上传的地址
headers	设置上传的请求头部
file-list	上传列表
auto-upload	是否在选取文件后立即进行上传

主要逻辑:

1. 多选文件，multiple必填

2. 若需要修改上传的文件字段名，则设置name

3. 关闭自动上传，设置auto-upload

4. 将所有选择的文件，保存到 file-list 绑定的数组属性中

5. 利用FormData对象，将文件传给后端

Javascript部分代码：

Element之el-upload多文件一次性上传文章来源地址https://www.toymoban.com/news/detail-511959.html

    submitUpload() {
      const formData = new FormData();
      // 额外参数，根据自身情况添加
      formData.append('contract_id', this.uploadParams.contract_id);
      /**
       * 所有选择的文件，放到FormData对象中上传
       * fileName[] 属性名根据自身情况定义
       */
      this.fileList.map((file) => {
        formData.append('fileName[]', file.raw)
      });
      uploadContract(formData).then(response => {
        this.msgSuccess(response.message);
        this.uploadDialog = false;
        this.getContractList();
        this.fileList = [];
      });
    },

到了这里，关于Element之el-upload多文件一次性上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！