[element-plus] el-upload 上传一张图，有缩略图，可删除-CSDN博客

在这里插入图片描述

传单张，可删除，传上去有缩略图

<el-upload
  class="avatar-uploader"
  action="#"
  :limit="1"
  :show-file-list="false"
  ref="uploadInstance"
  :before-upload="beforeUpload"
  accept="image/png,image/jpg,image/jpeg"
  :on-change="onChange"
>
  <img v-if="formData.appLogo" :src="formData.appLogo" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  <span
    v-if="formData.appLogo"
    class="logoDelete"
    @click.stop="clearUploadImg"
    >删除</el-icon>
</el-upload>

把 action设置空，因为它是必传的，auto-upload 自动上传设置为 false

删除

// 删除
const clearUploadImg = (file) => {
  formData.value.appLogo = "";
  uploadBanner.value.clearFiles();  // 清空已上传的文件列表
};

图片转base64

onChange(file) {
  //把图片转成base64编码
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = (e) => {
    let base64Code = e.target.result
    console.log(base64Code )//base64数据
    let code = base64Code.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
    // beforeUpdateImg.value.push({ uid: file.uid,photo: reader.result})
  }
},

限制大小，格式，分辨率

// 图片上传尺寸大小检验
beforeUpload (file) {
  let _this = this
  const types =["image/jpeg" ,"image/png","image/jpg"]
  const isTypes =type.includes(file.type);
  
  const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
  // const is40K = file.size / 1024 < 40; // 限制小于40K
  
  const isSize = new Promise(function (resolve, reject) {
    let width = 654; // 限制图片尺寸为654X270
    let height = 270;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function () {
      let valid = img.width === width && img.height === height;
      valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
  }).then(() => {
    return file;
  }, () => {
    ElMessage.error('图片尺寸限制为654 x 270，大小不可超过1MB')
    return Promise.reject();
  });
  if (!is1M) {
    ElMessage.error('图片大小不可超过1MB')
  }
  if (!isTypes ) {
    ElMessage.error('只能上传jpeg/jpg/png图片')
  }
  return isSize&is1M && isTypes 
}

手动触发选择文件

import { UploadInstance } from 'element-plus'
import { ref, type Ref } from "vue"

const uploadInstance: Ref<UploadInstance> = ref(null)


// 手动选择文件
const select = () => {
  uploadInstance.value.$el.querySelector('input').click()
}