axios 相关问题

使用原始 HTML，当我使用以下命令将文件发布到 Flask 服务器时，我可以从 Flask 请求全局访问文件：使用原始 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> 在烧瓶中： def post(self): if 'file' in request.files: # .... 当我尝试对 Axios 执行相同操作时，烧瓶请求全局为空： <form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile"> <input type="file" id="file" name="file"> </form> <script> function uploadFile(event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': 'multipart/form-data' } }) } </script> 如果我使用上面相同的 uploadFile 函数，但从 axios.post 方法中删除 headers json，我会在 Flask 请求对象的表单键中得到一个 csv 字符串值列表（文件是 .csv）。如何获取通过 axios 发送的文件对象？将文件添加到 formData 对象，并将 Content-Type 标头设置为 multipart/form-data。 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 的示例应用程序。需要在本地主机上运行的后端服务器来处理请求： 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); } } }); https://codepen.io/pmarimuthu/pen/MqqaOE 如果您不想使用 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 }; 这对我有用，我希望对某人有帮助。 var frm = $('#frm'); let formData = new FormData(frm[0]); axios.post('your-url', formData) .then(res => { console.log({res}); }).catch(err => { console.error({err}); }); 这是我的方式： var formData = new FormData(formElement); // formData.append("image", imgFile.files[0]); const res = await axios.post( "link-handle", formData, { headers: { "Content-Type": "multipart/form-data", }, } ); 如何使用内存中的对象（如 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); } Axios 版本 0.25.0 > 到 0.27.2 存在问题，如果您有 FormData 多个字段，但对于包含文件的一个字段来说没问题，则无法正确处理 PUT 请求中的 appended 对象， POST 工作正常。此外，Axios 0.25.0+ 会自动设置正确的标头，因此无需指定 Content-Type。如果你要拍照，你必须存储图像并保留其路径，然后从其路径中检索机器上的 blob，将 blob 添加到 formData 中，还添加图像的名称，然后使用multipart/form-data 标头，我们在 req.files 的后面找到图像对我来说，错误是控制器中的实际参数名称......我花了一段时间才弄清楚，也许它会对某人有所帮助。我正在使用 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)

javascript ajax file-upload axios

回答 10 投票 0

如何解决vite的localhost不安全问题？

我正在做一个用react + tailwind + vite开发的个人项目。在我的注册组件中，我需要将一些信息从客户端（ localhost:5173 ）发布到服务器端（ local...

node.js ssl axios localhost vite

回答 1 投票 0

无法将图像作为表单有效负载元素发布到 Node.js API

我在 Node.js 下的 Javascript 方面遇到了很大的困难，它应该从磁盘读取文件并通过后期请求将其发布到 DeepStack 面部识别系统以对其执行某些操作。我目前

node.js axios

回答 1 投票 0

如何在Nuxt服务器api中重定向到指定路由？

我目前正在使用 Nuxt 做一个项目，并且我正在使用 Nuxt server/api 文件夹来存储我的所有外部 API。我想做的是，如果有的话，我想重定向回 / 页面...

axios nuxt.js interceptor nuxt3.js

回答 1 投票 0

使用 axios 和 Slack API 时出现 CORS 问题

我正在使用 axios，通过浏览器与 Slack webhook API 进行交互。发送帖子时，我尝试使用 axios.post（网址，数据） browser/axios 向后端发送 OPTION 请求。包含在...

slack-api axios

回答 2 投票 0

如何向客户端发送多个变量

我想向客户端发送许多对象和一个变量，但我不明白如何选择我想要的响应并在客户端上创建变量。服务器代码： var isAdmin = false; app.get('/main', 异步 (...

javascript node.js express axios

回答 1 投票 0

如何在使用react-router-dom的react中隔离经过身份验证和未经身份验证的路由

这是我的routes.tsx 文件，我只想做的是，如果用户未经身份验证，那么他/她应该无法导航到仪表板和稍后将进入应用程序的其他路线。还有...

reactjs authentication routes axios interceptor

回答 1 投票 0

如何使用axios配合代理服务器进行https调用？

这里基本上是同样的问题。我正在使用浏览器。下面的代码是通过webpack编译的。我试过这个： const axios = require('axios'); var res =等待 axios.get('https://api.ipify....

javascript axios

回答 6 投票 0

在 Axios 中自定义日期序列化

默认情况下，当 JavaScript 对象包含 Date 对象时，Axios 会将其序列化为 UTC。这意味着传输的时间是使用时区进行转换的。这不适用于我的用例。 ...

javascript typescript axios interceptor utc

回答 3 投票 0

使用 axios-mock-adapter 时出现 404 错误

我相信我无法配置 axios-mock-adapter。我的文件是： axiosConfig.ts const axiosInstance = axios.create({ baseURL: 'http://localhost:3000', // 本地主机标题：{ '内容类型...

javascript axios http-status-code-404 axios-mock-adapter

回答 1 投票 0

Passport JS + React 应用程序内部 500 错误

我正在使用 React 创建一个通用聊天应用程序，但在尝试对用户进行身份验证时遇到了困难。 axios post 请求引发了 500 错误，我无法在任何地方跟踪该错误。当我输入正确时

javascript reactjs authentication axios passport.js

回答 1 投票 0

Axios：使用 httpsAgent 将rejectUnauthorized 设置为 false 以忽略 SSL 问题不适用于 POST 请求

我正在使用 axios 和 NodeJS 来查询 Mikrotik RouterOS 的 REST API，因为您需要强制使用自签名 SSL 证书。当我运行 GET 请求并添加 httpsAge 时，一切正常...

node.js axios ssl-certificate

回答 1 投票 0

将数据从React应用程序发送到Google Sheets w axios

我对 React 和 Typescript 非常陌生，这周刚刚开始。我正在尝试制作一个表单，提交表单后数据将发送到 Google Sheets。我看到了几篇文章，然后选择了

reactjs google-sheets axios google-sheets-api

回答 1 投票 0

axios 相关问题

最新问题