使用FormData.append()添加键值对后,无法通过ajax将formData数据发送出去是为什么?

新手上路,请多包涵

前端代码:

  • blob数据是文件格式
                    let cas = cropper.getCroppedCanvas()
                    cas.toBlob((blob) => {
                        let formData = new FormData()
                        formData.append("croppedImage", blob)
                        $.ajax('/upload', {
                            method: 'POST',
                            data: formData,
                            processData: false, // 告诉jquery不要去处理发送的数据
                            contentType: false, // 告诉jquery不要去设置Content-type的请求头
                            success() {
                                console.log('Upload success')
                            },
                            error() {
                                console.log('Upload error')
                            }
                        })
                    }, "image/webp", 1)
                }
  • 在发送数据后控制台中Network-Header中并没有像使用FormData传递普通的表单对象那样出现FormData栏,因此怀疑是前端代码某处错误导致的问题

后台代码:

// 设置body-parser处理post数据
app.use(express.urlencoded({
    extended: false
}))
app.use(express.json())

app.post('/upload', (req, res) => {
    let body = req.body
    console.log(body)
    // 以下省略
}
  • 打印永远是{},无法接收数据

测试了FormData可以有效传递HTMLFormElement的数据,但是对于.append()添加的数据则无法传递给后端,这里的代码到底哪里有错误亦或是缺少了什么?期望大佬指教。

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题