首页 > 其他分享 >vue将前端的json文件上传到后台对应目录

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

时间:2023-11-09 14:13:14浏览次数:27  
标签:vue e5% savePath json file 后台 new data

前端方法代码:

/**
*
* @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/

欢迎入群一起讨论

 

 

标签:vue,e5%,savePath,json,file,后台,new,data
From: https://www.cnblogs.com/songsu/p/17819604.html

相关文章

  • 多标签vuex
    vuex只有在第一次打开页面或页面刷新时会初始化,不受页面生命周期影响。在vue打开多标签页面共享vuex时,多个页面vuex单独不受影响,所以如果某个页签修改了vuex的值,其他页签并不会同步修改。多页签同步vuex的思路:监听页签选中状态,选中时判断当前vuex同步值与本地存储值,不相同调用mu......
  • vue 需要的loader
    vue-loadervue-loader是一个加载器,它能够将.vue文件转换为JavaScript模块。因为.vue文件可以包含template、style和script三种类型的代码,vue-loader需要将它们分别处理。然后将它们组合在一起,生成一个JavaScript模块。在Vue项目中,vue-loader扮演着非常重要的角色,因为.vue文件是V......
  • vue2,vue3的优缺点
    vue2:优点:vue2比较成熟,所以具有比较完善的第三方的插件和库的支持,和技术资源的支持和解决方案d的社区等缺点:对ts语法的支持有限vue2中difff算法遍历dom树的关系,优化程度较低vue3:优点:引入一些高级的api优化了diff算法,使得性能更好,包更小对ts的语法支持更好......
  • vue template的编译原理
    vuetemplate的编译原理就是vue框架底层对模板的编译过程,这个过程将最初的模板源码转换生成最终的语法抽象树(AST)具体步骤如下:模板编译器读入模板源码,将其词法分析成各个部分,这些部分包括html元素,vue指令,还有特殊属性等AST的gennerator组件将区分开的各个部分进行上下文解析,封......
  • uni-app vue3 获取元素报错问题
    关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明_前端_谁凉了时光旧了少年-华为云开发者联盟(csdn.net)......
  • vue2项目使用vueAMap
    npminstallvue-amap-D在main.jsimportVueAMapfrom"vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:"高德地图的key",//这里写你申请的高德地图的keyplugin:["AMap.Autocomplete","AMap.Geocoder","AMap.Geol......
  • 大屏展示技术栈:vue2+echarts+dataV
    1.大屏搭建使用的是dataV组件http://datav.jiaminghi.com/guide,使用dataV组件有如下注意点:a.修改配置项config中data的值,需要重新赋值configb.修改dataV某些内置样式,他有个固定的类2.登录界面动态背景,使用的是vanta.jsVanta.js-Animated3DBackgroundsForYourWebsite......
  • vue文件上传
    单文件上传前端部分:<template><br><a-fromlabel="上传文件"><a-inputtype="file"></a-input><a-button@click="upload"type="danger">上传</a-button></a-from></tem......
  • vue实现文件上传
    文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能。在此,将详细讲解Vue.js如何实现文件上传。首先,我们需要准备一个简单的html页面来接收上传文件。下面是示例代码:<divid="app"><inputtype="file"ref="fileInput"@chang......
  • vue2实现动态侧边导航栏
    router文件下index.js 来源http://blog.itpub.net/69978258/viewspace-2909200///index.tsimportVuefrom'vue';importVueRouterfrom'vue-router';importLoginfrom'@/views/login/index.vue';importLayoutfrom'@/layout/ind......