el-upload上传附件连带表单其它内容上传问题

最新推荐文章于 2024-06-24 15:01:00 发布

mfuuty

最新推荐文章于 2024-06-24 15:01:00 发布

阅读量433

点赞数 1

分类专栏： vue 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/mfuuty/article/details/114252342

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

点击提交时，需要同时传给后端上传文件的参数和摘要文本框中的内容

      <el-form>
        <el-form-item label="摘要" :label-width="formLabelWidth" >
          <el-input type="textarea" v-model="fileData.unAbstract"></el-input>
        </el-form-item>
        <el-form-item label="附件" :label-width="formLabelWidth" >
          <el-upload
            :data="fileData"    
            :action="urlAction"
            ref="upload"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :on-change="handleChange"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="submit">提交</el-button>

action这个属性是上传文件的地址，提交方式为post，auto-upload 属性可以控制是否自动提交，需要传递参数时，通过el-upload的data属性传递。提交附件时，如果需要连同表单内其它内容一同传入后端，只需将表单需要传递内容的v-model绑定到el-upload的data中，由于data是双向绑定，通过如下提交方式，可以提交所有定义在 fileData中的数据。

methods: {
    submit(){
      this.$refs.upload.submit();
    },
  },

  data () {
    return {
      urlAction: window.SITE_CONFIG['baseUrl'] + '/unionFile/uploadFile',
	  fileData: {
	      unAbstract:'', //摘要
	      tableUuid: '',
	      tableName: '',
	      tableKey: '',
	      creatorId:'',
	    },
	   };
	  },