Vue发送Formdata数据及NodeJS接收方式
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模块接收参数。
// 这里我配置了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-router中hash模式与history模式的区别
为了构建 SPA(单页面应用),需要引入前端路由系统,这就是 Vue-Router 存在的意义,而这篇文章主要给大家介绍了关于vue-router中两种模式区别的相关资料,分别是hash模式、history模式,需要的朋友可以参考下2021-06-06解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论