如何使用纯 js 和 FileReader 创建文件上传 API

Question

我会尽力描述我的问题。基本上，我正在构建一个论坛网络应用程序。最近我开始尝试实现这样的功能，当用户注册时，他/她可以从他/她的本地文件系统中选择一张照片。然后，当用户注册时，客户端JS中要通过FileReader API读取图片文件，将文件输入的值设置为图片URL，然后提交表格。现在，我不想直接将文件上传到单独的图像中。我只是想将数据 URL 保存到我的数据库中。许多人建议使用 Multer 进行文件上传，但不幸的是，我很久以前就已经部署并在 GH 存储库中编写了一些更改，所以安装 npm 包不是一个选项. 什么不起作用：值没有改变，上传的 URL 只是图像文件的名称（例如 shark.jfif）。我在网上看过，但一无所获。如果您想知道，这是我的客户端 JS 代码。

const file = document.querySelector('input[type="file"]').files[0];
const fReader = new FileReader();
const imgName = fReader.readAsDataURL(file);
document.querySelector('input[type="file"]').value = imgName.result;

理想情况下，我会使用事件侦听器来检查输入文件的值何时更改，但我不确定哪种事件是理想的。绝对不要提交，因为这段代码需要一段时间才能执行，并且文件名已经保存到数据库中。该值不会随着我当前的代码而改变。

Answer 1

几年前我确实做过类似的事情，把它变成了一个小小的JavaScript'library':cropper.js。这有更多的功能，因为它允许您在将图像上传到任何地方之前裁剪图像，所以它实际上是：文件输入 -> canvas -> img。但是，在这里，我们将删除 canvas 步骤。

其背后的想法是从 FileReader 获取数据 URL，并在加载时将其设置为 img 标签的 src 属性：

const img = document.getElementById('img');
document.getElementById('fileInput').addEventListener("change", e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  // Read the image as base64 data
  reader.readAsDataURL(file);
  // When loaded, use the file data
  reader.onload = (e) => img.setAttribute('src', e.target.result);
});

<input type="file" id="fileInput" />
<img id="img" src="" />

如何使用纯 js 和 FileReader 创建文件上传 API

How to create file upload with pure js and the FileReader API

javascript

forms

file

filereader