vue element-plus上传文件前读取上传的文件

最新推荐文章于 2024-09-25 20:00:08 发布

LnewNull

最新推荐文章于 2024-09-25 20:00:08 发布

阅读量1.1k

点赞数 4

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_43074143/article/details/137432102

版权

      <el-form-item label="头像">
        <div>
          <el-image class="avatar" :src="form.headImg" :preview-src-list="[form.headImg]"></el-image>
        </div>
        <el-upload ref="upload" :action="UploadHttp" class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>

import type { UploadProps } from 'element-plus'
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const fileSize = rawFile.size;
  if (fileSize / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过 2MB!');
    return false
  }
  return new Promise((resolve, reject) => { // 返回一个 Promise  
    const reader = new FileReader();  
    reader.readAsArrayBuffer(rawFile);  
    reader.onload = async (e) => {  
      try {  
        const content = new Uint8Array(e.target.result);  
        const hash = CryptoJS.SHA256(CryptoJS.lib.WordArray.create(content)).toString();  
        const { data } = await axios.get(`${api.http}/api/Uploader/FileExists?fileSize=${fileSize}&sha256Hash=${hash}`);  
        if (data.data.isExists) {
          // 如果文件已存在，则不继续上传
          if(form.headImg !== data.data.url){
            form.headImg = data.data.url;
          }
          resolve(false); // 解析 Promise 为 false  
        } else {  
          // 如果文件不存在，则继续上传  
          resolve(true); // 解析 Promise 为 true  
        }  
      } catch (error) {  
        // 如果发生错误，则拒绝 Promise  
        reject(false);  
      }  
    };  
    reader.onerror = (error) => {  
      // 如果读取文件时发生错误，则拒绝 Promise  
      reject(false);  
    };  
  }); 
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(uploadFile);
  form.headImg = URL.createObjectURL(uploadFile.raw!)
}