文件处理 vue3+ts

---

前言

需求：需要用户点击上传文件，并对上传的文件进行筛选判断

例如：需要分别判断是视频文件，或音频文件；并需要对文件的大小或文件的显示名称接收；

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、界面设置

• 通常上传文件的按钮都不是直接在input上；
• 但是在vue3里 可以通过ref绑定input框；
• 当用户点击上传按钮时，通过input绑定的ref模拟点击input;
• 当input改变时，可以获取到上传的文件数据；

    <div class="module-item-text">
      <div class="text">
        <span class="text-name">{{ fileName }} </span>
      </div>
      <div class="size">{{ fileSize ? fileSize + 'MB' : '' }}</div>
    </div>
    //点击上传按钮-按钮最初被隐藏
    <img @click="submitMusicUpload" class="increase-img" src="@/assets/face/increase.png" alt=""
      v-show="!delImg">
    <img @click="delUpload" class="increase-img" src="@/assets/face/del.png" alt="" v-show="delImg">
    //在点击按钮的时候 通过ref绑定input 进行上传 可以获取到文件的上传数据
    <input type="file" ref="soundFileInput" @change="getFile" v-show="false" accept=".mp3,.wav">

模拟点击实现

const submitUpload = () => {
  fileInput.value.click();
}

二、文件处理

1.封装方法-验证文件类型

视频验证：大小，类型

// 视频文件验证
function checkVideoFile(file: File, fileType: number) {
  const type = file.name.substring(fileType).toLowerCase();
  console.log('获取到的文件类型', type)
  let msg = '';
  if (type !== '.mp4' && type !== '.mov' && type !== '.avi') {
    console.log('文件类型识别失败', type);
    msg = "未正确上传模型及文件，支持视频文件类型有mp4、mov、avi";
    return { type: false, msg: msg };
  }
  // 判断文件大小
  const MAX_SIZE = 120 * 1024 * 1024;
  console.log('获取到的文件数据', file, file.size / 1024 / 1024);

  if (file.size > MAX_SIZE) {
    msg = "视频文件(mp4、mov、avi)大小不超过120MB";
    return { type: false, msg: msg };
  }
}

音频文件验证：大小，类型

function checkAudioFile(file: File, fileType: number) {
  const type = file.name.substring(fileType + 1).toUpperCase();
  let msg = '';
  if (type !== 'MP3' && type !== 'WAV') {
    console.log('文件类型识别失败', type);
    msg = '未正确上传模型及文件，音频文件mp3、wav，请重新选择后再试';
    return { type: false, msg: msg };
  }
  // 判断文件大小
  const MAX_SIZE = 100 * 1024 * 1024;
  if (file.size > MAX_SIZE) {
    msg = "音频文件(mp3、wav)不超过100MB";
    return { type: false, msg: msg };
  }
}

2.获取文件

文件获取方法

function getFile(e: any) {
    const file = e.target.files[0];
    //区分获取到的文件类型
    const typeCheck = file.type;
    //获取到的文件后缀名
    const fileType = file.name.lastIndexOf(".");
    if (fileType === -1) {
      const msg = "未正确上传模型及文件，支持视频文件类型有mp4、mov、avi";
      return { type: false, msg: msg };
    }
	//如果是视频文件，
    if (typeCheck.includes('video')) {
      checkVideoFile(file, fileType);
    }
    //如果是音频文件，
    if (typeCheck.includes('audio')) {
      checkAudioFile(file, fileType);
    }
    fileName.value = file.name;
    //toFixed(2) 精确到小数点后两位
    fileSize.value = (file.size / 1024 / 1024).toFixed(2);
    //切割获取的文件名 只要前两位和后两位
    fileName.value = filenameEllipsis(file.name, fileType);
    return { type: true, file: file };
  }

3. 切割文件名称方法

function filenameEllipsis(filename: string, length: number) {
    if (filename.length < 15) {
      return filename;
    }
    // 处理文件省略显示 切割前面三位 和后面三位
    const filenameH = filename.substring(0, 3);
    const filenameF = filename.substring(length - 3);
    return filenameH + '...' + filenameF;
  }

---