node.js - Angular 6 和 Node Js AWS S3 文件上传进度条
问题描述
通过 Angular 6(前端)和 NodeJs(后端)将文件上传到 asw-s3 存储桶时,我正在尝试创建一个进度条。如何获取进度(或已上传的字节)并在 Angular 6 前端实时接收它们?
解决方案
不确定 Angular 是否有特定的方法,但这是我在一些基于 Angular 的网站中使用的工作示例:
sendFile(file) {
let formData: FormData = new FormData();
formData.append('my_file', file);
let xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (progEvent: ProgressEvent) {
if (progEvent.lengthComputable) {
var uploadedSoFar = (progEvent.loaded / progEvent.total) * 100;
console.log("Uploaded: " + uploadedSoFar + "% ")
if (progEvent.loaded == progEvent.total){
// uploaded up to 100%
}
}
};
xhr.open("POST", `/your_site`, true);
xhr.send(formData);
}
对正在发生的事情的一些解释:
表单数据
FormData 接口提供了一种方法来轻松构造一组表示表单字段及其值的键/值对,然后可以使用 XMLHttpRequest.send() 方法轻松发送。如果编码类型设置为“multipart/form-data”,它使用与表单相同的格式
https://developer.mozilla.org/en-US/docs/Web/API/FormData
XMLHttpRequest
使用 XMLHttpRequest (XHR) 对象与服务器交互。您可以从 URL 检索数据,而无需刷新整个页面。这使得网页可以只更新页面的一部分,而不会中断用户正在做的事情。
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
节点端 我正在更新这篇文章以添加一个节点代码示例(在评论之后)。我在 node.js 中没有那么好,所以我下面的代码不是一个很好的例子。
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
// Remove this, I use it for this example to be easy to reproduce
res.setHeader('X-Frame-Options', 'ALLOWALL');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
if (req.method == 'POST') {
console.log("Receiving file");
var body = '';
req.on('data', function (data) {
body += data;
console.log("receiving data : " + body);
});
req.on('end', function () {
console.log("received all the data: " + body);
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Reception completed');
}
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
如果您在 node.js 中收到数据,这意味着您的前端工作正常。
推荐阅读
- javascript - HighcharteR 使用 hideDelay 打开多个工具提示
- c# - Gridview 分页复选框未正确分配
- git - 合并或重新调整分支上的拉取请求?
- java - 如何在arraylist中删除字符串的字符
? - c++ - 返回时复制操作是在 lock_guard 析构函数之前还是之后执行的?
- sql - 从 BigQuery 导出自定义维度
- sql - 在 Amazon Redshift 中使用 max() 或 min() 条件查询优化选择
- c# - Selenium xpath 断言
- javascript - 为什么我在 ES6 中的 Javascript 导入不起作用?意外的标记 *
- java - 在 Spring Boot 中上传时读取 CSV 文件