vue+elementui组件图片上传时。将数据和图片一起提交

直接上图

   <el-form :model="editShopImg" ref="editShopImg" :rules="rules" label-width="150px">

        <el-form-item label="适用门店组图片上传" prop="fileList">

           

          <el-upload

            class="upload-demo"

            action=""

            :headers="dataObj"

            :on-preview="handlePreview"

            :on-remove="handleRemove"

            :before-upload="beforeUpload"

            :file-list="fileList"

            list-type="picture">

       

            <el-button size="small" type="primary" >点击上传</el-button>

            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

          </el-upload>

        </el-form-item>

        <div class="save-btn">

          <el-button type="primary" size="small" @click="submitFile">保存</el-button>

        </div>

      </el-form>

  submitFile(){

    

      const formData = new FormData()

      formData.append('file', this.uploadFile)

      axios({

        method: 'put',

        url: '/shopGroup/updateImage/' + this.editShopImg.id,

        data: formData,

        headers: {

          Authorization:Cookies.get("loginToken")

        }

      }).then(res => {

        console.log(res.data,"res.data")

        this.dialogVisibleShopImg=false

         if(res.data.code == 200 & res.data.success == true){

              this.$message({

                message: "提交成功",

                type: "success"

              

              });

            }else {

              this.$message({

                message: "保存失败",

                type: "error"

              });

            }

      })

    },

以此做记录