当前位置: 首页 > news >正文

FormData的使用及input文件上传

1.FormData 对象的使用:

  1. 用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装 成一个queryString
  2. 异步上传二进制文件。

2.使用

1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。

let formData = new FormData()
formData.append('user', 'zhang')
获取 formData.get('user')  //zhang
删除 formData.append('user')
复制代码

2.使用FormData对象发送文件 在文件上传时

 <input type="file" accept="image/*"
            @change="onFileChange" >
复制代码

在选择文件上传时,使用FormData对file进行处理,然后再发送给后端接口,即可实现文件的上传。

 onFileChange(e){
   let files = e.target.files || e.dataTransfer.files;
    // 通过FormData将文件转成二进制数据
   let formData = new FormData();
   // 将文件转二进制
   formData.append('upload',files[0])

  axios.post(formData,url).then(function(){})
 }
 
 
 // 监听文件上传的进度
 
      let onprogress = function (ev) {
    // 事件对象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        progress.style.width = percent;
    }
复制代码

3.input文件上传,移动端调用相机

<input  type="file" accept="image/*" capture="camera"  />

<!--可调用相机或相册-->
<input  type="file" accept="image/*"   />
复制代码

相关文章:

  • 工业强基 - 头条新闻
  • CPU和内存 程序(线程)关系
  • 双循环递归匹配路由表
  • editplus 注册码
  • 在窗体中把DataGridView中的数据导出Excel
  • Linux学习笔记4月19日任务
  • 《Linux学习并不难》用户管理(1):Linux用户账户分类
  • Java-JUC(八):使用wait,notify|notifyAll完成生产者消费者通信,虚假唤醒(Spurious Wakeups)问题出现场景,及问题解决方案。...
  • 最简单的curl扒网页
  • 如何在微信小程序中使用async/await
  • 实践详细篇-Windows下使用VS2015编译安装Caffe环境(CPU ONLY)
  • 阿里云副总裁:自主可控的云比拿来主义能走更远
  • awk命令详解
  • Linux use apktool problem
  • 小程序页面授权后,页面显示问题
  • 【译】JS基础算法脚本:字符串结尾
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • ES6之路之模块详解
  • Octave 入门
  • react-native 安卓真机环境搭建
  • Vue.js源码(2):初探List Rendering
  • windows下如何用phpstorm同步测试服务器
  • 实现菜单下拉伸展折叠效果demo
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 提醒我喝水chrome插件开发指南
  • 你对linux中grep命令知道多少?
  • UI设计初学者应该如何入门?
  • Unity3D - 异步加载游戏场景与异步加载游戏资源进度条 ...
  • 进程与线程(三)——进程/线程间通信
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​configparser --- 配置文件解析器​
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • # Apache SeaTunnel 究竟是什么?
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (二)换源+apt-get基础配置+搜狗拼音
  • (十一)c52学习之旅-动态数码管
  • (转)http协议
  • (转)关于多人操作数据的处理策略
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .net core webapi 部署iis_一键部署VS插件:让.NET开发者更幸福
  • .Net Core缓存组件(MemoryCache)源码解析
  • .Net MVC + EF搭建学生管理系统
  • .NET 设计模式—简单工厂(Simple Factory Pattern)
  • .net 中viewstate的原理和使用
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET多线程执行函数
  • .Net高阶异常处理第二篇~~ dump进阶之MiniDumpWriter
  • .NET企业级应用架构设计系列之开场白
  • .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • [AHOI2009]中国象棋 DP,递推,组合数
  • [C#]winform部署yolov9的onnx模型