beforeupload介绍

在进行文件上传的过程中，我们经常需要在上传前进行一些处理，例如验证文件类型、大小、尺寸等信息。而beforeupload就是一个在文件上传前的钩子函数，我们可以在beforeupload里面进行一系列的操作，例如添加一个异步请求、对文件名进行修改等。本文将从多个方面对beforeupload进行详细的阐述，希望能够帮助大家更好地使用beforeupload。

一、beforeupload参数

beforeupload是在文件上传之前触发的钩子函数，我们可以通过beforeupload的参数来获取上传的文件信息。beforeupload的参数如下：

/**
 * 上传文件之前的钩子函数
 * @param {File} file 当前上传的文件
 * @param {Array} fileList 已选中的文件列表
 * @param {function} callback 回调函数，用于告诉beforeupload是否要中断上传
 * @param {Object} options 配置项
 */
function beforeUpload(file, fileList, callback, options) {}

其中，file表示当前上传的文件；fileList表示已选中的文件列表；callback是回调函数，我们可以在里面调用callback(false)来中断上传；options是我们在使用beforeupload时传入的配置项。

通常情况下，我们最常用的是file这个参数，我们可以在里面获取到上传文件的信息，例如文件名、大小、类型等。下面是一个例子。

function beforeUpload(file, fileList, callback, options) {
  console.log('当前上传的文件为：', file.name)
}

二、beforeupload限制图片尺寸

在进行图片上传的时候，我们经常需要对图片进行尺寸的限制，以避免一些不必要的问题，例如图片过大等。我们可以在beforeupload里面进行图片的尺寸检查，并且在检查不通过的时候中断上传。下面是一个例子：

function beforeUpload(file, fileList, callback, options) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  const img = new Image();
  let valid = true;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    img.src = e.target.result;
  }
  img.onload = function () {
    if (!isJPG) {
      callback(false);
      alert('请上传jpg格式的图片！');
      valid = false;
    } else if (!isLt2M) {
      callback(false);
      alert('图片大小不能超过2MB！');
      valid = false;
    } else if (img.width  3000 || img.height  3000) {
      callback(false);
      alert('图片尺寸不符合要求，请上传500*500到3000*3000的图片！');
      valid = false;
    }
    if (valid) {
      callback(true);
    }
  }
}

在上面的代码中，我们首先判断图片的类型和大小是否符合要求，接着创建一个Image对象，用来获取图片的宽高信息。当图片信息获取完成后，我们再根据图片的尺寸来进行判断，如果尺寸不符合要求，则调用callback(false)来中断上传，否则调用callback(true)来继续上传。

三、beforeupload里面加异步请求

有时候，在进行文件上传的时候，我们需要把一些上传后的信息上传到后台数据库，或者将上传的文件传给某个接口进行分析处理。此时，我们可以在beforeupload里面增加一个异步请求，来实现这个功能。下面是一个例子：

function beforeUpload(file, fileList, callback, options) {
  const formData = new FormData();
  formData.append('file', file);
  axios.post('http://localhost:3000/upload', formData).then((res) => {
    console.log('上传成功！');
    callback(true);
  }).catch((err) => {
    console.log('上传失败！');
    callback(false);
  })
}

在上面的代码中，我们使用了axios这个库来进行异步请求。我们将上传的文件通过FormData的方式储存起来，再通过axios.post()方法将数据上传到服务器。当上传成功后，我们调用callback(true)来继续上传，否则调用callback(false)来中断上传。

四、beforeupload里面发请求

在某些情况下，在进行文件上传之前，我们需要根据一些参数，来向后台发出一些请求，以获取一些上传前所需的信息。下面是一个例子：

function beforeUpload(file, fileList, callback, options) {
  const url = 'http://localhost:3000/getUploadInfo';
  axios.get(url, {
    params: {
      filename: file.name,
      size: file.size,
      type: file.type
    }
  }).then((res) => {
    if (res.code === 0) {
      // 获取到后台信息并进行处理
      callback(true);
    } else {
      callback(false);
      alert('获取上传信息失败！');
    }
  }).catch((err) => {
    console.log('请求失败：', err);
    callback(false);
    alert('请求失败，请检查网络！');
  })
}

在上面的代码中，我们使用了axios这个库来进行异步请求。我们将需要上传的文件的信息通过get的方式传递给后台，以获取上传前所需的信息。当获取信息成功后，我们调用callback(true)来继续上传，否则调用callback(false)来中断上传。

五、beforeupload不支持老ie

需要注意的是，beforeupload这个函数只是在现代浏览器中支持的，在老的IE浏览器中是不支持的。这意味着，在开发过程中，我们需要根据不同的浏览器来选择不同的上传方式，以确保上传的正常进行。下面是一个例子：

  const ua = window.navigator.userAgent;
  if (/MSIE|Trident/.test(ua)) {
    // 使用IE上传方式
  } else {
    // 使用beforeupload上传方式
  }

在上面的代码中，我们可以通过window.navigator.userAgent来获取当前浏览器的用户代理字符串，判断当前是否为IE浏览器，进而选择不同的上传方式。

六、beforeupload修改文件名

有些时候，我们需要对上传的文件名进行一些修改，例如去掉一些特殊字符或加上一些前缀后缀等。在beforeupload中，我们可以很轻松地对文件名进行修改。下面是一个例子：

function beforeUpload(file, fileList, callback, options) {
  const newFilename = 'filename_' + new Date().getTime() + '_' + Math.random().toString(36).substr(2) + '.' + file.name.split('.').pop();
  file.name = newFilename;
  callback(true);
}

在上面的代码中，我们首先生成了一个新的文件名，例如：filename_1618529752764_wijgoktf.jpg，我们将这个新的文件名赋值给了file.name，这样，在文件上传的时候，上传的文件名就被修改了。最后调用callback(true)来继续上传。

七、beforeupload antd

在Ant Design的Upload组件中，也提供了beforeupload这个函数，我们可以使用它来进行上传前的处理。下面是一个例子：

  function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }

在Ant Design的Upload组件中，我们可以直接将beforeupload这个函数传递给beforeUpload参数即可。在这个函数中，我们进行了图片类型和大小的判断，如果不符合要求，则给出相应信息，并返回false，否则返回true来继续上传。

八、beforeunload不触发选取

需要注意的是，在beforeunload事件中，是无法触发文件选择的，因此，在进行文件上传的过程中，尽量不要使用beforeunload事件。而推荐使用beforeupload事件，通过beforeupload事件来进行上传前的处理。