javascript - Express 的简单异步图像上传？

Question

我使用单击按钮来触发文件输入对话框。选择文件后，我将在预览中显示缩略图。

const uploadListener = function() {
  const preview = document.getElementById('preview')
  const uploadBlob = window.URL.createObjectURL(this.files[0])
  preview.style.backgroundImage = `url(${ uploadBlob })`;
}

const fileUploader = document.getElementById('fileUpload')
fileUploader.addEventListener('change', uploadListener)

从这里开始，将 uploadBlob 处的文件异步发送(通过 XMLHttpRequest()？)到我的 node.js Express 服务器并保存到服务器的最简单方法是什么？

我过去用base64编码的FileReader()写出了这个，你必须过滤掉元数据，然后解码为二进制文件并找出服务器上的名称+扩展名，但速度很慢而且看起来有点晦涩难懂。

Answer 1

将变量命名为 uploadBlob 会产生误导，因为它不再是 blob。它是一个 url，您不会将其发送到服务器。

基本上，将 blob/文件附加到 FormData ，然后在您的ajax请求中发送formdata

const fd = new FormData()
fd.append('avatar', this.files[0])
// fd.append('avatar', this.files[0], optionalFileName)

fetch(uploadUrl, {method: 'post', body: fd})

/* 
or using XMLHttpRequest:

var xhr = new XMLHttpRequest
xhr.open('POST', uploadURL)
xhr.send(fd)
*/