前端方法代码:
/**
*
* @param {*} fileName 文件名
* @param {*} data 要保存的json对象
* @returns
*/
saveJsonFileToLocal(fileName, data) {
let file = new File([JSON.stringify(data)], `${fileName}.json`, {
type: "application/json",
});
let savePath = 要保存的路径地址;
let formdata = new FormData();
formdata.append("file", file);
formdata.append("savePath", savePath);
let requesUrl = "/jsonServiceApi/jsonSave";
return new Promise((resolve, reject) => {
axios({
method: "post",
url: requesUrl,
headers: {
"Content-Type": "multipart/form-data",
},
transformRequest: [
function(data, headers) {
// 去除post请求默认的Content-Type
delete headers.post["Content-Type"];
return data;
},
],
data: formdata,
})
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
}
后台代码(java):
@RestController
@CrossOrigin
@RequestMapping("JsonSaveService ")public class JsonSaveService {
@RequestMapping("/jsonSave")
public Object jsonSave() {
try {
ServletRequestAttributes context = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
Map<String, String[]> map = context.getRequest().getParameterMap();
String savePath = map.get("savePath")[0];
//如果没有目标目录,则创建
File fileDir = new File(savePath);
if (!fileDir.exists()) {
fileDir.mkdirs();
}
Part file = context.getRequest().getPart("file");
file.write(savePath + file.getSubmittedFileName());
} catch (Exception e) {
e.printStackTrace();
} return true;
}
}
参考文章:http://blog.ncmem.com/wordpress/2023/11/09/vue将前端的json文件上传到后台对应目录/