真的不会只会暴力了 2022-12-28 16:36 采纳率: 100%
浏览 54
已结题

VUE3使用FormData传递数据时,后端接收为空

VUE3使用FormData传递数据时,后端接收为空
传递时,请求载荷为[object object]
代码
<input style="width: 100%;" name="multipartFile" type="file" @change="getPhoto">

        const getPhoto = (event) => {
            let multipartFile = new FormData();
            multipartFile.append('multipartFile', event.target.files[0], event.target.files[0].name);
            console.log(multipartFile.get("multipartFile"));
            $.ajax({
                url: 'http://localhost:3000/add/photo',
                type: 'post',
                data: {
                    multipartFile
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                cache: false,
                processData: false,
                contentType: false,
                success: resp => {
                    console.log(resp);
                }
            })
        }

运行结果及详细报错内容

文件上传后前端输出:

img

加入formdata后上传时载荷:

img

后端输出接收到的数据

img

我的解答思路和尝试过的方法

尝试过修改headers,使用其他变量封装event.target.files[0].name,结果不变。
然后修改为element-ui,载荷数据变为:
------WebKitFormBoundarygSTFEPgeDCpZA2un Content-Disposition: form-data; name="file"; filename="IMG_
等内容,后端接收到依然为空
然后使用API测试工具测试,成功上传,应该是前端问题,但是不知道怎么解决

怎么才能正常传递文件
  • 写回答

1条回答 默认 最新

  • 诗人远行 2022-12-28 16:57
    关注

    1.data后面直接跟multipartFile ,不用在{multipartFile},

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 1月5日
  • 已采纳回答 12月28日
  • 创建了问题 12月28日

悬赏问题

  • ¥15 cpuid是如何转换的
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)
  • ¥15 c# 直接使用c++ 类库文件