[JavaScript知识库]elementui el-upload 实现单张图片上传删除原框

<template>
  <div>
    <el-form ref="shareFormRef" :model="form" label-width="100px" size="mini">
      <el-form-item label="分享标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="分享内容">
        <el-input v-model="form.content"></el-input>
      </el-form-item>

      <el-form-item label="分享图标">
        <el-upload
          v-show="hideUpload"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :http-request="upload"
          :before-upload="beforeUpload"
          :on-change="onChange"
          :limit="limitCount"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，单个文件小于300kb
          </div>
        </el-upload>
        <ul class="el-upload-list el-upload-list--picture-card" v-show="hideUpload === false">
          <li class="el-upload-list__item is-ready">
            <img
              :src="dialogImageUrl"
              alt=""
              class="el-upload-list__item-thumbnail"
            />
            <a href="" class="el-upload-list__item-name">
              <i class="el-icon-document"></i>
            </a>
            <label class="el-upload-list__item-status-label">
              <i class="el-icon-upload-success el-icon-check"></i>
            </label>
            <i class="el-icon-close"></i>
            <i class="el-icon-close-tip"></i>
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="previewImg">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="deleteImg">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </ul>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'shareConfig',
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      limitCount: 1,
      hideUpload: true
    }
  },
  methods: {
    // 预览图片
    previewImg() {
      this.dialogVisible = true
    },
    // 删除图片
    deleteImg() {
      this.dialogImageUrl = ''
    },
    upload() {},
    onChange(file, fileList) {
      if (fileList.length >= this.limitCount){
        this.hideUpload = false
      }
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          this.dialogImageUrl = params[0] + ',' + params[1]
        }
      })
   
    },
    beforeUpload(file) {},
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 获取图片转base64
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    }
  }
}
</script>

<style scoped>
</style>

上传之前

上传之后右边上传组件隐藏