javascript - 在发送到后端之前访问“multipart/form-data”图像缓冲区
问题描述
我正在使用multipart/form-data
前端和multer
后端来处理我正在构建的网站上的图像上传。
我遇到了一个问题,我希望在提交表单之前将图像显示在屏幕上,但我无法做到,因为缓冲区在经过 multer 之后才生成(我认为)
这是传递给后端之前的 FormData 有效负载
lastModified: 1608334888059
lastModifiedDate: Fri Dec 18 2020 18:41:28 GMT-0500 (Eastern Standard Time) {}
name: "photomode_18122020_184125.png"
size: 4776395
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File
这是后端的 FormData 有效负载
buffer:Buffer(4776395) [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 10, 0, 0, 0, 4, 56, 8, 6, 0, 0, 0, 197, 66, 133, 69, 0, 0, 0, 19, 116, 69, 88, 116, 84, 105, 116, 108, 101, 0, 73, 109, 97, 103, 101, 83, 97, 118, 101, 114, 80, 78, 71, 215, 75, 83, 237, 0, 0, 0, 10, 116, 69, 88, 116, 85, 115, 101, 114, 68, 97, 116, 97, 0, 48, 56, 179, 7, 148, 0, 0, 32, 0, 73, 68, 65, 84, 120, 156, 76, 188, 89, 175, …]
encoding:'7bit'
fieldname:'files'
mimetype:'image/png'
originalname:'photomode_18122020_184125.png'
size:4776395
前端代码
... html ...
<form enctype="multipart/form-data">
<input type="file" :name="uploadFieldName" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length" accept="image/*" class="input-file">
</form>
... script tag now ...
formData.append("photo", fieldName);
for(let i =0; i < fileList.length; i++) {
formData.append("files", fileList[i]);
}
// API call for photo
// The form data at this point does not have the buffer for some reason :/
this.save(formData);
后端代码
import multer from "multer"
const upload = multer();
// This is where the buffer is available
app.post("/photo", upload.any(), function(req, res, next) { photoService.create(req, res) })
缓冲区从哪里来?在发送请求之前如何访问缓冲区,我想让我的用户在他们按下提交之前预览屏幕上的图像。
解决方案
您可以使用一个名为FileReader
this 的类将允许您在将图像上传到后端之前预览图像,这是一个示例
<div id="preview"></div>
<input type="file" id="uploader">
$("#uploader").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#preview").attr("src", e.target.result);
};
reader.readAsDataURL(this.files[0]);
}
});
推荐阅读
- python - 使用 Python (WIN32com) 在 Excel 中创建数据透视表切片器
- c# - 无法从空对象调用方法或检索属性。以下调用堆栈返回的对象为空
- airflow - Cloud Composer/Airflow Task Runner Storage
- swift - 如何在 swiftui 中显示来自网络的图像?
- erlang - Erlang - 主管不会重新启动工作进程
- python - 如何在 RandomForestClassifier 中选择 n_estimators?
- java - sudo ln -sfn 有什么作用?
- gremlin - Gremlin 查询不起作用 - 如果不存在,则为 2 x 顶点并添加边
- javascript - 如何使用 javascript 将数据上传到电子邮件
- javascript - 绑定数据时出现Angular Elements Web Component错误