Javascript 如何使用Axios从表单发布文件

使用原始HTML当我使用以下命令将文件发布到flask服务器时，我可以从flask全局请求访问文件：

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

当我尝试对Axios执行相同操作时，flask请求全局为空：

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

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

上载文件：函数（事件）{
const file=event.target.files[0]
axios.post（'upload_file'，file{
标题：{
“内容类型”：“多部分/表单数据”
}
})
}

如果我使用上面相同的uploadFile函数，但从axios.post方法中删除了头json，我将在flask请求对象的form key中得到一个字符串值的csv列表（文件是.csv）

---

如何获取通过axios发送的文件对象？

将文件添加到

formData

对象中，并将

内容类型

标题设置为

多部分/表单数据

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

---

使用Vue的示例应用程序。需要在localhost上运行的后端服务器来处理请求：

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

---

这对我很有用，我希望能对别人有所帮助

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

---

如何使用内存中的对象（如JSON对象）发布文件：

---

如果您不想使用

FormData

对象（例如，您的API采用特定的内容类型签名，而

multipart/FormData

不是其中之一），则可以改为：

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

---

分享我使用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
};

const onChange=（e）=>{
让url=”https:///api/upload";
让file=e.target.files[0]；
上传文件（url，文件）；
};
常量上传文件=（url，文件）=>{
设formData=new formData（）；
formData.append（“文件”，file）；
axios.post（url、formData、{
标题：{
“内容类型”：“多部分/表单数据”，
},
})。然后（（响应）=>{
成功（回应）；
}).catch（（错误）=>{
失败（错误）；
});
};
const fnsucture=（响应）=>{
//添加成功处理
};
常量fnFail=（错误）=>{
//添加失败的处理
};

@Niklesh是的，我在上面修复了错别字剪切和粘贴，在代码中包含了双引号。您是否尝试了

v-on:change=“uploadFile”

使用

input

而不是

form

tag？@Niklesh我得到了相同的结果-数据作为字符串发送，并通过request.form而不是request.files在flask中拾取。发布文件后。我们需要从HTTP请求访问它们还是需要从服务器端的参数访问它们。@ParthPatel:我正在使用

$\u FILES

获取服务器端的文件，就像我在这篇文章中使用PHPThanks一样，但我仍然不明白为什么我们需要

FormData

。根据axios的文档，无论是

文件

还是

表单数据

都只被视为浏览器，因此这两种方式都可以被同等看待！我正在发送'data:{data:formData}'，这将生成错误412。它使用的是

data:formData

注意：当在浏览器上下文中运行时，代码段的工作方式与此相同。要在node.js中运行，需要传递由

formData.getHeaders（）计算的头文件，这是axios的一个已知问题；例如，参见
https://github.com/axios/axios/issues/789
请允许我在这里问您一个与axios相关的问题：？使用Nuxt-这终于对我起作用了。删除
标题：{'Content-Type'：'multipart/form-data'}
是在从options获得服务器响应后实际发送帖子的唯一方法。我可能做错了什么，但它正在发挥作用，我不去管它，这太棒了！我从来没想到你能把整张表格都寄出去。谢谢这就是我要找的谢谢你，先生！
<input type="file" onChange={onChange} accept ="image/*"/>

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
};