vue分次传多张图片

网上搜了一下，传多张图片都是一次选中多张图片然后上传的，如果想要点击一次上传一张图片，这样分两次上传两张图片如何处理呢。先在form中定义两个上传组件

<el-form-item :label="$t('lang.siteSettings.logo')" prop="sysImage">
               
                <el-upload
                  class="upload-demo"
                  action="#"
                  accept=".jpg, .png"
                  :auto-upload="false"
                  :on-change="uploadFile"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else ></i>
                  <el-button size="mini" type="primary" icon="el-icon-upload2"
                    >{{$t('lang.siteSettings.uploadPictures')}}
                  </el-button>
                </el-upload>
              </el-form-item>
              <el-form-item :label="$t('lang.siteSettings.icon')" prop="icon">
               
                <el-upload
                  class="upload-demo"
                  action="#"
                  accept=".jpg, .png"
                  :auto-upload="false"
                  :on-change="uploadFile1"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload1"
                >
                  <img v-if="imageUrl1" :src="imageUrl1" class="avatar1">
                  <i v-else ></i>
                  <el-button size="mini" type="primary" icon="el-icon-upload2"
                    >{{$t('lang.siteSettings.uploadPictures')}}
                  </el-button>
                </el-upload>
              </el-form-item>

　　data中

imageUrl: '',
      imageUrl1: '',

　　methods中

uploadFile (item) {
          let file = item.raw
          this.form.file = file
          // formData.append('file', file)
          this.imageUrl=window.URL.createObjectURL(file)
          
      },
      //上传文件
      uploadFile1 (item) {
          let file = item.raw
          this.form.file1 = file
          // formData.append('file', file)
          this.imageUrl1=window.URL.createObjectURL(file)
          
      },

　　表单提交

this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.id != undefined) {
                let formData = new FormData()
                formData.append("id",this.form.id)
                formData.append("file",this.form.file)
                formData.append("file1",this.form.file1)
                formData.append("sysDesc",this.form.sysDesc)
                formData.append("sysKeys",this.form.sysKeys)
                formData.append("sysName",this.form.sysName)
                updateSys(formData).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                let formData = new FormData()
                
                formData.append("file",this.form.file)
                formData.append("file1",this.form.file1)
                formData.append("sysDesc",this.form.sysDesc)
                formData.append("sysKeys",this.form.sysKeys)
                formData.append("sysName",this.form.sysName)
                updateSys(formData).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });

　　后端获取

@ApiOperation(value="新增Site settings")
    @PostMapping("/insertFile")
    public AjaxResult insertFile(SystemFile systemFile,@RequestParam(value = "file",required = false) MultipartFile file,@RequestParam(value = "file1",required = false) MultipartFile file1) throws IOException {}
    

　　

 

标签：file1,vue,form,formData,传多张,分次,file,上传,append
来源： https://www.cnblogs.com/sgj191024/p/16576991.html