使用JavaScript实现多文件上传时如何跳过.pdf等非图片格式的裁剪步骤

核心逻辑 #

通过判断文件的后缀名/MIME类型，将需要裁剪的图片和其他格式文件分流，分别走裁剪上传流程和直传流程。

实现步骤 #

1. 封装格式判断工具函数 #

/**
 * 判断文件是否需要执行裁剪流程
 * @param {File} file 上传的文件对象
 * @returns {Boolean} 是否需要裁剪
 */
function isNeedCrop(file) {
  // 允许裁剪的文件后缀列表，统一转小写避免大小写兼容问题
  const allowCropExtensions = ['jpg', 'jpeg', 'png'];
  // 允许裁剪的MIME类型列表，补充校验防止后缀被篡改
  const allowCropMimes = ['image/jpeg', 'image/png'];
  
  const fileExtension = file.name.split('.').pop().toLowerCase();
  return allowCropExtensions.includes(fileExtension) || allowCropMimes.includes(file.type);
}

2. 编写主流程分支逻辑 #

// 监听文件选择控件的change事件
document.querySelector('#uploadInput').addEventListener('change', async (e) => {
  // 将FileList转为数组方便遍历
  const fileList = Array.from(e.target.files);
  
  for (const file of fileList) {
    if (isNeedCrop(file)) {
      // 匹配到需要裁剪的图片格式，走裁剪流程
      // cropImage为你自己封装的裁剪方法，需要返回裁剪完成后的File/Blob对象
      const croppedFile = await cropImage(file);
      // 裁剪完成后执行上传
      uploadFile(croppedFile);
    } else {
      // 非指定图片格式，直接执行上传
      uploadFile(file);
    }
  }
})

/**
 * 通用文件上传方法
 * @param {File|Blob} file 要上传的文件对象
 */
function uploadFile(file) {
  const formData = new FormData();
  formData.append('upload_file', file);
  // 此处替换为你实际的上传接口调用逻辑
  // fetch('/api/upload', {
  //   method: 'POST',
  //   body: formData
  // }).then(res => res.json()).then(console.log)
}

注意事项 #

• 裁剪方法要封装为返回Promise的异步函数，配合async/await使用，避免裁剪未完成就触发上传
• 同时校验后缀和MIME类型可以提高安全性，防止用户篡改文件后缀绕过业务规则
• 多文件批量上传场景如果需要控制并发数，可以额外添加并发队列逻辑限制同时上传的文件数量

内容的提问来源于stack exchange，提问作者teefal