【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】

目录

  • 前端文件操作与文件上传
  • 前端接受后端传输文件指南

前端文件操作与文件上传

一、前端文件上传有两种思路:

  1. 二进制blob传输:典型案例是formData传输,相当于用formData搭载二进制的blob传给后端
  2. base64传输:转为base64传输,后端再将base64转回来。简便、耗时

二、与文件相关的对象

  1. files:通过input标签读过来的文件对象,是blob的子类。
  2. blob:不可变的二进制内容,包含很多操作方法,切片上传、断点续传都是基于blob的
  3. formData:用于后端传输的对象。files是一个前端的对象,不能直接传给后端,所以我们需要一个前后端都认可的载体来传递文件,这个载体就是formData。formData就像一辆汽车用来搭载files,这样才能让文件以二进制的形式传到后端
  4. fileReader:多用于把文件读取为某种形式(如base64、text文件)直接传给后端

三、file参数、blob切割文件、FileReader将文件转成base64,浓缩图/文本预览:

<template><div><input type="file" name="file" @change="fileChange" /><!-- 缩略图,文本预览 --><img style="width:200px;" :src="imgbase64" /><button @click="submit">提交</button></div>
</template><script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {name: 'HelloWorld',data() {return {imgbase64: "",}},methods: {fileChange(e) {let file = e.target.files[0]// files是个数组_fileObj = file;// file常用属性:size(大小)、type(类型)、name(文件名)if (file.size > 10 * 24 * 24) {alert("文件不能大于十兆")}if (file.type !== 'video/mp4') {alert("必须是mp4")}// 使用blob的slice方法可以切割文件let _sliceBlob = new Blob([file]).slice(0, 5000);// 切割二进制的0-5000位// 将切割后的Blob对象转成File对象(第二个参数是文件名),之后就可以上传切割后的File对象let _sliceFile = new File([_sliceBlob], "test.png");//将File对象或者Blob对象转成base64或textlet fr = new FileReader();fr.readAsDataURL(_sliceFile);// readAsDataURL是转成base64的方法let self = this;fr.onload = function () {// base64是异步的转换,通过onload方法获得转换结果self.imgbase64 = fr.result// 直接将转换结果赋值给img的src,设置src的大小即可获得浓缩图console.log(fr.result)// 打印结果见下图一}},async submit() {// 这部分的代码后面讲let _formData = new FormData();_formData.append("user", "asdasd");_formData.append("file", _fileObj)axios.post("/xx", _formData);}}}
}
</script>

图一:上传结果打印
四、formData:不仅可以搭载文件,还可以搭载文字、input的其他输入

<form action="xxx" method="post">默认情况下提交为query参数</from>
<form action="xxx" method="post" enctype="multipart/form-data">enctype指定提交为formData</from>

五、文件上传:将blob转成FormData上传

async submit() {let _formData = new FormData();_formData.append("user", "asdasd");_formData.append("file", _fileObj)axios.post("/xx", _formData);
}

通过查看网络可以发现:

  1. 上传内容:
    请添加图片描述
  2. 请求头content-Type指定了传输内容为form-data,且boundary指定了分割符
    请添加图片描述
  3. 分隔了两个内容(下面还有一个分割线,即以分割线结尾)
    请添加图片描述
    六、转换关系
    请添加图片描述
  4. 我们直接拿到的是file对象,file对象可以转换成Blob对象,Blob对象也可以转成file对象
  5. file、blob都可以根据FileReader读成base64或text文本
  6. 通过接口传输给后端时,只能传输base64、text文本、formData,所以,如果不把file、blob通过FileReader读成base64或text文本,那么就需要把file或者blob append到formData才能通过接口传输

七、具体功能

  1. 单文件上传(详见前述代码)
  2. 多文件上传:
<template><div><input type="file" name="file" @change="fileChange" multiple /><span v-for="item in imgList">{{ item.name }}</span><button @click="submit">提交</button></div>
</template><script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {name: 'HelloWorld',data() {return {imgList: [],}},methods: {fileChange(e) {//多文件上传// multiple的多文件上传其实很不友好,需要用户在选择文件时按住ctrl多选,否则就会变成单选// 所以使用imgList数组将用户每次选择的内容都push进去if (e.target.files.length > 1) {this.imgList.concat(e.target.files)} else {this.imgList.push(e.target.files[0]);}//切片上传_fileObj = e.target.files[0]},async submit() {// 遍历,一个一个上传this.imgList.forEach((item) => {let _formData = new FormData();_formData.append(item.name + "file", item)axios.post("/xx", _formData);})}}
}
</script>
  1. 切片上传
<template><div><input type="file" name="file" @change="fileChange" multiple /><div>{{ precent }}%</div><button @click="submit">提交</button></div>
</template><script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {name: 'HelloWorld',data() {return {precent: 0}},methods: {fileChange(e) {//切片上传,在上传的时候进行切片,文件改变时只赋值_fileObj = e.target.files[0]},async submit() {let size = 2 * 1024 * 1024;// 每次切片的大小,片为2mlet fileSize = _fileObj.size;let current = 0;// 当前已经传了多少// 断点续传,永久记录中断的地方,下次上传时直接从断点开始传//localStorage.setItem(_fileObj.name, current);while (current < fileSize) {let _formData = new FormData();_formData.append(_fileObj.name, _fileObj.slice(current, current + size))await axios.post("http://localhost:4000/upload",_formData)// 进度条可以用axios的onUploadProgress方法,且发送切片时可以并行发送请求,后续可以自行优化this.precent = Math.min((current / fileSize) * 100, 100)current += size;}}}
}
</script>

File System Access API 允许直接读取、写入或保存对用户设备上的文件和文件夹的更改。从 Chrome 86 开始支持 File System Access API,目前只有基于 Chromium 系列的浏览器全面支持,Safari 部分支持(支持读取,不支持写入和保存),而 Firefox 未支持。

前端接受后端传输文件指南

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/8341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于StatefulSet控制器在Kubernetes上部署MySQL一主多从

一、前提--StatefuSet特性 1.1 有状态的节点控制器 -- StatefulSet 及其网络状态 容器的解决方案是针对无状态应用场景的最佳实践&#xff0c;但对于有状态应用来说&#xff0c;就并非如此了。Kubernetes 用 StatefulSet 解决了有状态应用编排的问题&#xff0c;本文我们就来…

短视频账号没流量怎么办?三个方法提高播放量!沈阳短视频剪辑线下培训

做短视频的最怕什么&#xff1f; 最怕没流量啊&#xff0c;一旦没有流量&#xff0c;就吸引不到粉丝&#xff0c;更别提变现了&#xff01; 但是&#xff0c;不同的短视频账号遇到没流量的情况是不同的。有的是新账号&#xff0c;始终没有流量&#xff1b;而有的是做了很久的账…

旧衣回收小程序开发:线上回收模式成为行业发展趋势

当下人们生活水平在不断提高&#xff0c;对衣服的要求也在增加&#xff0c;更新速度越来越快&#xff0c;闲置下来的旧衣服也在增加&#xff0c;为了减少浪费&#xff0c;旧衣回收行业受到了大众的关注。旧衣回收对我国资源回收、环境保护具有非常大的意义。 在互联网时代下&a…

第9篇:创建Nios II工程之读取Switch的值<二>

Q&#xff1a;上一期我们完成了Quartus硬件工程部分&#xff0c;本期我们创建Nios II软件工程这部分。 A&#xff1a;创建完BSP和Nios II Application之后&#xff0c;在source文件main.c中添加代码&#xff1a;system.h头文件中新增了Switch PIO IP的硬件信息&#xff0c;包括…

Windows cmd bat之特殊符号及变量

cmd 常用变量 bat批处理常用命令 %1~%9表示拖入文件&#xff08;%0以外的输入文件&#xff09;,%0表示批处理文件本身 %0~%1字母意思基本相同&#xff0c;不区分大小写 ::打印当前窗口地址 echo “%cd%” %0 获取当前文件路径 %~d0 …

最新AI实景自动无人直播软件:智能讲解、一键开播,享受24小时自动专业直播体验

在现今数字化时代&#xff08;ai无人直播下载&#xff1a;hzzxar&#xff09;直播行业越来越受到人们的关注和喜爱。随着人工智能的不断发展&#xff0c;AI实景自动无人直播软件应运而生&#xff0c;为商家提供了更便捷、高效的直播方式。本文将介绍如何利用这一创新技术&#…

融知财经:期货交易原理是怎样的?期货交易有哪些特征?

期货的原理是基于对某期货品种未来走势的判断而形成对其合约的买卖交易&#xff0c;因此期货可以解释为买涨或买跌。买涨&#xff0c;即看多交易&#xff0c;预期某期货品种未来价格上涨而进行的买入开仓交易&#xff1b;买跌&#xff0c;即看空交易&#xff0c;预期某期货品种…

简站WordPress主题

简站WordPress主题是一种专为建立网站而设计的WordPress模板&#xff0c;它旨在简化网站建设过程&#xff0c;使得用户能够更容易地创建和管理自己的网站。简站WordPress主题具有以下特点&#xff1a; 易用性&#xff1a;简站WordPress主题被设计为简单易用&#xff0c;适合各…

redisson 使用脚本实现将一个队列的元素弹出并推入另一个队列的原子操作

脚本逻辑&#xff1a; 从队列1弹出元素如果存在值则推入队列2否则返回null RScript script redissonClient.getScript(); final String scriptText """local value redis.call(lpop, KEYS[1]);if value thenredis.call(rpush, KEYS[2], value);return valu…

Android广播机制简介

文章目录 Android广播机制简介广播的基本概念广播的类型广播的使用场景Android广播的优缺点优点缺点 使用Android广播的一些最佳实践: Android广播机制简介 Android广播是一种轻量级的消息传递机制&#xff0c;用于应用程序之间或系统与应用程序之间进行通信。它类似于订阅-发…

java多线程,synchronized

Java多线程——synchronized使用详解_synchronized用法-CSDN博客

squeeze的用法

squeeze是压缩张量的命令 import torch a torch.randn(1,3) print(a) print(a.shape) 比如说squeeze&#xff08;&#xff1f;&#xff09;括号里是啥 就是在哪个维度上删除维度为1 之后的结果 比如上上面那个里子 a是&#xff08;[[]]&#xff09; 但是在下面那个例子中d…

【智能安防监控补光灯调光芯片方案】单节锂电降压恒流驱动芯片FP8013 最大输出3A体积小/静态功耗低/效率高/支持无频闪调光

文章目录 文章目录 前言 一、pandas是什么&#xff1f; 二、使用步骤 1.引入库 2.读入数据 总结 前言 随着智能安防监控技术的不断发展&#xff0c;补光灯的关键性能也日益受到重视。为了提供更好的夜间监控效果&#xff0c;我们需要一种高效、稳定的调光芯片来驱动补光灯的亮…

《米小圈动画古诗》—“诗情画意”也不是很难嘛!

创新是一个民族的灵魂和希望&#xff0c;是一个国家兴旺发达的不竭动力&#xff0c;而学习古诗词就是丰富孩子想象力、培养学生创新精神最有效的方法。因为&#xff0c;诗的韵律&#xff0c;情绪跌宕&#xff0c;可以让孩子在大脑中形成一幅完整的图画。 诗歌带给人最美妙的体…

python selenium 滑动后获取动态追加的元素

在使用Python的Selenium库进行网页自动化时&#xff0c;如果需要滑动页面并获取动态追加的元素&#xff0c;可以使用以下步骤&#xff1a; 使用Selenium定位到滑动条元素。 执行滑动操作&#xff0c;可以调用execute_script方法来模拟滑动。 使用WebDriverWait和expected_co…

java垃圾收集器详解

垃圾收集器 Serial Serial收集器是Java虚拟机中最基本的垃圾回收&#xff08;GC&#xff09;收集器之一&#xff0c;主要特点是单线程的垃圾回收。虽然它只使用一个线程进行垃圾回收&#xff0c;但Serial收集器在单CPU环境或者小内存资源的情况下表现得相当高效。由于其单线程…

PMP考试没过怎么办?如何补考?(附复核流程)

最近刷小红书&#xff0c;看很多人都在晒PMP通过的成绩截图&#xff0c;一方面为大家开心&#xff0c;终于拿到了期盼已久的PMP&#xff0c;但同时也有宝子发挥失常没通过考试&#xff0c;所以这期针对没考过的宝子们&#xff0c;出一期复盘文章&#xff0c;无论结果如何&#…

今天重新使用natapp发现连不上了

我配置了natapp.ini以后还是这种情况 然后发现使用命令是可以的 直接在natapp页面中使用cmd 直接用命令 natapp -authtoken9ab6b9040a629626

智能可编程脉冲电源:为电源行业带来前所未有的创新

智能可编程脉冲电源是一种具有高精度、高可靠性、节能降耗和可编程性强等特点的电源设备。它主要由脉冲发生器、功率调节电路和控制电路等组成。脉冲发生器产生的脉冲信号可以驱动功率调节电路&#xff0c;实现对电源输出的电压和电流的精确控制。通过控制电路对脉冲信号进行调…

汽车早报|赛力斯称就山西M7事故不实信息报案 消息称苹果正接触美国电动车新创 | 最新快讯

中汽协&#xff1a;3月汽车商品进出口总额为238.7亿美元&#xff0c;环比增长19.4% 据中国汽车工业协会整理的海关总署数据显示&#xff0c;截止到今年3月&#xff0c;汽车商品进出口总额同比小幅增长。2024年3月&#xff0c;汽车商品进出口总额为238.7亿美元&#xff0c;环比…