前端使用FormData上传多个文件

这篇具有很好参考价值的文章主要介绍了前端使用FormData上传多个文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

FormData: 文档介绍https://developer.mozilla.org/zh-CN/docs/Web/API/FormData当接口需要文件格式的参数进行文件上传时,前端上传的文件需要使用 FormData

FormData主要作用:网络请求中处理用来异步的上传文件

例如:

前端formdata文件上传,vue.js,前端,javascript

前端调用方法如下:

// 创建一个新的 FormData 对象
const files = new FormData();
// fileList 是文件列表
// append方法是向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值
fileList.forEach(file => {
  files.append("files", file);
})

axios({
  method: 'post',
  url: 'http://xxx.cn/import', // 接口地址
  data: files,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(res => console.log(res))
.catch(err => console.log(err))

 页面调用结果如下图

 前端formdata文件上传,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-610721.html

到了这里,关于前端使用FormData上传多个文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 利用FormData上传本地文件

    最近接了个小项目,有个用客户端本地文件的需求。 正常这种需求都是前台传文件,后台去解析。 但这次C++的老哥非让我给文件路径,说公司平台有解析文件的能力。 我说web不是桌面端,拿不到真实路径,他还不信😪 最后一顿‘掰头’,还是传文件 本来还是想用element-p

    2024年02月01日
    浏览(20)
  • formData手动上传问题前端如何传递后端如何接收

    参考文章: 解决Current request is not a multipart request axios上传文件错误:Current request is not a multipart reques 之前使用el-upload使用默认action表单提交.前端默认content-type为multipart/form-data.没有问题. 后期渐进式优化.修改为axios+formdata传递内容. Current request is not a multipart request 这个错误是因

    2024年02月03日
    浏览(35)
  • element ui通过formdata上传文件

    使用场景:选取好excel文件后,再把导入的excel文件和参数同时提交给服务器,需要用到文件的手动上传,但是直接拷贝官网的demo会出现问题,下面会具体说明要注意的问题点。???直接上代码:index.vueel-form ref=“importList” :rules=“ImportRules” :model=“importList” label-positio… 选取

    2024年02月01日
    浏览(28)
  • uniapp开发App上传formData文件

    在uniapp中上传文件(FormData)发现uni.request不支持FormData uni.request 请求发送格式Object|String|ArrayBuffer三种格式 uniapp也给了解决办法 uni.uploadFile(OBJECT) filePath是图片文件路径 name是FormData字段(avatarfile) formData是file文件数据 这里就不使用FormData 这里借用chooseImage获取 tempFilePaths ,

    2024年02月12日
    浏览(29)
  • 【element-UI】el-upload本地上传图片,点击表单提交和一起上传,使用formdata对象上传

    需求效果如下图: 因为后端要求图片需要和其他参数一起提交,使用formdata对象携带参数,通过设置el-upload中action参数值为#,以及auto-upload(是否在选取文件后立即进行上传)为false 接口api

    2024年02月12日
    浏览(32)
  • 前端vue uni-app多图片上传组件,支持单个文件,多个文件上传 步骤条step使用

    快速实现多图片上传组件,支持单个文件,多个文件上传 步骤条step使用; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法   使用方法 HTML代码部分   html JS代码 (引入组件 填充数据)   javascript

    2024年02月08日
    浏览(59)
  • 小程序FormData格式传参(上传图片,删除图片)

          微信小程序开发需要选择本地照片file连同一些表单数据,通过接口发送给服务器,小程序上传图片可以用微信自带的wx.uploadFile方法去传(自带FormData)        wx.uploadFile这个只能一张一张的上传,所以上传图片如果是需要批量的,需要循环调用接口

    2024年02月12日
    浏览(29)
  • 前端 之 FormData对象浅谈

    一、简介 ​ 通常情况下,前端在使用 post 请求提交数据的时候,请求都是采用 application/json 或 application/x-www-form-urlencoded 编码类型,分别是借助 JSON 字符串来传递参数或者 key=value 格式字符串(多参数通过 进行连接)来传递参数,确实足以覆盖大多数业务场景。但是在文件上

    2024年02月04日
    浏览(34)
  • element上传图片,调取接口传值,参数FormData为空

    输入完reason,选完文件后,点击提交按钮后 调取接口。 上传文件 orderFile 字段一直为空 打印了发现,上传文件也是有值得。但是传到接口中就为空 json 里边不能放 file ,但是 formData 里可以放 file 也可以放 json 应该说是 formData 里可以放任何你需要提交的东西 所以 修改后将需

    2024年02月11日
    浏览(31)
  • file.raw和file在formdata中上传时遇到的坑!!

    首先是这样,我在写一个表单上传页面的时候,结合elementeplus遇到了需要上传图片文件和视频文件的情况,一顿上网猛搜,经过一二十篇博客浏览下来,找到了三四篇可以参考,但是对于到底是上传file还是file.raw说法不一,于是我去查了FormData、file、file.raw、blob的文档,弄清

    2024年02月14日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包