Sails.js 文件上传 - 在上传实际完成之前销毁 req.body 和 .upload() 回调执行
Sails.js file upload - destroying req.body and .upload() callback executing before upload is actually complete
我正在使用 Sails 构建一个网站，其中一个页面包含一个表单。此表单有多个文本输入，以及一个供用户上传图片的文件上传输入。来自所有文本输入的信息存储在 Postgres 数据库中，图像使用 sails 文档 here 中描述的 .upload() 函数上传，并转换为数据 uri，然后存储在同一个 Postgres 中数据库并用于在网站上显示图像。
文件输入是页面上倒数第三个输入，我注意到发生了两件事：
1) 在文件输入 之后 中的文本没有作为 req.body 的一部分传递到控制器，因为表单输入通常是这样。
2) 某些图像的数据库中没有存储数据 uri。
我创建了一个新的基本 sails 应用程序，其中包含一个允许您上传图像的表单，这里发生了完全相同的事情。
经过测试，我发现小图片效果很好，而大图片则不行。我使用的 'small' 图片是 66kb，而另一张 800kb 的图片产生了与上述相同的效果。
新的sails app，在.upload()函数的回调中，res.view是另一个简单显示上传图片的页面。对于 800kb 的图像和更大的图像，在呈现页面时，它显示的不是上传的图像，而是损坏的图像。在 chrome 开发控制台中，它给出了图像 link 的 404 错误，但是如果我在图像 url 的末尾添加一个查询（即让 chrome 认为它是一个不同的 url 所以重新加载相同的图像），图像显示正常。由此我猜测 .upload() 回调在图片实际上传完成之前被调用，当我重新加载图片时它已经完成上传。
我可以在请求中看到 headers 正在发送文件输入之后的输入，但是在控制器中执行 console.log(req.body) 只会注销表单中文件输入之前的输入.
我使用的是sails v0.11.0，我使用的代码如下：
HTML 表格 (index.ejs)
<h1>Image Upload Test</h1>
<form method="post" enctype="multipart/form-data" action="/submit">
<div>
<input type="text" name="firstInput">
</div>
<div>
<input type="file" name="image">
</div>
<div>
<input type="text" name="imageUploaded" value="false">
</div>
<div>
<input type="hidden" name="test" value="hello!">
</div>
<button type="submit">Upload</button>
<script type="text/javascript">
$('input:file').change(function() {
$('input[name=imageUploaded]').val('true')
});
</script>
</form>
config/routes.js
module.exports.routes = {
'/': 'ImageController.show',
'/submit': 'ImageController.create'
控制器（ImageController.js）
module.exports = {
show: function(req, res) {
res.view('index.ejs');
},
create: function(req, res) {
var fileName = 'image' + Date.now() + '.jpg';
req.file('image')
.upload({saveAs: __dirname + '/../../assets/images/' + fileName}, function(err, uploadedFiles) {
if (err) return res.serverError(err);
console.log('file uploaded');
console.log();
console.log(req.body);
res.view('uploadedImage', {fileName: fileName});
});
}
};
显示上传图片的页面(uploadedImage.ejs)
<%if (typeof(fileName) !== 'undefined') {%>
<a href="/">
<img src="/images/<%=fileName%>" style="width:100%; height:100%;">
</a>
<%}%>
任何人都可以解释为什么会发生这种情况并帮助我解决它吗？
谢谢
根据 sails 文件上传文档，所有文本字段都必须在文件字段之前上传，否则它们不会传递给操作。
Sails 文档 File Upload sails
我正在使用 Sails 构建一个网站，其中一个页面包含一个表单。此表单有多个文本输入，以及一个供用户上传图片的文件上传输入。来自所有文本输入的信息存储在 Postgres 数据库中，图像使用 sails 文档 here 中描述的 .upload() 函数上传，并转换为数据 uri，然后存储在同一个 Postgres 中数据库并用于在网站上显示图像。
文件输入是页面上倒数第三个输入，我注意到发生了两件事：
1) 在文件输入 之后 中的文本没有作为 req.body 的一部分传递到控制器，因为表单输入通常是这样。
2) 某些图像的数据库中没有存储数据 uri。
我创建了一个新的基本 sails 应用程序，其中包含一个允许您上传图像的表单，这里发生了完全相同的事情。
经过测试，我发现小图片效果很好，而大图片则不行。我使用的 'small' 图片是 66kb，而另一张 800kb 的图片产生了与上述相同的效果。
新的sails app，在.upload()函数的回调中，res.view是另一个简单显示上传图片的页面。对于 800kb 的图像和更大的图像，在呈现页面时，它显示的不是上传的图像，而是损坏的图像。在 chrome 开发控制台中，它给出了图像 link 的 404 错误，但是如果我在图像 url 的末尾添加一个查询（即让 chrome 认为它是一个不同的 url 所以重新加载相同的图像），图像显示正常。由此我猜测 .upload() 回调在图片实际上传完成之前被调用，当我重新加载图片时它已经完成上传。
我可以在请求中看到 headers 正在发送文件输入之后的输入，但是在控制器中执行 console.log(req.body) 只会注销表单中文件输入之前的输入.
我使用的是sails v0.11.0，我使用的代码如下：
HTML 表格 (index.ejs)
<h1>Image Upload Test</h1>
<form method="post" enctype="multipart/form-data" action="/submit">
<div>
<input type="text" name="firstInput">
</div>
<div>
<input type="file" name="image">
</div>
<div>
<input type="text" name="imageUploaded" value="false">
</div>
<div>
<input type="hidden" name="test" value="hello!">
</div>
<button type="submit">Upload</button>
<script type="text/javascript">
$('input:file').change(function() {
$('input[name=imageUploaded]').val('true')
});
</script>
</form>
config/routes.js
module.exports.routes = {
'/': 'ImageController.show',
'/submit': 'ImageController.create'
控制器（ImageController.js）
module.exports = {
show: function(req, res) {
res.view('index.ejs');
},
create: function(req, res) {
var fileName = 'image' + Date.now() + '.jpg';
req.file('image')
.upload({saveAs: __dirname + '/../../assets/images/' + fileName}, function(err, uploadedFiles) {
if (err) return res.serverError(err);
console.log('file uploaded');
console.log();
console.log(req.body);
res.view('uploadedImage', {fileName: fileName});
});
}
};
显示上传图片的页面(uploadedImage.ejs)
<%if (typeof(fileName) !== 'undefined') {%>
<a href="/">
<img src="/images/<%=fileName%>" style="width:100%; height:100%;">
</a>
<%}%>
任何人都可以解释为什么会发生这种情况并帮助我解决它吗？
谢谢
根据 sails 文件上传文档，所有文本字段都必须在文件字段之前上传，否则它们不会传递给操作。 Sails 文档 File Upload sails