使用fetch上传文件失败的解决方案

最新推荐文章于 2024-05-29 10:57:47 发布
最新推荐文章于 2024-05-29 10:57:47 发布
阅读量3.3k 收藏
点赞数
分类专栏： fetch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Corey_mengxiaodong/article/details/80595958
版权

在工作中遇到了一个问题，就是用fetch上传文件。

一开始使用fetch(url,formData) ，也设置了content-type:multipart/form-data，但是后台怎么也拿不到文件和参数，用ajax可以正常上传。

比较了一下两个请求的区别在于，ajax请求中content-type:multipart/form-data; boundary=----WebKitFormBoundaryAnZIsvCKxDSH7vQ0

fetch请求中content-type:multipart/form-data 后面没有 boundary=----WebKitFormBoundaryAnZIsvCKxDSH7vQ0

发现是浏览器的BUG，解决方案就是删除content-type


Corey_Mxd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form+iframe解决跨域上传文件的方法
11-28
总的来说，`form+iframe`的跨域上传文件方案是一种实用的解决方案，尤其适用于那些需要兼容旧浏览器的项目。但是，随着现代Web技术的发展，例如CORS（跨源资源共享）和Web API的完善，开发者也有更多安全且功能强大...
基于Java Web的HTTP文件上传进度显示的解决方案
03-27
这个问题的解决方案通常涉及到前端与后端的交互以及文件上传的处理机制。本篇将深入探讨基于Java Web的HTTP文件上传进度显示技术。 首先，我们需要理解HTTP协议的特点。HTTP是无状态的，因此在文件上传过程中，前端...
java fetch_java前后分离使用fetch上传文件失败500
weixin_34544309的博客
02-13 220
这次不是写什么技术要点，仅仅是记录一下 最近遇到的一个问题背景使用fetch向java后台上传文件时，前端调试报错500,后端的报错为multipart 无法解析，翻译过来大概是这个意思。由于本人不会java所以这里只是记录一下前端的注意事项。原因问题的主要原因在于，我在上传时设置了contenttype，这里就不得不提一下，fetch中由于之前使用的时候如果我不设置contenttype那么我向...
django使用fetch上传文件
最新发布
HGGshiwo的博客
05-29 483
在上一篇文章中，我包装了fetch方法，使其携带cookie。${这里还是选择使用formData进行传递数据，一是django可以从POST.get(key)直接获取参数，如果是浅层的就不需要额外json.parse 了，二是json传输文件需要base64，可能有性能损失。
fetch上传图片问题
Hello_word_2
11-25 1203
1.使用vantui+fetch实现 主要遇到两个问题： 问题一：后台接收不到file 问题二：后台返回json对象浏览器response返回空白 js代码 afterRead(file) { file.status = 'uploading'; file.message = '上传中...'; let url = baseUrl + '/app/toUploadPic'; setTimeout(() => { const fd = new Fo.
gitee图床上传报错Failed to fetch
weixin_44828370的博客
04-16 1153
gitee图床上传报错Failed to fetch 一、报错描述 在使用图床的时候，有时会莫名的出现报错--Failed to fetch 导致图片无法上传 解决： - 问题出在端口号上： - 有时候picgo的端口号，莫名的会发生变化，这样typora 就无法获取到了。 - 改正即可 二、解决和分析 1. 验证得到，picgo上传区能够正常使用 可以知道，picgo的上传应该是没有问题的。原因可能出现在picgo和typora的连接间 2. 找到 picgo的server 可以看到
使用fetch遇到no multipart boundary was found的原因，以及三种content-type
hao像飘在外太空的博客
09-19 4943
使用form-data来post内容的时候，提示这个错误， 使用form-data提交的时候，不要手动设置content-type， chrome会自动生成content-type，而且自动生成的content-type中会带有自动生成boundary 另， 使用json格式post的时候, content-type要设置成"application/json" ， 还有一种content-type...
Java 批量上传文件实例
11-25
本实例将详细讲解如何在Java中实现这一功能，结合使用jar包和JSP来构建一个完整的解决方案。 首先，我们要了解批量上传的基本原理。批量上传通常涉及到多个文件的选取和发送，这需要前端页面（如JSP）提供一个多选...
java实现大文件上传分片上传断点续传.zip
10-25
本项目采用SpringBoot框架实现了一种高效、可靠的解决方案，支持大文件的分片上传和断点续传功能。以下是该技术实现的核心知识点： 1. **大文件上传**：大文件上传是指处理超过内存或服务器限制的文件，避免一次性...
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-31
2. 分片上传：使用Ajax或Fetch API异步上传文件分片，同时发送分片的序号和哈希值。 3. 服务器端处理：接收分片，存储，并记录文件分片状态。 4. 断点续传管理：在客户端保存上传进度，服务器端保存已上传分片信息。...
php JS大文件上传
10-12
"PHP+JS大文件上传"的解决方案就是针对这种情况设计的，它利用了PHP服务器端语言和JavaScript客户端语言的优势，实现文件的分片上传，提高上传效率并确保上传的稳定性。 首先，我们来理解一下大文件上传的原理。...
ajaxfileupload实现异步式上传文件
05-30
**AjaxFileUpload实现异步文件上传详解** 在Web开发中，传统的文件上传方式通常会导致页面...尽管现在有更现代的解决方案，如HTML5的FormData和fetch API，但AjaxFileUpload仍然是一个适用于旧版本浏览器的实用选择。
简单的大文件分片上传功能.zip
01-28
总的来说，大文件分片上传是一种实用的解决方案，尤其在处理网络不稳定或文件尺寸过大的场景下。通过合理地分片、上传和重组，可以显著提高上传效率，增强用户体验。在实际开发中，我们需要考虑网络环境、安全性以及...
利用HTML5的新特点实现图片文件异步上传
09-28
【HTML5图片文件异步上传】是现代网页开发中的一个重要特性，...总之，HTML5的文件API和异步上传技术为开发者提供了更强大和灵活的图片上传解决方案。通过合理利用这些特性，可以构建出更加高效、友好的文件上传界面。
mvc weui上传文件完整demo
06-30
【标题】"mvc weui上传文件完整demo"指的是一个基于MVC架构并使用WEUI库实现的文件上传功能的完整示例项目。这个项目可能是为了帮助开发者理解和实践如何在Web应用中实现用户友好的文件上传功能，特别是针对移动设备...
js 使用fetch来上传文件 formdata()
twinkle的博客
06-19 7659
<input type="file" name="" id="file"> <script> // 文件上传 // 流程: // 1. 客户端将文件数据发送给服务器 // 2. 服务器保持上传的文件到服务端 // 3. 服务器响应给客户端一个文件访问地址 // 键的名称(表单域名称): 服务端要求 // 请求方法: Post // 请求表单.
fetch使用formdata数据格式发送请求
热门推荐
赵乘风_i
09-04 2万+
修改请求content-type 请求接口都是使用的封装好的request，对于post请求统一都是application/json。 但是后台同学可能是为了能直接使用之前已有的接口，让我将仅仅这一个的接口请求改为formdata的提交形式，也就是application/x-www-form-urlencoded。之前所有请求都走的request，现在就要修改 两种方式修改： 1、在req...
简单解决 multipart/form-data 文件上传表单中 传递参数无法获取的办法! (解决办法:动态更改表单提交URL)
03-22 9033
在jsp（其它动态web页面好像也存在）中，如果要上传文件，表单的enctype就必须设定为"multipart/form-data"了，这样就能够传递文件数据，却无法传递参数，如下的表单： 请选择上传的图片 请选择上传的图片 这是本人程序中的一段代码，本人是想传递一个参数过去的，可是怎么都无法传递过去，request.
使用vue和fetch进行文件上传怎么写
01-10
首先，需要在 HTML 中添加一个文件选择器和一个提交按钮。 ```html <template> <form> <input type="file" ref="fileInput" /> <button type="submit">上传</button> </form> </template> ``` 然后，在 Vue 组件的 JavaScript 部分中，可以使用 fetch 函数发送文件到服务器。首先，需要获取文件对象，然后创建一个 FormData 对象，并将文件添加到 FormData 中。 ```javascript <script> export default { methods: { async uploadFile() { // 获取文件对象 const file = this.$refs.fileInput.files[0] // 创建 FormData 对象 const formData = new FormData() // 将文件添加到 FormData 中 formData.append('file', file) try { // 使用 fetch 发送文件到服务器 const res = await fetch('/upload', { method: 'POST', body: formData }) console.log(await res.json()) } catch (err) { console.error(err) } } } } </script> ``` 最后，在表单提交事件中调用上传文件函数。 ```html <template> <form @submit.prevent="uploadFile"> <input type="file" ref="fileInput" /> <button type="submit">上传</button> </form> </template> ``` 这样就可以使用 Vue 和 fetch 进行文件上传了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值