如何通过 NodeJS 将文件上传到 S3 并在浏览器中跟踪进度?
How to upload a file to S3 via NodeJS and track progress in the browser?
当涉及到文件管理和 NodeJS 之外的内容时,我在思考几个概念时遇到了一些麻烦,想知道是否有人可以指出正确的方向。
我有一个上传队列列表,将根据用户需要同时发生(允许他们随意暂停或删除下载),我需要进程访问节点服务器以调整图像大小或操作视频如所须。从这里开始,我需要 Node 使用 AWS-SDK(我设置了一个 fakeS3 服务器用于一般沙盒测试)通过 S3 上传视频或图像,并且在上传时我需要在浏览器中跟踪上传的进度。
我在 Node 中使用 React 和服务器端渲染,所以我认为必须有一种非常简单的方法来处理这种情况,但我找不到以前这样做过的人。这是我搞砸的几个概念:
Server.js(核心输入)
server.use(express.static(path.join(__dirname, 'public')));
server.use(multer({
dest: './public/temp',
limits: {
fieldNameSize: 50,
files: 1,
fields: 5,
fileSize: 1024 * 1024
},
rename: (fieldname, filename) => {
return filename;
},
onFileUploadStart: (file) => {
console.log('Starting file upload process.');
},
inMemory: true
}));
server.use(cookieParser());
server.use(bodyParser.urlencoded({ extended: true }));
server.use(bodyParser.json());
中间路线(/上传或其他)
export function uploadContent(req, res) {
const config = {
s3ForcePathStyle: true,
accessKeyId: 'ACCESS_KEY_ID',
secretAccessKey: 'SECRET_ACCESS_KEY',
endpoint: new AWS.Endpoint('http://localhost:4567'), // TODO make live
};
const client = new AWS.S3(config);
const params = {
Key: 'Key',
Bucket: 'Bucket',
Body: fs.createReadStream(req.body.files[0])
};
client.upload(params, function uploadCallback (err, data) {
console.log(err, data);
});
}
这行不通,因为正文解析器与路由冲突,multer 也有时间(我对其他建议持开放态度)任何关于如何实现这一点的信息都会很棒。我不是在寻找完整的代码,只是让我走上正确道路的另一个想法。感谢您的帮助!
您可以在浏览器和 Nodejs 路由之间使用套接字通道,并发出事件开始、结束和进度,并使用 httpUploadProgress 事件:
var s3obj = new AWS.S3({params: {Bucket: 'myBucket', Key: 'myKey'}});
s3obj.upload({Body: body}).
on('httpUploadProgress', function(evt) {
console.log(evt);
//Emit Here your events
}).
send(function(err, data) { console.log(err, data) });
当涉及到文件管理和 NodeJS 之外的内容时,我在思考几个概念时遇到了一些麻烦,想知道是否有人可以指出正确的方向。
我有一个上传队列列表,将根据用户需要同时发生(允许他们随意暂停或删除下载),我需要进程访问节点服务器以调整图像大小或操作视频如所须。从这里开始,我需要 Node 使用 AWS-SDK(我设置了一个 fakeS3 服务器用于一般沙盒测试)通过 S3 上传视频或图像,并且在上传时我需要在浏览器中跟踪上传的进度。
我在 Node 中使用 React 和服务器端渲染,所以我认为必须有一种非常简单的方法来处理这种情况,但我找不到以前这样做过的人。这是我搞砸的几个概念:
Server.js(核心输入)
server.use(express.static(path.join(__dirname, 'public')));
server.use(multer({
dest: './public/temp',
limits: {
fieldNameSize: 50,
files: 1,
fields: 5,
fileSize: 1024 * 1024
},
rename: (fieldname, filename) => {
return filename;
},
onFileUploadStart: (file) => {
console.log('Starting file upload process.');
},
inMemory: true
}));
server.use(cookieParser());
server.use(bodyParser.urlencoded({ extended: true }));
server.use(bodyParser.json());
中间路线(/上传或其他)
export function uploadContent(req, res) {
const config = {
s3ForcePathStyle: true,
accessKeyId: 'ACCESS_KEY_ID',
secretAccessKey: 'SECRET_ACCESS_KEY',
endpoint: new AWS.Endpoint('http://localhost:4567'), // TODO make live
};
const client = new AWS.S3(config);
const params = {
Key: 'Key',
Bucket: 'Bucket',
Body: fs.createReadStream(req.body.files[0])
};
client.upload(params, function uploadCallback (err, data) {
console.log(err, data);
});
}
这行不通,因为正文解析器与路由冲突,multer 也有时间(我对其他建议持开放态度)任何关于如何实现这一点的信息都会很棒。我不是在寻找完整的代码,只是让我走上正确道路的另一个想法。感谢您的帮助!
您可以在浏览器和 Nodejs 路由之间使用套接字通道,并发出事件开始、结束和进度,并使用 httpUploadProgress 事件:
var s3obj = new AWS.S3({params: {Bucket: 'myBucket', Key: 'myKey'}});
s3obj.upload({Body: body}).
on('httpUploadProgress', function(evt) {
console.log(evt);
//Emit Here your events
}).
send(function(err, data) { console.log(err, data) });