element upload上传图标隐藏和修改回显图片

上传代码

        <el-form-item label="上传照片" prop="image">
          <el-upload
            accept="image/*"
            :class="{ uploadImg: fileList.length }"
            :action="upload1.url"
            list-type="picture-card"
            :headers="upload1.headers"
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview"
            :on-success="onSuccess"
            :limit="1"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt=""/>
          </el-dialog>
        </el-form-item>

    //  上传
    handleRemove(file, fileList) {
      this.fileList = []
      this.form.workPhoto = ''
      this.dialogImageUrl = ''
    },
    handlePictureCardPreview(file, fileList) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onSuccess(file, fileList) {
      console.log(file)
      this.dialogImageUrl = file.data
      this.form.workPhoto = file.data
      this.fileList.push({ url: this.imgUrl + this.dialogImageUrl })
    },

      // 上传
      upload1: {
        url: this.Url + '/oss/upload',
        headers: {
          Authorization: 'Bearer ' + getToken(),
          'User-Type': 'PC_MARKET'
        }
        // data: {
        //   fileType: "reservation",
        // },
      },
      fileList: [], //图片详情回显
      isNum: false, //控制是新增还是修改
      dialogImageUrl: '',
      dialogVisible: false, //控制弹窗显示

点击修改

          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['loader:Trade']"
          >修改
          </el-button>

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id
      this.disablePhone = true
      getStevedoreInfo(id).then((response) => {
        // 回显上传的图片
        this.fileList = [{ url: this.imgUrl + response.data.workPhoto }]
        this.isNum = true
        this.form = response.data
        // 返回数据不同回显显示不对,转换为相同类型
        this.form.areaId = Number(response.data.areaId)
        this.open = true
        this.title = '修改'
      })
    },

取消时把 fileList 置空即可

// 取消按钮
cancel() {
  this.open = false
  this.reset()
  this.fileList = []
  this.disablePhone = false
},

动态隐藏上传的图标样式

<style scoped lang="scss">
::v-deep .uploadImg .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
</style>