如果你不想使用FormData对象(例如，你的API接受特定的内容类型签名，multipart/ FormData不是其中之一)，那么你可以这样做:

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

如果你不想使用FormData对象(例如，你的API接受特定的内容类型签名，multipart/ FormData不是其中之一)，那么你可以这样做:

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

对我来说，错误是我控制器中的实际参数名称……我花了好长时间才想明白，也许能帮到别人。我使用Next.js / .Net 6

客户:

export const test = async (event: any) => {
    const token = useAuthStore.getState().token;
    console.log(event + 'the event')
    if (token) {
        const formData = new FormData();
        formData.append("img", event);
        const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, {
            headers: {
                'Authorization': `bearer ${token}`
            }
        })
        return res
    }
    return null
}

服务器:

 [HttpPost("uploadproductimage")]
        public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
        {
            return Ok();
        }

错误，因为服务器期望参数“image”而不是“img”:

formData.append("img", event);

 public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)

如何在内存中使用对象发布文件(如JSON对象):

import axios from 'axios';
import * as FormData  from 'form-data'

async function sendData(jsonData){
    // const payload = JSON.stringify({ hello: 'world'});
    const payload = JSON.stringify(jsonData);
    const bufferObject = Buffer.from(payload, 'utf-8');
    const file = new FormData();

    file.append('upload_file', bufferObject, "b.json");

    const response = await axios.post(
        lovelyURL,
        file,
        headers: file.getHeaders()
    ).toPromise();


    console.log(response?.data);
}

分享我使用React和HTML输入的经验

定义输入字段

<input type="file" onChange={onChange} accept ="image/*"/>

定义onChange监听器

const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

Axios 0.25.0 >到0.27.2版本存在一个问题，如果您追加了多个字段，但其中一个字段包含一个文件，则PUT请求中的FormData对象无法正确处理，POST工作正常。

此外，Axios 0.25.0+会自动设置正确的标头，因此不需要指定Content-Type。