上传文件到服务器通用代码

收藏

本帖最后由 Winny 于 2024-9-14 12:12 编辑

背景：SpreadJS作为前端控件，不会直接将文件或者文件中的部分数据保存到数据库中，只是提供获取当前文件或者文件中的部分数据的API，接下来需要采用前后端开发过程中常见的http请求形式，将目标数据传递给服务端，服务端再进行保存。

在SpreadJS中，以文件保存为例，提供了三种文件格式，分别是sjs、ssjson和xlsx文件格式。其中生成ssjson和xlsx调用的api为：

// 将spread导出为xlsx、ssjson、csv文件。
spread.export(function (blob) {
//这里blob即为生成的excel或ssjson文件blob
}, function (e) {
console.log(e);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});

复制代码

接下来我们来看一个前端上传文件的通用代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Excel File</title>
</head>
<body>
<h1>Upload Excel File</h1>
<input type="file" id="fileInput" accept=".xlsx">
<button onclick="uploadFile()">Upload</button>
<script>
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; //这里的file其实就是spread.export方法回调中的blob，可以使用new File([blob],"filename.xlsx")将blob转为file对象，也可以直接使用blob
if (!file) {
alert('Please select a file to upload.');
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert(data.message);
})
.catch(error => {
console.error('Error:', error);
alert('Upload failed.');
});
}
</script>
</body>
</html>

复制代码

不难发现，其实我们只需要将spread中export方法成功回调的对象传递给fetch请求携带的formData即可。同理sjs文件也是类似的，只不过spreadjs中生成sjs文件的形式与生成xlsx文件的方法略有不同。生成sjs文件的代码如下：

// 将spread保存为sjs文件。
spread.save(function (blob) {
//接下来将blob直接传递给fetch请求的formData即可。
}, function (e) {
console.log(e);
});

复制代码

发送完成后，接下来就是服务端存储了，对于文件，一般采用存储在文件服务器上，数据库直接存文件所在地址即可。我们以java+Spring Boot为例，一个通用的写文件方法如下：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.springframework.stereotype.Controller;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
@Controller
public class FileUploadController {
@PostMapping("/upload")
@ResponseBody
public String singleFileUpload(@RequestParam("file") MultipartFile file,
RedirectAttributes redirectAttributes) {
if (file.isEmpty()) {
return "{"message":"Please select a file to upload."}";
}
try {
// Get the file and save it somewhere
byte[] bytes = file.getBytes();
Path path = Paths.get("uploads/" + file.getOriginalFilename());
Files.write(path, bytes);
redirectAttributes.addFlashAttribute("message",
"You successfully uploaded '" + file.getOriginalFilename() + "'");
} catch (IOException e) {
e.printStackTrace();
return "{"message":"Upload failed."}";
}
return "{"message":"Upload successful."}";
}
}

复制代码

代码其实很简单，文件上传属于前后端常见交互请求，我们唯一要做的就是将SpreadJS生成的文件做好传递即可。

		自动登录	找回密码
密码			立即注册

上传文件到服务器通用代码

0 个回复