上传文件传参 pc端vue的formData

于 2024-07-25 09:36:58 发布
阅读量496 收藏 2
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42440919/article/details/140680785
版权

formData

let formData = new FormData();

formData.append("file", blob, ref + ".png");             //添加参数并且重新命名文件名称

if(ref.toString().indexOf('qrcode') >= 0) formData.append('noStbg', true)//添加参数

 uploadType(formData, source).then(response => {})

具体formData解释可以看    https://blog.51cto.com/u_15127549/4154195

qq_42440919
关注
vue项目formdata格式上传文件
v_loading的博客
04-19 793
#按钮 <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :limit="1" accept=".docx, .pdf, .doc" :on-exceed="handleExceed" :http-request="modeUpload"&gt
微信小程序上传功能
qq_44897151的博客
03-21 1633
踩坑篇 最近在搞微信小程序的视频上传功能，很简单的一个问题却折腾许久，甚至反复怀疑后端功能性错误 唠一唠小程序端和PC端上传组件不一样的地方 其实之前有做过 PC端的上传功能，当时是在表单中上传一个压缩包，直接采用elementUI中的upload组件 <el-upload class="upload-demo" action="上传地址" :file-list="fileList"> </el-upload> 直接填一个上传地址即可，也不用约定什么上传请求头，组件一
vue使用formData进行文件上传
weixin_30410999的博客
05-10 2729
本文为博主原创，未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux-form-item label="证书名称"> <ux-field-decorator name="authorizationDomain"> <ux-i...
vue文件上传（手动 FromData）
哦哦一人
01-29 686
2.创建FromData对象 添加File类型对象传给axios。这样一个最简单的使用fromData的文件上传就撸好了。1.设置header。
vue文件提交 FormData方式
TTianYe的博客
03-21 6763
vue文件提交 ==>> FormData方式 做Vue项目的时候, 提交数据基本上都是用Axios, 之前做过的表单方面的提交，一直没有空隙进行总结，今天得空进行一下复习和总结：Vue中使用Axios处理包含上传文件的表单提交 可能出现的问题： 常见的问题 1、上传文件应该以什么方式提交, 比如后台是multipart/form-data, 而习惯性以json对象发送数据(实际上大量插件对数据对象也封装了方法, 所以容易忽略) 2、上传文件提交的格式, 以为将对象改成
【转】vue最简单el-upload上传formdata带参数
weixin_43951592的博客
09-30 4578
vue
【vue】vue+avue+elementui项目问题汇总-持续更新ing
qq_45852108的博客
04-29 514
【vue】vue+avue+elementui项目问题汇总
Vue3.0项目---蜘蛛电影（解析）
weixin_43842821的博客
04-09 864
项目简介 蜘蛛电影主要是仿猫...
vue知识点整理
weixin_45844706的博客
01-05 1661
一、介绍 1、作者：尤雨溪 2、官网：https://cn.vuejs.org/ 3、渐进式 JavaScript 框架 渐进式：主张最少 4、优点：易用、 灵活、 高效 、 渐进式、模块化友好，有利于SPA 5、缺点：不支持IE8及以下版本；首屏加载时间长，不利于SEO 6、核心：数据驱动，组件系统 7、多页面应用和单页面应用 应用 优缺点 MPA:multiple page application 多页面应用 一个URL对应一个HTML文件，多个URL对应多个HTML文件；会出现白屏，
vue_t_v7
热门推荐
wansui33_的博客
02-01 2万+
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
Vue使用formData类型上传文件
weixin_60196946的博客
06-13 2297
Vue使用formData类型上传文件
vuejs文件传参方式
牛牪犇
02-24 2292
vuejs传值，多个文件或者页面
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文件上传的完整代码。
Vue 和 HTML FormData配合axios或ajax上传文件，提交表单数据
weixin_57992300的博客
04-02 1280
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
vue 上传文件携带其他参数
weixin_46067308的博客
09-07 1855
on-change 属性 获取选择文件。利用接口上传文件以及其他参数。上传文件时需要携带其他参数。
vue使用 el-upload 上传文件附加参数，2024年最新面试心得体会2000字
m0_57541068的博客
04-10 391
只能上传xlsx模板文件，且不超过500kbJS代码：// 原始提交事件i++) {fd.append(‘name’, ‘文件名字’)fd.append(‘type’, ‘类型一’)},// 上传文件url:headers: {
前端上传文件到后端的FormData实现
qq_15506981的博客
11-20 1万+
将本地数据（.xlsx、.docx等文件）上传或导入数据库，有时候需要使用FormData 对象。FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。 一、创建对象： 创建一个FormData对象实例 1、常用的创建 let formData = new FormData(); 2、vue中的创建 let formData = new window.FormData(); 3、在表单的基础上创建 <form id="fromCont" acti
vue如何使用formData传递文件类型的数据
xiaoweids的博客
05-24 2016
本文主要介绍了vue如何使用formData传递文件类型的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
关于vue中利用axios常用的表单提交以及文件上传如何传递参数给后端的详解
qq_42166078的博客
08-16 1万+
前言 看到好多vue初学者还不会调用接口包括参数的传递，这里做一个详细的介绍以供各位初学者参考。 目录前言一、Axios二、安装三、引入四、示例1.表单提交 一、Axios Axios 是一个基于 promise 的易用、简洁且高效的http库。 特性 支持node端和浏览器端：同样的API，node和浏览器全支持，平台切换无压力 支持Promise：使用Promise管理异步，告别传统callback方式 丰富的配置项：支持拦截器等高级配置 拦截请求和响应，转换请求数据和响应数据，自动转换 JSON
vue formdata上传文件给后端
最新发布
10-23
Vue.js 中使用 `FormData` 对象上传文件到后端服务器是一种常见的做法。`FormData` 可以方便地处理二进制数据，如文件。以下是一个简单的步骤： 1. **创建 FormData 对象**: 首先，在 Vue 组件中，你需要创建一个新的 `FormData` 实例，并添加你要上传的文件。 ```javascript methods: { uploadFile(file) { const formData = new FormData(); formData.append('file', file); } } ``` 2. **获取用户选择的文件**: 通常在 HTML 通过 `<input type="file">` 元素让用户选择文件，然后在事件处理器中调用 `this.uploadFile()`。 ```html <input type="file" @change="uploadFile($event.target.files)"> ``` 3. **发送 HTTP 请求**: 使用 Vue 的 Axios 或者原生的 fetch 方法将 `FormData` 发送到后端 API。这里以 Axios 为例： ```javascript axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { // 处理上传成功后的响应 }) .catch(error => { // 错误处理 }); ``` 在这里，`Content-Type` 设置为 `multipart/form-data` 是因为 `FormData` 内容默认就是这种格式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值