vue中使用axios上传文件（踩坑）

最新推荐文章于 2024-09-25 18:21:39 发布

是我胡汉三啊

最新推荐文章于 2024-09-25 18:21:39 发布

阅读量1.5k

点赞数

分类专栏：踩坑大全 axios vue 文章标签： vue ajax js

本文链接：https://blog.csdn.net/weixin_45925443/article/details/108923503

版权

本文记录了在Vue项目中使用Axios上传文件遇到的问题及解决方案。问题主要在于请求头的Content-Type设置不正确，导致上传失败。正确的Content-Type应设置为multipart/form-data，并调整axios的请求配置来实现有效文件上传。

摘要由CSDN通过智能技术生成

文章目录

目标
问题

目标

使用Vue框架和axios上传文件

问题

1、axios上传文件，服务端接收数据为空
2、客户端报错： Error: Request failed with status code 400

问题描述

上传文件时发现上传至服务端数据为空

 doUpload(file) {
   
      if (file) {
   
        let fd = new FormData();
        fd.append("file", file);
        axios({
   
          method: "post",
          url: "http://127.0.0.1:8888/api/UploadFile",
          headers: {
   
            "content-type": "multipart/form-data",
          },
          data: {
   
            fd,
          },
        }).then((response) => {
   
          console.log