我正在使用 Sails 构建一个网站,其页面包含一个表单。此表单有多个文本输入,以及一个供用户上传图像的文件上传输入。来自所有文本输入的信息都存储在 Postgres 数据库中,并使用.upload()
sails 文档中描述的功能上传图像,并将其转换为数据 uri,然后将其存储在同一个 Postgres 数据库中并用于在地点。
文件输入是页面上倒数第三个输入,我注意到发生了两件事:
1)文件输入后的两个输入中的文本没有作为 的一部分传递给控制器req.body
,就像表单输入通常那样。
2) 某些图像的数据库中没有存储数据 uri。
我创建了一个新的基本风帆应用程序,其表单允许您上传图像,并且在这里发生完全相同的事情。
经过测试,我发现小图像可以正常工作,而大图像则不行。我使用的“小”图像为 66kb,而另一张 800kb 的图像产生了与上述相同的效果。
新的sails 应用程序,在.upload()
函数的回调中,res.view
是另一个页面,仅显示上传的图像。对于 800kb 和更大的图像,当页面被渲染时,它没有显示上传的图像,而是显示了一个损坏的图像。在 chrome 开发控制台中,它为图像链接提供了 404 错误,但如果我在图像 url 的末尾添加一个查询(即让 chrome 认为它是不同的 url,所以重新加载相同的图像),图像显示正常。由此我猜想.upload()
在图像实际完成上传之前调用回调,并且当我重新加载图像时它已经完成上传。
我可以在请求标头中看到正在发送文件输入之后的输入,但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>
配置/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>
<%}%>
谁能解释为什么会发生这种情况并帮助我解决它?
谢谢