vue-element-admin之el-form表单上传多个文件，并与表单一起提交

最新推荐文章于 2024-07-09 09:24:08 发布

原创最新推荐文章于 2024-07-09 09:24:08 发布 · 5.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

vue-element-admin-master

8 篇文章

订阅专栏

本文介绍如何使用ElementUI和Vue实现表单中多个文件上传功能，并与表单其他数据一并提交。通过FormData对象处理文件，利用自定义上传方法与后端交互，确保上传过程的可控性和灵活性。

elementUI+vue表单上传多个文件和其他表单数据一起提交

这里使用的formdata提交方式，this.$refs.upload.submit()提交会触发http-request自定义上传方法

element代码

<el-dialog title="文件上传" :visible.sync="uploadVisible" width="650px">
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传附件" prop="annexFile">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="/api/boAnnex/addBoAnnex"
            :http-request="httpRequest"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            multiple
            :limit="10"
            :auto-upload="false"
            :on-change="getFile"
            :data="ruleForm"
            :file-list="fileList"
            name="annexFile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" rows="5" placeholder="请输入内容" maxlength="300" show-word-limit style="width: 400px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </div>
    </el-dialog>

data数据

data() {
    return {
      uploadVisible: false,
      ruleForm: {
        remark: ''
      },
      fileList: [],
      fd: {}
    }
  },

调用的methods

	getFile(file, fileList) {
      const fd = new FormData()// FormData 对象
      this.fd = fd
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    resetForm(formName) {
      this.uploadVisible = false
      this.$refs[formName].resetFields()
      this.$refs.upload.clearFiles()
    },
    httpRequest(param) {
      const fileObj = param.file // 相当于input里取得的files
      this.fd.append('annexFileArray', fileObj)// 文件对象
    },
    submitForm(file) {
      this.$refs.upload.submit()
      this.fd.append('remark', this.ruleForm.remark)
      this.fd.append('boId', this.businessId)
      uploadAnnex(this.fd).then(res => {
        this.uploadVisible = false
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.getAnnexList()
      })
    },

上传接口代码

export function uploadAnnex(data) {
  return request({
    url: '/api/boAnnex/addBoAnnex',
    method: 'post',
    data: data
  })
}

以上就可以了~~~~~~~~~~~~~~~~~~~