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。它是一个网址，你不会把它发送到服务器。

基本上，将blob / file附加到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)
*/

Express的简单异步图片上传？

1 个答案: