element中el-upload图片的上传与回显

html

 <el-upload :file-list="blFileList" :class="{hide:upload.bl}" :http-request="((val)=>{return myUpload(val,1)})" :on-preview="handlePictureCardPreview" :on-remove="((file,fileList)=>{return handleRemove(file,fileList,1)})" :before-upload="handleBeforeUpload" :on-change="((file,fileList)=>{return handleChange(file,fileList,1)})" action="" list-type="picture-card">
           <!-- 点击进行图片放大预览  -->
              <i class="el-icon-plus" />
            </el-upload>
               <!-- 图片放大预览显示弹出框  -->
            <el-dialog :visible.sync="bl_dialogVisible" :close-on-click-modal="false" :append-to-body="true">
              <img :src="factoryFormData.bLicense" width="100%" alt="">
            </el-dialog>

js

data() {
    return {
         blFileList: [], // 存放回显图片的数组
         limitNum: 1, // 限制上传图片张数
         bl_dialogVisible: false,
     // 文件上传按钮，默认显示
      upload: {
        bl: false,
        pl: false
      },
       factoryFormData: {
        id: '',
        name: '',
        bUrls: '', // 图片一
        pUrls: '' // 图片一
      },   
    },
    watch: {
    // 监听对象里面的营业执照
    'factoryFormData.bUrls'(newValue, oldValue) {
      // 如果存在地址
      if (newValue) {
        // 路径拼接
        const path = this.baseUri + this.factoryFormData.bUrls
        this.backfillPicture(1, path)
        // 隐藏上传图片按钮
        this.upload.bl = true
      }
    },
    // 监听对象里面的生产许可证
    'factoryFormData.pUrls'(newValue, oldValue) {
      if (newValue) {
        // 路径拼接
        const path = that.baseUri + that.factoryFormData.productionLicenseUrls
        this.backfillPicture(2, path)
        that.upload.pl = true
      }
    }
  },
   methods:{
    // 图片上传之前的判断
     handleBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt1M = file.size / 1024 / 500 < 1
      if (!isIMAGE) {
        this.$message.error('上传文件只能是jpg或png图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 500kb!')
      }
      return isIMAGE && isLt1M
    },
    // 删除上传的图片
    handleRemove(file, fileList, type) {
      if (type === 1) {
        this.factoryFormData.bLicense = null
        this.upload.bl = fileList.length >= this.limitNum
      } else {
        this.upload.pl = fileList.length >= this.limitNum
        this.factoryFormData.pLicense = null
      }
    },
    // 图片的放大预览
     handlePictureCardPreview(file) {
      this.factoryFormData.bLicense = file.url
      this.bl_dialogVisible = true
    },
      // 图片的上传调用方法
    myUpload(content, type) {
      var form = new FormData()
      form.append('file', content.file)
      this.addFile(form, content.file, this.uploadActonUrl).then(res => {
        if (res.id !== undefined && res.id !== null) {
          content.onSuccess('文件上传成功！')
          content.file.uid = res.id
          // 拼接要显示的路径
          const path = this.baseUri + res.path
          this.backfillLicence(type, res.id, path, true)
        } else {
          content.onError('文件上传失败!') //, code:' + res.data.code)
        }
      }).catch(error => {
        if (error.response) {
          content.onError('文件上传失败,' + error.response.data)
        } else if (error.request) {
          content.onError('文件上传失败，服务器端无响应')
        } else {
          content.onError('文件上传失败，请求封装失败')
        }
      })
    },
    // 回填form表单关于附件数据
    // status:true新增false删除
    backfillLicence(type, fileId, path, status) {
      if (type === 1) { // 图片一
        this.factoryFormData.bLicense = fileId
      } else if (type === 2) { // 图片二
        this.factoryFormData.pLicense = fileId
      }
      // 删除则不调用
      if (status) {
        // 回显图片
        this.backfillPicture(type, path)
      }
    },
    // 回填图片
    // type 1 图片一  2 图片二
    backfillPicture(type, url) {
      let arr = []
      if (type === 1) {
        arr = this.blFileList
      } else {
        arr = this.plFileList
      }
      const urlStr = url.split(',') // 地址
      urlStr.forEach(item => {
        const obj = {
          url: item
        }
        arr.push(obj)
      })
    },
    // 上传文件发生改变
    // status ---- 1 图片一  2 图片二
    handleChange(file, fileList, status) {
      if (status === 1) {
        this.upload.bl = fileList.length >= this.limitNum
      } else {
        this.upload.pl = fileList.length >= this.limitNum
      }
    }
}

css

<style>
/* 隐藏上传组件 */
.hide .el-upload--picture-card {
  display: none;
}
</style>