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

我会尽力描述我的问题。 基本上，我正在构建一个论坛webapp。最近，我开始尝试实现这样的功能：当用户注册时，他/她可以从本地文件系统中选择照片。然后，当用户注册时，应通过客户端JS中的

FileReader

API读取图像文件，将文件输入值设置为图像URL，然后提交表单。 现在，我不想直接将文件上传到单独的图像中。我只是想在数据库中保存数据URL。许多人建议使用Multer进行文件上传，但不幸的是，我很久以前就已经部署了，并且已经在GH存储库中编程了一些更改，因此安装npm软件包不是一个选项。 不起作用的地方：该值没有改变，上传的URL只是图像文件的名称（例如shark.jfif）。 我在网上查过了，但什么也没找到。这是我的客户端JS代码，以防你想知道

const file=document.querySelector（'input[type=“file”]”）。文件[0]；
const fReader=new FileReader（）；
const imgName=fReader.readAsDataURL（文件）；
document.querySelector（'input[type=“file”]”）。value=imgName.result；

---

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

几年前，我实际上做了一件非常类似的事情，并将其变成了一个小小的JavaScript“库”：。这有更多的功能，因为它允许你在上传到任何地方之前裁剪图像，所以它实际上是：文件输入->画布->img。然而，在这里，我们将剪切画布步骤

其背后的思想是从FileReader获取数据URL，加载时，将其设置为

img

标记的

src

属性：

const img=document.getElementById（'img'）；
document.getElementById（'fileInput'）。addEventListener（“更改”，e=>{
const file=e.target.files[0]；
const reader=new FileReader（）；
//将图像作为base64数据读取
reader.readAsDataURL（文件）；
//加载时，使用文件数据
reader.onload=（e）=>img.setAttribute（'src'，e.target.result）；
});

谢谢您的回答，如果我只想暂时在页面上显示图像，但我想将URL存储在数据库中，那么这就行了。这个想法在理论上可以进一步扩展。@expressjs123当你说存储URL时，是指图像的HTTP URL，还是生成的数据URL？注意
reader.onload
行，它是加载映像时的事件侦听器。哦，等等，我发现控制台抛出错误的问题了error@expressjs123当时，该脚本是PHP页面的一部分，然后将图像保存到服务器上的磁盘上，然后将该图像的路径上载到数据库，以防有帮助。（如果我没记错的话。）