VUE发送Formdata数据

•参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。•具体使用方法，参考此链接地址^[1]

// 这里我使用的是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文档地址^[2]

// 这里我配置了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。// 不设置内容类型

•参考地址^[3]•不能接收Axios传递的参数，因此推荐使用multiparty模块。

References

[1] 此链接地址: https://www.npmjs.com/package/cropperjs[2] multiparty文档地址: https://www.npmjs.com/package/multiparty[3] 参考地址: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects