vue将前端的json文件上传到后台对应目录

发布时间 2023-11-09 14:02:06作者: Xproer-松鼠

前端方法代码:

/**
*
* @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%e5%b0%86%e5%89%8d%e7%ab%af%e7%9a%84json%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%88%b0%e5%90%8e%e5%8f%b0%e5%af%b9%e5%ba%94%e7%9b%ae%e5%bd%95/

欢迎入群一起讨论