JS实现可恢复的文件上传示例详解
莫凡是莫烦 人气:0正文
使用 fetch 方法来上传文件相当容易。
连接断开后如何恢复上传？这里没有对此的内建选项，但是我们有实现它的一些方式。
对于大文件（如果我们可能需要恢复），可恢复的上传应该带有上传进度提示。由于 fetch 不允许跟踪上传进度，我们将会使用 XMLHttpRequest。
不太实用的进度事件
要恢复上传，我们需要知道在连接断开前已经上传了多少。
我们有 xhr.upload.onprogress 来跟踪上传进度。
不幸的是，它不会帮助我们在此处恢复上传，因为它会在数据 被发送 时触发，但是服务器是否接收到了？浏览器并不知道。
或许它是由本地网络代理缓冲的（buffered），或者可能是远程服务器进程刚刚终止而无法处理它们，亦或是它在中间丢失了，并没有到达服务器。
这就是为什么此事件仅适用于显示一个好看的进度条。
要恢复上传，我们需要 确切地 知道服务器接收的字节数。而且只有服务器能告诉我们，因此，我们将发出一个额外的请求。
算法
首先，创建一个文件 id，以唯一地标识我们要上传的文件：
let fileId = file.name + '-' + file.size + '-' + file.lastModified;
在恢复上传时需要用到它，以告诉服务器我们要恢复的内容。
如果名称，或大小，或最后一次修改时间发生了更改，则将有另一个 fileId。
向服务器发送一个请求，询问它已经有了多少字节，像这样：
let response = await fetch('status', {
headers: {
'X-File-Id': fileId
}
});
// 服务器已有的字节数
let startByte = +await response.text();
这假设服务器通过 X-File-Id header 跟踪文件上传。应该在服务端实现。
如果服务器上尚不存在该文件，则服务器响应应为 0。
然后，我们可以使用 Blob 和 slice 方法来发送从 startByte 开始的文件：
xhr.open("POST", "upload", true);
// 文件 id，以便服务器知道我们要恢复的是哪个文件
xhr.setRequestHeader('X-File-Id', fileId);
// 发送我们要从哪个字节开始恢复，因此服务器知道我们正在恢复
xhr.setRequestHeader('X-Start-Byte', startByte);
xhr.upload.onprogress = (e) => {
console.log(`Uploaded ${startByte + e.loaded} of ${startByte + e.total}`);
};
// 文件可以是来自 input.files[0]，或者另一个源
xhr.send(file.slice(startByte));
这里我们将文件 id 作为 X-File-Id 发送给服务器，所以服务器知道我们正在上传哪个文件，并且，我们还将起始字节作为 X-Start-Byte 发送给服务器，所以服务器知道我们不是重新上传它，而是恢复其上传。
服务器应该检查其记录，如果有一个上传的该文件，并且当前已上传的文件大小恰好是 X-Start-Byte，那么就将数据附加到该文件。
这是用 Node.js 写的包含客户端和服务端代码的示例。
在本网站上，它只有部分能工作，因为 Node.js 位于另一个服务 Nginx 后面，该服务器缓冲（buffer）上传的内容，当完全上传后才将其传递给 Node.js。
但是你可以下载这些代码，在本地运行以进行完整演示：
server.js
let http = require('http');
let static = require('node-static');
let fileServer = new static.Server('.');
let path = require('path');
let fs = require('fs');
let debug = require('debug')('example:resume-upload');
let uploads = Object.create(null);
function onUpload(req, res) {
let fileId = req.headers['x-file-id'];
let startByte = +req.headers['x-start-byte'];
if (!fileId) {
res.writeHead(400, "No file id");
res.end();
}
// 我们将“无处”保存文件
let filePath = '/dev/null';
// 可以改用真实路径，例如
// let filePath = path.join('/tmp', fileId);
debug("onUpload fileId: ", fileId);
// 初始化一个新上传
if (!uploads[fileId]) uploads[fileId] = {};
let upload = uploads[fileId];
debug("bytesReceived:" + upload.bytesReceived + " startByte:" + startByte)
let fileStream;
// 如果 startByte 为 0 或者没设置，创建一个新文件，否则检查大小并附加到现有的大小
if (!startByte) {
upload.bytesReceived = 0;
fileStream = fs.createWriteStream(filePath, {
flags: 'w'
});
debug("New file created: " + filePath);
} else {
// 我们也可以检查磁盘上的文件大小以确保
if (upload.bytesReceived != startByte) {
res.writeHead(400, "Wrong start byte");
res.end(upload.bytesReceived);
return;
}
// 附加到现有文件
fileStream = fs.createWriteStream(filePath, {
flags: 'a'
});
debug("File reopened: " + filePath);
}
req.on('data', function(data) {
debug("bytes received", upload.bytesReceived);
upload.bytesReceived += data.length;
});
// 将 request body 发送到文件
req.pipe(fileStream);
// 当请求完成，并且其所有数据都以写入完成
fileStream.on('close', function() {
if (upload.bytesReceived == req.headers['x-file-size']) {
debug("Upload finished");
delete uploads[fileId];
// 可以在这里对上传的文件进行其他操作
res.end("Success " + upload.bytesReceived);
} else {
// 连接断开，我们将未完成的文件保留在周围
debug("File unfinished, stopped at " + upload.bytesReceived);
res.end();
}
});
// 如果发生 I/O error —— 完成请求
fileStream.on('error', function(err) {
debug("fileStream error");
res.writeHead(500, "File error");
res.end();
});
}
function onStatus(req, res) {
let fileId = req.headers['x-file-id'];
let upload = uploads[fileId];
debug("onStatus fileId:", fileId, " upload:", upload);
if (!upload) {
res.end("0")
} else {
res.end(String(upload.bytesReceived));
}
}
function accept(req, res) {
if (req.url == '/status') {
onStatus(req, res);
} else if (req.url == '/upload' && req.method == 'POST') {
onUpload(req, res);
} else {
fileServer.serve(req, res);
}
}
// -----------------------------------
if (!module.parent) {
http.createServer(accept).listen(8080);
console.log('Server listening at port 8080');
} else {
exports.accept = accept;
}uploader.js
class Uploader {
constructor({file, onProgress}) {
this.file = file;
this.onProgress = onProgress;
// 创建唯一标识文件的 fileId
// 我们还可以添加用户会话标识符（如果有的话），以使其更具唯一性
this.fileId = file.name + '-' + file.size + '-' + file.lastModified;
}
async getUploadedBytes() {
let response = await fetch('status', {
headers: {
'X-File-Id': this.fileId
}
});
if (response.status != 200) {
throw new Error("Can't get uploaded bytes: " + response.statusText);
}
let text = await response.text();
return +text;
}
async upload() {
this.startByte = await this.getUploadedBytes();
let xhr = this.xhr = new XMLHttpRequest();
xhr.open("POST", "upload", true);
// 发送文件 id，以便服务器知道要恢复哪个文件
xhr.setRequestHeader('X-File-Id', this.fileId);
// 发送我们要从哪个字节开始恢复，因此服务器知道我们正在恢复
xhr.setRequestHeader('X-Start-Byte', this.startByte);
xhr.upload.onprogress = (e) => {
this.onProgress(this.startByte + e.loaded, this.startByte + e.total);
};
console.log("send the file, starting from", this.startByte);
xhr.send(this.file.slice(this.startByte));
// return
// true —— 如果上传成功，
// false —— 如果被中止
// 出现 error 时将其抛出
return await new Promise((resolve, reject) => {
xhr.onload = xhr.onerror = () => {
console.log("upload end status:" + xhr.status + " text:" + xhr.statusText);
if (xhr.status == 200) {
resolve(true);
} else {
reject(new Error("Upload failed: " + xhr.statusText));
}
};
// onabort 仅在 xhr.abort() 被调用时触发
xhr.onabort = () => resolve(false);
});
}
stop() {
if (this.xhr) {
this.xhr.abort();
}
}
}index.html
<!DOCTYPE HTML>
<script src="uploader.js"></script>
<form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
<input type="file" name="myfile">
<input type="submit" name="submit" value="Upload (Resumes automatically)">
</form>
<button onclick="uploader.stop()">Stop upload</button>
<div id="log">Progress indication</div>
<script>
function log(html) {
document.getElementById('log').innerHTML = html;
console.log(html);
}
function onProgress(loaded, total) {
log("progress " + loaded + ' / ' + total);
}
let uploader;
document.forms.upload.onsubmit = async function(e) {
e.preventDefault();
let file = this.elements.myfile.files[0];
if (!file) return;
uploader = new Uploader({file, onProgress});
try {
let uploaded = await uploader.upload();
if (uploaded) {
log('success');
} else {
log('stopped');
}
} catch(err) {
console.error(err);
log('error');
}
};
</script>结果
正如我们所看到的，现代网络方法在功能上已经与文件管理器非常接近 —— 控制 header，进度指示，发送文件片段等。
我们可以实现可恢复的上传等。
加载全部内容