AliveSeven Blog

前言：这里呢主要针对ElementUI的上传进行优化，上传之后是做假上传，然后进行本地预览，可以避免服务端资源的浪费和不必要的接口请求。当然，这里只针对图片这种类型。

之所以这样做的原因呢，主要是为了避免服务端（后端）资源的浪费，因为有些用户他上传之后，可能不是真的上传，或者上传错了，此时就把资源发到服务端，这样就很不好，我看目前网上很多方案还是这样做，非常不建议
另一方面，基于图片本身的特性，可以转为base64，然后进行预览，JS是有这部分的功能的，但是对于大尺寸或高分辨率的图片可能会导致性能下降和内存占用增加，这里还是要视情况而定

直接上代码吧

HTML，需要用自定义上传http-request

html 复制代码

<el-upload drag action :http-request="previewUpload" multiple :limit="5" :on-exceed="exceed">
  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  <div class="el-upload__text">
    <em>{{ i18n.t('text.clickToUpload') }}</em>
  </div>
  <template #tip>
    <div class="el-upload__tip" style="padding: 10px; font-size: 14px;">
      <div style="padding-top: 10px;">已選擇圖片</div>
    </div>
  </template>
</el-upload>

JavaScript

javascript 复制代码

const previewUpload = (uploadData) => {
  const reader = new FileReader();
  // 监听 FileReader 的 load 事件
  reader.onload = function(e) {
    const result = e.target.result;
    // uid是唯一表示，
    // url就是生成的base64链接，直接用img引入即可，
    // uploadData就是这个图片的文件流，后面做确认上传的时候是有用的
    const tmp = {
      uid: uploadData.file.uid,
      url: result,
      uploadData: uploadData
    }
    // 这里是预览图片的数据，previewArr是Vue3中ref定义的响应式数据，
    previewArr.value.push(tmp)
  }
  
  reader.readAsDataURL(uploadData.file);
}

// 上传校验，判断是不是图片
const beforeUpload = (file) => {
  // 限制上传的图片类型
  const types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
  const isImage = types.includes(file.type);
  const isLtSize = file.size / 1024 / 1024 < 5;
  if (!isImage) {
    ElMessage({
      message: '只能上傳圖片類型',
      type: 'warning',
    })        
    return false;
  }
  if (!isLtSize) {
    ElMessage({
      message: '上传图片大小不能超过 5MB!',
      type: 'warning',
    })       
    return false;
  }
  return true;
}

// 超出校验
const exceed = () => {
  ElMessage({
    message: '最多只能上傳5張圖片',
    type: 'warning',
  })     
}

AliveSeven

一个有趣的博客

文章

标签

分类

AliveSevenの博客