猿问

axios,formData提交的时候,怎么一起提交文件和数据,如下图和代码

问题

axios,formData提交的时候,怎么一起提交文件和数据


前台vue

        submitForm(event) {

            event.preventDefault();

            let formData = new FormData();

            formData.append("file", this.file);

            formData.append("data", {

                "aa":"aa",

                "bb":"bb",

                "cc":"cc"

            });

            let config = {

                headers: {

                    "Content-Type": "multipart/form-data"

                }

            };


            axios

                .post("http://localhost:3000/upload", formData, config)

                .then(function(res) {

                    if (res.status === 2000) {

                        /*这里做处理*/

                    }

                });

        },

后台node

router.post('/upload', upload.single('file'), async(ctx, next) => {

    // console.log(ctx.req)

    console.log(ctx.req.body.data.aa)

    console.log(ctx.req.file)

    await userModel.imgInsertInto([ctx.req.file.filename, new Date()])

        .then(result => {

            ctx.body = {

                code: 200,

                msg: '图片上传成功',

                data: result

            }

        })

        .catch(error => {

            console.log(error)

            ctx.body = false;

        })

        // ctx.body = {

        //     filename: ctx.req.file.filename //返回文件名  

        // }

})

打印接收到的数据

扬帆大鱼
浏览 2791回答 2
2回答

眼眸繁星

formData.append("data", {                "aa":"aa",                "bb":"bb",                "cc":"cc"});//意思是({}).toString() -> [object Object]form-data是传不了json的,只有text和file两种格式。form-data报文结构------BoundaryContent-Disposition: form-data; name="file"; filename="file.txt"Content-Type: text/plain------BoundaryContent-Disposition: form-data; name="text"val

HUWWW

append的第二个参数不是对象参考:MDN
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答