情况一:多文件携带json一次性上传,弹窗+简单的表单,未涉及多个文件选择器,所以依旧保留element的submit提交文件方法

<el-upload 
  ref="upload" 
  :action="uploadUrl" 
  :file-list="fileList" 
  :auto-upload="false" 
  :http-request="uploadFile">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

<el-button type="primary" @click="submitUpload('form')">确 定</el-button>
  data () {
    return {
       uploadUrl: `xx/xxx/xxx`, // 上传的地址
       fileList: [],
       fileData: '', // 表单数据+文件
       form: {
          desc:'',
          array: []
       }
    }
  },
  methods: {
    // 自定义上传,以uuid为key
   //如果项目对文件的key没有特殊要求,就直接随意设置为file1,file2,file3
    uploadFile (file) {
      this.fileData.append(uuid.v1(), file.file) // append增加数据
    },
    // 文件上传并提交表单
    submitUpload (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fileData = new FormData()
          this.fileData.append('desc', this.form.desc)
          let string = JSON.stringify(this.form.arry)
          this.fileData.append('participantListJSONStr', string )
          this.$refs.upload.submit()
          // 和文件上传地址是一致的,这个是经过封装的接口请求(axios)
          this.$service.reviewxxx.uploadFile(this.fileData).then(res => {
            if (res.code === '200') {
              this.$message.success('上传成功')
            }
          }).catch(() => {
          })
        } else {
          return false
        }
      })
    },
  }

PS:如果表单属性太多,不想一直重复append,可以使用遍历表单对象的方法,例如

for (const key in data) {
    formdata.append(key, data[key]);
}

情况二:表单较为复杂,组件嵌套多层,并且有不确定的多个文件选择器,这时候无法给每个文件设置ref="upload",所以不再使用submit方法

<el-upload 
 action="#" 
 :file-list="fileList" 
 :show-file-list="false" 
 :auto-upload="false" 
 :on-change="handleChange">选择文件</el-upload>
data () {
    return {
       fileList: [],
       fileData: ''
    }
  },
  methods: {
    handleChange (file, fileList) {
      if (fileList.length > 1) { // 限制文件只可选择一个
        fileList.splice(0, 1)
      }
      this.fileList = fileList
      this.info.fileName = file.name
      this.info.operateValue = uuid.v1() + '/' + file.name
      this.info.fileList = fileList
    },
    // 文件上传并提交表单
    submitUpload () {
        this.fileData = new FormData()
        this.dataList.atWebUiCaseStepList.forEach(e=> {
            this.fileData.append(e.fileKey, e.fileList[0].raw)
        })
        this.fileData.append('jsonData', this.jsonData)
        this.$service.testCase.saveTestCase(this.fileData).then((res) => {})// 提交数据
    }

 代码是从项目中直接拷贝,部分代码业务代码没有附上,名称稍微有改动,但是核心代码都在

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e 4 个月前
8c391e04 6 个月前
Logo

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

更多推荐