图片上传回显【不需要服务器返回图片地址】

一般图片文件上传的时候，有时候我们可能会添加多张图片，并不需要马上上传到服务器，可能用户需要先本地上传了预览好了，会自己主动上传，因此，我们需要通过前端的方式，将用户上传的图片回显到页面。

解决方案

通过URL.createObjectURL(file)这种方式会生成一个访问本地图片的一个地址。这里通过iview组件为例

  <Upload
              :action="BASEURL + '/RedeemCode/ImportRedeemCode'"
              :data="uploadParams"
              accept=".png,.webp"
              :on-format-error="handleFormatError"
              :on-success="handleSuccess"
              :before-upload="handleUpload"
              :show-upload-list="false"
              ref="upload"
              multiple
              :disabled="isUploadLoading"
            >
              <Button icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
              <Button icon="ios-cloud-upload-outline" @click="uploadExcel">上传文件</Button>
             <img :src="img" alt=""/>//显示预览图片列表
            
            js
            //阻止默认上传
            handleUpload(file) {
              this.img=URL.createObjectURL(file)//这里会生成访问本地图片的一串地址
              this.file = file;
              return false;
    },
    
        //提交上传图片
    uploadExcel() {
      this.$refs.upload.post(this.file);//ok上传成功
    },