iview的upload组件使用-实现图片上传和详情页回显（适合小白简洁版）

实现效果如图：–>

iview官网给的几种实例，个人觉得这一种最好用，最简洁，适用于多种场景，不用考虑回显图片这个大坑！个人觉得要比elementUI的上传upload组件好用10倍！

实现步骤代码方法如下：

第一步：
HTML代码如下，注释写的较为详细，大家读一下代码就理解了

<div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">
              <template v-if="item.status === 'finished'">
                  <img :src="item.url">
                  <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon> // 眼睛按钮图标，点击可预览图片
                      <Icon v-if="!isDisabled" type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> // 删除图标，详情时，若不可更改，把删除按钮隐藏
                  </div>
              </template>
              <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
              </template>
          </div>
          <Upload
              v-show="!isDisabled" // 当详情页展示数据时，不展示上传框
              ref="upload"
              :show-upload-list="false"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="10240"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-error="handleError"
              :before-upload="handleBeforeUpload"
              type="drag"
              action="/ups/public/file/upload"
              style="display: inline-block;width:60px;">
              <div style="width: 60px;height:60px;line-height: 60px;">
                  <i class="el-icon-camera-solid"></i>
              </div>
          </Upload>
          <div v-show="uploadList.length === 0 && isDisabled">暂无</div>  // 当时详情页且无图片需要回显时显示暂无
          <div style="color:red;font-size:12px;">*只能上传一张图片</div> // 提示语
          <Modal title="查看图片" v-model="dialogVisible"> // 查看图片的dialog框
              <img :src="dialogImageUrl" v-if="dialogVisible" style="width: 100%">
          </Modal>

第二步：
在data中定义以下字段：

	// 根据需要在data中定义以下字段	
	  isDisabled: false, // 展示详情时为TRUE
      imgName: '',
      uploadList: [], // 上传封面图片数组
      dialogImageUrl: '', // banner
      dialogVisible: false, // 上传图片预览

第三步：
编写相关方法逻辑

  mounted () {
  // 从upload实例中获取文件列表
    this.uploadList = this.$refs.upload.fileList
  }, 
  methods: {
  // 预览图片
	  handleView (name) {
	      this.imgName = name
	      this.dialogVisible = true
    	},
    // 删除图片
    handleRemove (file) {
      // 从 upload 实例删除数据
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
      // 需要删除imgid，以免调用接口时没有情况，会导致删除失败的bug
      this.formValidate.imgId = ''
      // 也不需要回显，清空即可
      this.dialogImageUrl = ''
    },
    // 上传成功的钩子
    handleSuccess (res, file) {
    // 拼接完整路由
      file.url = '/file/download?fileId=' + res.data
      // 回显时会用到
      this.dialogImageUrl = '/file/download?fileId=' + res.data
      // 赋值给imgid，新增和编辑的时候会用到
      this.formValidate.imgId = res.data 
    },
    // 上传失败的钩子
    handleError () {
      this.$Message.error('上传失败，请稍后重试！')
    },
    // 检验文件格式错误的钩子
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    // 限制图片大小的钩子
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 10M。'
      })
    },
    // 图片上传前调用的钩子
    handleBeforeUpload () {
      const check = this.uploadList.length < 1
      if (!check) {
        this.$Message.error('最多只能上传 1 张图片,请删除后再上传！')
      }
      return check
    }
 }

最后成功实现图片的上传，满足编辑以及详情场景下的回显和上传逻辑。

希望对你有帮助，如果帮到你，请留个赞再走吧~