前端/el-upload回显图片

问题回顾：

之前使用el-upload死活显示不出来图片,或者莫名奇妙的样式问题，使用插槽又没有el-upload的样式，这次记录一下坑

解决

直接上代码

html中

        <el-upload :action="uploadUrl"
                   list-type="picture-card"
                   :on-preview="handlePicPreview"
                   :on-success="handleFileSuccess"
                   :on-remove="handleRemove"
                   :on-error="handleError"
                   :file-list="fileList"
                   :before-upload="beforeAvatarUpload"
                   :limit="1">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <span class="tip">注： 只允许上传一张图片</span>
        <el-dialog :visible.sync="showImage">
          <img width="100%" :src="downloadUrl + freqPatternModelForm.gnzchJgkt">
        </el-dialog>

JS:

回显图片

    // 回显图片
    getInfo() {
      // 拿到回显图片地址，getData是接口请写自己的
      getData(this.id).then(data => {
        if (data.result) {
          this.fileList.push({
            url: this.DownloadUrl + data.result.url
          })
          Object.assign(this.resetData, data.result)
        }
      })
    },

钩子

    handleRemove(file, fileList) {
      this.form.url = ''
    },
    handleFileSuccess(response, file, fileList) {
      this.form.url = response.result
    },
    handlePicPreview() {
      this.showImage = true
    },

这里有一个坑！！！！那就是data中的fileList和钩子返回的fileList是不同步的（除了初始化,往fileList中添加数据，data中的fileList是不会改变的）。这里简单说下我的理解

我们data中的fileList 只会在回显图片的时候使用到。假设我们在钩子中对fileList操作，则会出现图片交替问题（一闪而过然后补充一张图片）。原因是，我们上传图片后，el-upload会自动请求一次本地数据（拿到刚上传的图片，blob请求），假设我们在上传成功后再将图片的地址放入fileList，则会导致请求两次。所以我们上传成功后只需将返回的图片地址放入我们的表单中即可，无需对fileList进行操作。同理删除也是一样

当然，只要你不使用fileList 那么el-upload就不会有那一次blob请求。但这代表着你无法使用fileList那样的动画效果了...

最后贴上 download的url和action的url 防止请求地址错误（以自己家后台接口为准，仅供参考）