Vue发送Formdata数据及NodeJS接收方式

2024-03-01 19:36:52

Vue发送Formdata数据

参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。

// 这里我使用的是cropperjs插件，裁剪图片成功执行此方法
 crop(blob) {
   const formData = new FormData();
   let uid = this.$store.getters.getUid;
   formData.append("croppedImg", blob);
   formData.append("id", uid);
   // 这里使用的是Axios请求
   this.$http
     .post("upload", formData)
     .then(res => {
       let data = res.data;
       if (data.code == 1) {
         let uploadAvatar = this.$store.getters.getUploadAvatar;
         this.$store.dispatch("onSaveUploadAvatar", uploadAvatar + 1);
         this.$Modal.success({
           title: "提示",
           content: data.msg
         });
       } else {
         this.$Modal.warning({
           title: "提示",
           content: data.msg
         });
       }
     })
     .catch(error => {
       console.log(error);
     });
 }

前端请求请求后，我们在浏览器的Network看是否有参数。

确保Network里有Form Data参数，如果是Query String Parameters参数或其它，则有可能不成功。

NodeJS后台接收

推荐使用multiparty模块接收参数。

multiparty文档地址

// 这里我配置了router，直接用app.post没有影响
router.post("/upload", (req, res) => {
  let obj = {};
  // 接收参数
  let form = new multiparty.Form();
  // 设置文件存储路径
  form.uploadDir = "./avatar";
  // 设置单文件大小设置
  form.maxFilesSize = 2 * 1024 * 1024;
  // 上传完后处理
  form.parse(req, function (err, fields, files) {
    console.log(fields);
    console.log(files);
  }
 }

提示：

如果后台使用connect-multiparty模块只能接收jQuery传递的formdata参数，当然jQuery要设置了属性：

processData: false。// 不处理数据
contentType: false。// 不设置内容类型
参考地址

不能接收Axios传递的参数，因此推荐使用multiparty模块。

查看FormData里的值

const formData = new FormData();
formData.append("basePath", "fos/attach/");
formData.append("file", e.file);

1、遍历

for (var [a, b] of formData.entries()) {
  console.log(a, b, '--------------');
}

2、get

formdata.get(key)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue项目中data数据之间互相访问的实现

如下代码: <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, tex
vue中data里面的数据相互使用方式

目录 data里面的数据相互使用具体代码如下 data里的数据不能相互引用问题 data里面的数据相互使用今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片: 我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法. 在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这
vue中如何初始化data数据

目录如何初始化data数据 vue程序初始化流程初始化改写的原因流程实现源码流程初始化流程如何初始化data数据后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据. form: { id: 0, name: '', place: '', number: '', admin_uid: '', is_audit: 2, contact: '', sort: '', is_network: 2, network_type: 1, is_projector: 2, is
vue前端测试开发watch监听data的数据变化

目录 watch监听data的数据变化新问题解决 1. 先把姓名的值,也加到options里 2. 在监听里增加for循环和判断 watch监听data的数据变化上一篇里提到了用elementUI的select实现了个远程搜索的功能,最终效果是这样的. 但是继续开发的时候,又遇到了一个新的问题,跟上面的功能有关. 先看下远程搜索的操作,与data里的数据关系. 当输入“张”进行搜索,看到的下拉列表里展示的结果都是存放在data的options: []. 当我选择了一个,比如“张三”,因为s
Vue如何在CSS中使用data定义的数据浅析

1.考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2.使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性 <template> <div> <div class="box" :data-content="obj.desc"
Vue发送Formdata数据及NodeJS接收方式

目录 Vue发送Formdata数据 NodeJS后台接收查看FormData里的值 Vue发送Formdata数据参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的. 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) { const formData = new FormData(); let uid = this.$store.getter
python实现发送form-data数据的方法详解

本文实例讲述了python实现发送form-data数据的方法.分享给大家供大家参考,具体如下: 源代码 -----------------------------279361243530614 Content-Disposition: form-data; name="parent_dir" / -----------------------------279361243530614 Content-Disposition: form-data; name="file&qu
Vue 对象和数据的强制更新方式

目录对象和数据的强制更新数组更新强制更新更新数据并强制更新视图对象类型数组类型异步类型强制更新对象和数据的强制更新数组更新以下支持自动更新 push() //向后添加 pop() //删除最后一个 shift() //删除第一个 unshift() //向第一个添加元素 splice() //向指定位置添加/删除元素 sort() //用原地算法对数组的元素进行排序 reverse() //将数组中元素的位置颠倒注意,这种形式修改数据 this.arr[1] = ‘x’
springmvc和js前端的数据传递和接收方式(两种)

在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @RequestMapping("queryCityInfo") @ResponseBody public String queryCityInfo()throws Exception{ String provinceId = getString("id"); @SuppressWar
Vue 使用formData方式向后台发送数据的实现

很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件. 例如时间戳.ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData:在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储:此过程较为复杂: 使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收
AngularJs的$http发送POST请求,php无法接收Post的数据的问题及解决方案

最近在使用AngularJs+Php开发中遇到php后台无法接收到来自AngularJs的数据,在网上也有许多解决方法,却都点到即止.多番摸索后记录下解决方法: tips:当前使用的AngularJs版本为v1.5.0-rc.0 原因分析: 在使用jquery的时候进行post请求的时候很简单. $.ajax({ type: 'POST', url:'process.php', data: formData, dataType: 'json', success: function(result)
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案

最近在使用AngularJs+Php开发中遇到php后台无法接收到来自AngularJs的数据,在网上也有许多解决方法,却都点到即止.多番摸索后记录下解决方法: tips:当前使用的AngularJs版本为v1.5.0-rc.0 原因分析: 在使用jquery的时候进行post请求的时候很简单. $.ajax({ type: 'POST', url:'process.php', data: formData, dataType: 'json', success: function(result)
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式用谷歌监控:传参方式是request payload 可以发现传参方式是
VUE:vuex 用户登录信息的数据写入与获取方式

整体思路: 前台获取用户数据,向后台发送post请求,验证成功后前台接受数据,改变用户登录状态将登录状态及用户数据写入到state中这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中页面:login.vue 代码: this.loginData = await getUserI
SpringMVC接收与响应json数据的几种方式

前言前后端的数据交互,除了通过form表单进行提交外,也可以通过ajax向后端传递和接收json格式数据(这种方式可以实现请求数据和页面分离).本文将总结一下在Spring MVC中接收和响应json数据的几种方式. 话不多说了,来一起看看详细的介绍吧准备步骤: 1.导入json相关框架的依赖(比如jackson). 2.spring mvc的controller方法正常写,如果需要响应json,增加@responsebody注解. 3.在接受json对应的输入参数前,加上@RequestB

Vue发送Formdata数据及NodeJS接收方式

目录

Vue发送Formdata数据

NodeJS后台接收

查看FormData里的值

相关推荐

随机推荐