javascript - Multer前端的自定义文件名
问题描述
我正在使用 FormData 上传文件并使用 Multer 在服务器端接收它。一切都按预期工作,除了因为我在前端使用 FileSystem API(https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry),我正在上传的文件来自子目录。Multer 似乎只看到文件名,即使我在将文件附加到表单数据时显式设置了别名(https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) . 似乎 Multer 在我的请求处理程序的其余部分之前执行其逻辑,并且看不到我在正文上设置的参数。如何让 multer 查看完整路径?
这是我当前设置的简化版本:
客户端(别名表示带路径的全名,file.name 是 FileSystem API 自动设置的基本名称):
function upload(file, alias) {
let url = window.location.origin + '/upload';
let xhr = new XMLHttpRequest();
let formData = new FormData();
xhr.open('POST', url, true);
return new Promise(function (resolve, reject) {
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
resolve(file.name);
}
else if (xhr.readyState == 4 && xhr.status != 200) {
reject(file.name);
}
})
formData.append('file', file, alias || file.name); // this should in theory replace filename, but doesn't
formData.append('alias', alias || file.name); // an extra field that I can't see in multer function at all
xhr.send(formData);
});
}
服务器:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
// neither req nor file seems to contain any hint of the alias here
cb(null, file.originalname);
}
});
const upload = multer({storage: storage});
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/upload', upload.single('file'), function (req, res, next) {
// by this time the file seems to already be on disk with whatever name multer picked
if (req.file) {
res.status(200).end();
} else {
res.status(500).end();
}
});
解决方案
为了使其正常工作,请preservePath
在配置时使用该选项multer
。以下将起作用:
const upload = multer({storage: storage, preservePath: true});
但是,需要注意的是,不会multer
创建目录或子目录。这些必须事先创建。(我也测试过。如果创建了目录并且为空,则上传成功,但是,如果目录不存在,则上传失败)。
在他们的自述文件中,他们说:“注意:当提供目标作为函数时,您负责创建目录。传递字符串时,multer 将确保为您创建目录。”
该注释的后续内容是:“您也负责创建任何子目录”。
上传文件的相对路径可以在originalname
属性中访问。所以,后端看起来像这样:(正如你所拥有的,但有更新的评论)
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
// If you uploaded for example, the directory: myDir/myFile.txt,
// file.originalname *would* be set to that (myDir/myFile.txt)
// and myFile.txt would get saved to uploads/myDir
// *provided that* uploads/myDir already exists.
// (if it doesn't upload will fail)
// /* if( [ uploads/myDir doesn't exist ] ) { mkdir } */
cb(null, file.originalname);
}
});
有用的提示:在前端,我发现使用以下方法测试目录/子目录上传更容易:(在 Chrome 上测试最新 ok)
<form action="/uploads/multipleFiles" method="post" enctype="multipart/form-data">
<input type="file" name="multiple" webkitdirectory accept="text/*" onchange="console.log(this.files)" />
<input type="text" name="tester" value="uploadTester" />
<input type="submit"/>
</form>
推荐阅读
- java - 休眠性能 GetterFieldImpl
- php - 正则表达式前 3 个字母以某种方式表示某事
- ios - 创建子 UIView 的 UIView 正在生成层次约束警告
- python - 编写 Python 脚本来自动化 llvm 代码覆盖率测试
- java - 使用 Kafka-Spark Streaming API 处理流数据时重复
- ios - 如何访问创建的目录?- NSCocoaErrorDomain 代码=257
- javascript - Javascript:数组不保留值
- xml - NetSuite 实时运费计算器调整请求
- deployment - 在 jboss 中部署应用程序时出现 ClassNotFoundException
- c# - 使用 lex.Match 而不是 lex.Autocomplete 时 Redis Lexicographicset 超时错误