随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

el-upload上传附件并携带其他参数

复制代码
 <el-dialog title="导入"
               :visible.sync="showExportDialog"
    >
      <el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px">
        <el-form-item label="excel文件" prop="file">
          <el-upload style="display: inline-block;margin-left: 10px"
                    class="upload-demo"
                     ref="upload"
                     accept=".xls,.xlsx"
                  :data="addForm" // 发送请求的参数对象
                     :auto-upload="false" // 取消自动上传,获取file对象后先等一下
                     :action="uploadFileUrl" // 提交表单的url
                     :headers="headers" //请求头
                     :show-file-list="false"
                     :on-success="handleUploadSuccess"
                     :on-change="changeFile"
                     >
            <span v-if="curName">{{curName}}</span>
            <el-button type="primary" icon="" v-else>选文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="纸质扫描附件" prop="annexUrl">
          <fileUpload :isShowTip="false" :value="addForm.annexUrl" :limit="1" @input="getFileList"
                      :fileType="['png','jpg','jpeg']">
          </fileUpload>
        </el-form-item>
        <el-form-item label="培训现场其它说明" prop="notes" v-if="data_type==='train'">
          <el-input type="textarea" v-model="addForm.notes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitComplete">确 定</el-button>
    </span>
    </el-dialog>
复制代码

script部分

复制代码
changeFile(file){
      this.curName = file.name; // 必须,选择文件后可把文件名展示出来,否则感觉没有选中文件一样。
    },
    // 导入成功
    handleUploadSuccess(res, file) {
      console.log('res',res);
      if (res.code !== 200) {
        return this.$alert(res.message, {
          dangerouslyUseHTMLString: true
        });
      } else {
        this.closeDialog();
        this.pageList();
      }
    },

 getFileList(filesList) {//纸质扫描附件,这里给参数对象的annexUrl赋值
       this.addForm.annexUrl= '';
       filesList?.forEach(el=>{
         this.addForm.annexUrl = el.url;
       })
    },
复制代码
 // 导入:提交表单
    submitComplete() {
      console.log(this.addForm)
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.$refs.upload.submit();  // 表单验证后这里直接调用el-upload组件自带的click方法。
        }
      });
    },
复制代码
复制代码

遇到的问题:

1、必须在上传组件el-upload组件上传,传递file(formData)类型的文件对象,表单验证后再传递(即使封装成formData)永远无法触发后台接口。

2、此时当选择的excel文件为必选项,则表单验证无法进行,因为file是el-upload自带的参数key,此时若再在addForm内部加一个file验证,则请求时会有两个file值,且是不对的。(待解决这个问题再来更新。)

posted on   小虾米吖~  阅读(1362)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示