在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面

        <el-form-item label="项目LOGO">
          <el-upload
            ref="upload"
            :class="{hide:hideUpload}"
            drag
            action="#"
            :multiple="false"
            list-type="picture-card"
            accept=".jpg, .png"
            :show-file-list="true"
            :auto-upload="false"
            :limit="1"
            :file-list="fileList"
            :on-remove="removeFile"
            :on-change="handleChange"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file, fileList)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
            <el-dialog :visible.sync="dialogImg">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

在回显的接口中,将URL赋值给fileList

 this.fileList.push({
            'url': res.data[0].avatar
          })
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐