axios如何上传FormData

axios 上传 formData 很简单，请看下面的 demo：

vue

<template>
  <input type="file" @change="handleUpload" />
</template>

<script>
  import axios from "axios";
  export default {
    methods: {
      handleUpload(e) {
        var formData = new FormData();
        //e.target.files 获取fileList对象里的上传的file对象添加到formData里面
        formData.append("yourKey", e.target.files[0]);

        axios("yourUrl", formData, {
          //设置请求头
          headers: { "Content-Type": "multipart/form-data" },
        });
      },
    },
  };
</script>

react

import axios from "axios";
export default function Upload(){

const handleUpload = (e)=>{
    var formData = new FormData();
    //e.target.files 获取fileList对象里的上传的file对象添加到formData里面
    formData.append("yourKey", e.target.files[0]);

    axios("yourUrl", formData, {
        //设置请求头
         headers: { "Content-Type": "multipart/form-data" },
    });
}

    return <input onChange={handleUpload} />
}

要点

• 所有 type 属性为 file 的 <input> 元素都有一个 files 属性,用来存储用户所选择的文件。e.target.files[0]获取 fileList 的第 1 个文件(file对象)。
• 在 axios 请求头中设置 Content-Type 为 multipart/form-data 。