笔记-el-upload

描述：用el-upload上传图片，选完图片后能回显

问题：无法回显

 

<el-form-item label="照片" prop="multipartFile">
            <el-upload
              class="avatar-uploader"
              action="''"
              :show-file-list="false"
              :http-request="httpRequest"
              :on-change="handleFileChange">
              <img v-if="form.multipartFile" :src="form.multipartFile" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

httpRequest(file) {
      if (file) {
        this.formData.append('multipartFile', file.file);
      }
    },
    handleFileChange(file, fileList) {
      //判断图片列表长度大于0时，代表已上传本地图片
      if (fileList.length > 0) {
        this.$set(this.form,'multipartFile',URL.createObjectURL(file.raw))
        // this.form.multipartFile = URL.createObjectURL(file.raw); //image图片回显
        this.$refs.form.clearValidate('multipartFile') //清除图片文字校验
      }
    },

原因分析：

不能用下面的方式赋值

this.form.multipartFile = URL.createObjectURL(file.raw);

//如果没有form this.multipartFile = URL.createObjectURL(file.raw);这样也没问题

得用：

this.$set(this.form,'multipartFile',URL.createObjectURL(file.raw))