前端压缩文件上传 后端解压文件 代码示例
时间: 2024-11-30 13:14:49 浏览: 26
前端压缩文件上传和后端解压文件是一个常见的处理大文件上传流程的步骤。前端通常会使用JavaScript库如`FormData`配合`fetch` API 或 `axios` 来发送文件,同时对文件进行压缩,比如使用`zlib`库来进行gzip压缩:
```javascript
// 假设有个fileInput的HTML输入元素用于选择文件
const fileInput = document.getElementById('fileInput');
let reader;
reader.onloadend = function() {
const file = reader.result;
// 使用FileReader读取文件内容
const compressedData = compress(file); // 假设compress函数来自第三方库,如node-zip或jszip
// 创建FormData并将压缩后的数据添加
const formData = new FormData();
formData.append('file', compressedData);
// 发送请求
fetch('/api/upload', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));
};
reader.readAsArrayBuffer(fileInput.files[0]);
```
后端,例如Node.js中,可以使用相应的库来解压并处理文件,例如`zlib`库或者`tar`、`unzipper`等专门的解压库:
```javascript
const fs = require('fs');
const zlib = require('zlib');
app.post('/api/upload', (req, res) => {
const { file } = req.body;
// 解析压缩数据
zlib.unzip(file, (err, buffer) => {
if (err) {
return res.status(500).send(err.message);
}
// 真实的文件数据现在在buffer中
const filePath = '/path/to/save/file'; // 根据实际需求设置保存路径
try {
fs.writeFileSync(filePath, buffer);
res.send({ message: '文件已成功解压并保存' });
} catch (saveError) {
res.status(500).send(saveError.message);
}
});
});
```
阅读全文