vite & FormData & mock，跨域&无法上传

最新推荐文章于 2023-12-29 15:24:07 发布
最新推荐文章于 2023-12-29 15:24:07 发布
阅读量385 收藏
点赞数
分类专栏： 上传文件 FormData格式 文章标签： vue vite mock FormData
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yyd6976/article/details/113996933
版权
在使用Vite 2.9.14版本和MockJS 1.1.0时，遇到一个棘手的问题：当开启Mock模式，浏览器Network面板显示FormData上传请求被挂起。关闭Mock后，上传功能恢复正常。这个问题可能涉及到Mock设置、Vite配置或者FormData处理方式。解决此类问题通常需要深入理解Mock机制和Vite的构建流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

mock模式开启时，我这里是无法请求FormData上传，浏览器New Work上显示padding中，关闭mock后可以；

我的版本：  "vite": "^2.9.14"，"mockjs": "^1.1.0"

Vue3配置vite.config.js代理解决跨域问题
共同学习，共同成长
08-13 1767
当浏览器发出一个请求时，只要请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就称为跨域。跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料
vuex在vite&vue3的简单使用
aolyu的博客
10-12 3013
vite vue3 vuex使用一、说明二、使用三、最后 注：本文只讲解vite打包vue3中vuex使用 一、说明 最近vite十分火爆，在构建项目过程中，想要用到vuex，但是在晚上搜索教程过程中，发现大都为vue2以下或者非vite版本的使用。 在这里总结一下vite打包中vue3下使用vuex的使用方式以及遇到的一些坑。 二、使用 创建项目（通过vite命令创建） 项目创建好之后在src创建store文件夹 安装vuex npm install vuex@next --save
跨域问题以及解决方法和FormData 构造函数
m0_49456900的博客
03-25 1279
跨域问题和解决方法、FormData 构造函数
Vue3安装使用Mock.js--解决跨域
weixin_52199120的博客
12-13 1128
首先使用axios发送请求到模拟服务器上，再将mock.js模拟服务器数据返回给客户端。打包工具使用的是vite。
mockjs与vue-simple-uploader（大文件分片上传）同时使用报错!
jxysgzs的博客
03-24 765
PS：报错信息找不到了，因为有的早，当时忘了截图了 上个星期写项目时要在系统中引入大文件分片上传组件vue-simple-uploader，结果各种报错（报错图丢了） 原因就是mockjs与vue-simple-uploader有冲突，去掉其中一个就好了，如果非要使用假数据的话JSON-server也可以试试！ ...
form-data&mock&跨域
dream_as_horse的博客
06-13 1015
form-data文件处理 formidable 处理文件上传的库 form.keepExtensions = true 保持文件扩展名 const avatar
【bug记录】mockjs导致polyv上传插件上传失败问题
qq_41852789的博客
10-27 319
polyv上传插件，生产环境上传失败，测试环境成功
Vite & Vue 驱动的静态站点生成器
07-12
Vite & Vue 驱动的静态站点生成器是一种现代且高效的工具，它结合了Vue.js框架的灵活性和Vite构建工具的快速开发特性，用于创建高性能的静态网站。Vite是由Vue.js作者尤雨溪发起的一个项目，它革新了前端开发流程，...
vite项目中使用vite-plugin-mock来Mock后台接口
Sophie_U的博客
12-13 1881
来模拟后端接口，用于应对后端先定义好接口文档，但接口未完成的时期。在配置好mock后，通过axios请求相应接口地址，可以返回预先设置的内容。
Vue3 & Vite & Echart 构建大数据可视化模板
资源摘要信息:"基于 vue3、vite、Echart 框架的大数据可视化（大屏展示）模板" 1. Vue3框架概述 Vue.js 是一款流行的JavaScript框架，用于构建用户界面。Vue3是该框架的最新主要版本，它带来了很多改进和新特性，...
vue3+vite+WebUploader文件上传
最新发布
m0_56245485的博客
12-29 1628
如果你不是被迫使用WebUploader的，可以离开这篇文章去找其他适合vue3的文件上传框架了，如果你已经进了这个坑，下面的介绍希望能让你少踩点坑。
mock导致上传请求无法监听进度事件（错误）
weixin_40869947的博客
05-18 589
近期写项目遇到上传请求无法监听进度事件，目前已解决，以下是我的解决方案，希望帮助有用的人； 1简单粗暴，可有可无那就直接撇弃mock; 2必须使用mock，那如下： let fd = new FormData(); fd.append('file', file.file); let xhr; if(window._XMLHttpRequest){ // 此处引入了mock需要这样写,mock改写了XMLHttpRequest
vue,vite项目中使用mock(使用vite-plugin-mock插件)
秋叶原的黑猫的博客
07-27 1729
mock属于一个我不怎么会用的功能，但又怕必要时忘记流程，因此在此做个记录，过程尽量简短。
vue中formData上传方法及问题
weixin_45195628的博客
07-07 1428
let formData = new FormData(); this.form.pic_file.forEach((item) => { formData.append("pic_file", item); }); formData.append("filePurpose", this.form.filePur); formData.append("remark", this.form.remark); this.$axios.post("/add", formData,{'emula
Gin+Vite实现单图上传
delete_you的博客
01-26 954
gin+vite快速上手如何实现单图上传
mock接口webpack配置proxy,CORS跨域,webpack-plugin
m0_37772480的博客
06-01 912
proxy 代理 笔记 本地mock接口webpack配置 proxy: { "/api": { target: "http://localhost:3000", changeOrigin： true, pathRewrite: {"^/api" : ""} } }
vue项目使用mock-api调用跨域地址
weixin_43825693的博客
03-25 1367
mock-api地址 http://mock-api.com/lzjAjIow9.mock/testhj vue.config.js设置 devServer: { port: 8081, disableHostCheck: true, proxy: { '/guard-boot': { target: 'http://mock-api...
文件上传的两种情况及mock时对应处理办法
xwq911的专栏
10-13 4803
文章为转载过来的，还没时间研究，先记录一下： 1，给文件一个独立的url，要求文件上传至该地址  这种情况下，需要一个上传组件，比如异步上传组件，ajaxfileupload.js  2，没有给文件一个独立的url，而是跟其他字段一起上传  解决方案一：直接是一个form表单  Html代码   iframe id="upload_tar
vue3+ts+vite+elementPlus实现文件上传导入excle给后端，并且清空上传文件后的列表，以及formData变成[object FormData]的解决方法
热门推荐
Chen__FY的博客
06-14 1万+
方法来传递数据的，需求是实现类似与这样的：来一个弹框实现两个excel的文件导入。// 创建一个空白的 FormData 对象，里面没有包含任何数据。8.成功将文件转换为binary（二进制）并上传给后端！方法，可以向空白的 FormData 中追加键值对数据。3.引用elementPlus组件中的upload，：upload有默认的上传文件方式，并且是数组类型。1.首先我们文件上传的方法用到的是。调用 FormData 对象的。9.ts文件上传的完整代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值