前端文件上传

news/2024/6/20 19:41:16/文章来源:https://blog.csdn.net/web5219/article/details/137112553

介绍

在实际工作中前端相互传输文件时,前端会采用二进制,文本格式或者base64传输,要了解前端文件格式有哪些和这些格式之间怎么转换,先熟悉以下概念:

  1. files:文件对象的API,有很多对文件的操作方法,可在w3c官方文档查看

  2. Blob:不可变的二进制对象API,包含很多操作方法,和file基本有一样的操作方法

  3. FormData:用于和后端传输文件的对象,是一种采用键值对传递数据的API

  4. FileReader:多用于把文件读取为某种形式的API,如base64,txt文本

下面这张图展示文件在前端的各种格式的转换
在这里插入图片描述

文件上传

模板部分

<div><!-- multiple 多文件上传 --><input type="file" @change="fileChange" multiple /><img v-if="imagebase64" :src="imagebase64" /><button @click="submit">提交</button></div>

单文件上传

let imagebase64 = ref();
let _fileObj = ref();```
const fileChange = (e: any) => {// file对象// console.log(e.target.files[0]);let file = e.target.files[0];_fileObj.value = file;if (file.slice > 10 * 24 * 24) {alert("文件不能大于10兆");}/*转换成blob对象new Blob([file])new Blob([file]).slice(0,5000) 切割文件blob对象切割方法slice*/let _sliceBlob = new Blob([file]).slice(0, 5000);// 转换为file对象,需要两个参数,文件和文件名// let _sliceFile = new File([_sliceBlob], "test");let _sliceFile = new File([file], "test");// FileReader可以做缩略图let fr = new FileReader();// 转换为base64fr.readAsDataURL(_sliceFile);/* 文件读取时异步,需要监听onload事件 */fr.onload = function () {// fr.result 最后的结果// console.log(fr.result);// console.log(imagebase64.value);imagebase64.value = fr.result;};
};
//提交
const submit = async () => {let fromData = new FormData();// 单文件上传fromData.append("file", _fileObj.value);// 发请求// axios.post('/xxx',fromData)
);

多文件上传

// 多文件上传
let fileList = ref([]);
const fileChange = (e: any) => {// 多文件上传if (e.target.files.length > 1) {fileList.value.push(e.target.files);} else {fileList.value.push(e.target.files[0]);}
};
const submit = async () => {let fromData = new FormData();// 多文件上传fileList.value.forEach((item) => {let fromData = new FormData();fromData.append(item.name + "file", item);});// 发请求// axios.post('/xxx',fromData)
}
};

切片上传

  let _fileObj = ref();let precent = ref(0);// 切片上传const fileChange = (e: any) => {// 切片上传_fileObj = e.target.files[0];
};
const submit = async () => {// 切片上传// 分割文件的大小let size = 2 * 1024 * 1024;// 获取文件的总大小let fileSize = _fileObj.value.size;// 开始进度let current = 0;fromData.append(_fileObj.value.name, _fileObj.value.slice(current, current + size));while (current < fileSize) {await axios.post("http://localhost:4000/upload",fromData);//百分比进度precent.value = Math.min((current / fileSize) * 100, 100);current += size;}
};

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

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

相关文章

每日一题(力扣136):只出现一次的数字

利用哈希&#xff1a;时间复杂度O(n)&#xff0c;空间复杂度O(n) class Solution { public:int singleNumber(vector<int>& nums) {if (nums.size() 1){return nums[0];}unordered_map<int, int> map;int len nums.size();for (int i 0; i < len; i){if…

OpenHarmony实战:使用宏、std::bind 巧妙实现进出函数日志打印

背景 我们始终渴望了解模块的调用、时序逻辑&#xff0c;每个人都会轻易地想到在函数的入口打印一条进入 enter 相关的日志&#xff0c;在函数的出口打印一条离开 leave 相关的日志。不能有遗漏&#xff0c;我们会复制这条日志到所有关心的函数中&#xff0c;为了表明是哪个模…

备考ICA----Istio实验14---出向流量管控Egress Gateways实验

备考ICA----Istio实验14—出向流量管控Egress Gateways实验 1. 发布测试用 pod kubectl apply -f istio/samples/sleep/sleep.yaml kubectl get pods -l appsleep2. ServiceEntry 创建一个ServiceEntry允许流量访问edition.cnn.com egressgw/edition-ServiceEntry.yaml api…

HDLbits 刷题 -- Always case

学习&#xff1a; Case statements in Verilog are nearly equivalent to a sequence of if-elseif-else that compares one expression to a list of others. Its syntax and functionality differs from the switch statement in C. always (*) begin // This is a comb…

【PostgreSQL】用pgAdmin轻松管理PostgreSQL

pgAdmin 是一个功能强大的开源Web界面工具&#xff0c;专为管理和维护PostgreSQL数据库而设计。它提供了一个直观的图形界面&#xff0c;使得用户能够轻松地执行复杂的数据库操作&#xff0c;如查询、更新、导入/导出数据以及管理数据库对象等。pgAdmin 支持几乎所有的PostgreS…

gpt-llm-trainer 出炉

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

文件搜索案列 --java

目标&#xff1a; 搜索盘符下面符合要求的文件名&#xff0c;并可以选择是否打开该文件 代码&#xff1a; import java.io.File; import java.io.IOException; import java.util.Arrays; import java.util.Scanner;public class findQQ {public static void main(String[] a…

【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图

在本文中&#xff0c;我们将使用日本新宿站的室内地图数据&#xff0c;并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在数字孪生平台。 使用的数据 这次&#xff0c;我们将使用日本空间信息中心发布的“新宿站室内地图开放数据”的集成版本&#xff08;ShapeFile&#…

OSPF基本原理和概念

文章目录 背景知识OSPF协议概述&#xff1a;OSPF区域的表示OSPF 骨干区域 –区域0OSPF 非骨干区域 -非0区域OSPF的五种区域类型OSPF工作原理OSPF 的报文类型OSPF邻居表中的七个状态 总结 背景知识 一台路由设备如何获取其他网段的路由&#xff0c;并加入到路由表中 直连路由 …

python对接百度云车牌识别

注册百度智能云&#xff0c;选择产品服务。 https://console.bce.baidu.com/ 每天赠送200次&#xff0c;做开发测试足够了。 在应用列表复制 AppID , API Key ,Secret Key 备用。 SDK下载地址 https://ai.baidu.com/sdk#ocr 下载SDK文件&#xff0c;解压&#xff0c;…

【java9】java9新特性值之集合不可变实例工厂方法

Java9为集合接口List、Set、Map提供了创建不可变实例的工厂方法。这些工厂方法为便利而生&#xff0c;以简单的方式创建这些集合的不可变实例。 Java9之前创建不可变集合 在Java9之前&#xff0c;创建不可变集合通常需要通过其他方式&#xff0c;比如使用Collections.unmodif…

基于PHP的校园招聘管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的校园招聘管理系统 一 介绍 此校园招聘管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为个人用户&#xff0c;企业和管理员三种。 技术栈&#xff1a;phpmysqlbootstrapphpstudyvscode 二…

【CSS】CSS定位元素

CSS定位元素 1.标准流 默认情况下&#xff0c;元素都是按照标准流进行排布&#xff0c;互相不存在层叠现象标准流中&#xff0c;可以使用margin和padding对元素进行定位&#xff0c;其中margin可以使用负数缺点 设置一个元素的定位&#xff0c;会影响其他盒子的定位效果不能实…

内容营销新手指南:Kompas.ai的智能起步策略

内容营销是当今企业获取客户、建立品牌认知和忠诚度的关键手段。然而&#xff0c;对于刚刚踏入这一领域的新手来说&#xff0c;内容营销的世界可能会显得既广阔又复杂。从内容创作到发布&#xff0c;再到分析和优化&#xff0c;每一步都充满了挑战。本文旨在为内容营销新手提供…

蓝桥杯算法题——暴力枚举法

先估算这个数小于3的50次方 cnt0 for i in range(50):for j in range(50):for k in range(50):a3**ib5**jc7**kif a*b*c<59084709587505:cnt1 print(cnt-1)#当ijk都为0时&#xff0c;a*b*c1不是幸运数字所以要减去

突破编程_前端_JS编程实例(分割窗体组件)

1 开发目标 分隔窗体组件旨在提供灵活的窗体分隔功能&#xff0c;支持横向分割与纵向分隔两种类型&#xff0c;并具备拖拽调整窗体比例的功能&#xff0c;同时提供最小比例设置&#xff0c;以防止窗体被过度缩小&#xff1a; 2 详细需求 2.1 分隔窗体类型 &#xff08;1&…

3D密集面部对齐项目 | 基于Pytorch实现的快速+准确+稳定的3D面部对齐算法

项目应用场景 可以应用于人脸面部三维特征点的提取 人脸面部的三维重建&#xff0c;项目的特点是基于 Pytorch 实现、快速、准确、稳定 项目效果&#xff1a; 项目流程 > 具体参见项目内README.md (1) 构建 sh ./build.sh (2) 执行示例 # 1. running on still i…

【Servlet】服务器内部转发以及客户端重定向

文章目录 一、服务器内部转发&#xff1a;request.getRequestDispatcher("...").forward(request, response);二、客户端重定向&#xff1a;response.sendRedirect("");三、服务器内部转发代码示例四、客户端重定向代码示例 一、服务器内部转发&#xff1a…

TSINGSEE青犀智慧工厂视频汇聚与安全风险智能识别和预警方案

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…

Reasoning on Graphs: Faithful and Interpretable Large Language Model Reasonin

摘要 大型语言模型(llm)在复杂任务中表现出令人印象深刻的推理能力。然而&#xff0c;他们在推理过程中缺乏最新的知识和经验幻觉&#xff0c;这可能导致不正确的推理过程&#xff0c;降低他们的表现和可信度。知识图谱(Knowledge graphs, KGs)以结构化的形式捕获了大量的事实…