RefDom.submit()弯道超车法：让你的文件上传更简便

2023-12-05 06:07:13

前言

在前端开发中，我们经常会遇到需要上传文件的情况，比如上传头像、上传文档等。通常情况下，我们可以使用<input type="file">元素来实现文件上传。当用户选择文件后，我们可以通过RefDom.submit()方法来提交表单，将文件上传到服务器。

但是，在某些情况下，我们可能需要手动触发文件上传，而不能使用RefDom.submit()方法。比如，当我们使用第三方库来实现文件上传时，或者当我们需要在特定时机触发文件上传时。

手动触发文件上传

为了手动触发文件上传，我们需要使用FileReader对象。FileReader对象允许我们读取文件的内容，并将文件内容转换为二进制数据。然后，我们可以使用XMLHttpRequest对象将二进制数据发送到服务器。

// 创建FileReader对象
const reader = new FileReader();

// 监听文件加载完成事件
reader.onload = function() {
  // 将二进制数据发送到服务器
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.send(reader.result);
};

// 选择文件后，读取文件内容
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  reader.readAsBinaryString(input.files[0]);
});

封装手动触发文件上传的方法

为了让手动触发文件上传更加简便，我们可以将上述代码封装成一个方法。

function uploadFile(file, url) {
  // 创建FileReader对象
  const reader = new FileReader();

  // 监听文件加载完成事件
  reader.onload = function() {
    // 将二进制数据发送到服务器
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.send(reader.result);
  };

  // 读取文件内容
  reader.readAsBinaryString(file);
}

调用封装好的方法

现在，我们可以使用封装好的uploadFile()方法来手动触发文件上传。

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  uploadFile(input.files[0], '/upload');
});