前端文件上传

文件上传方式

前端文件上传有两种方式,第一种通过二进制blob传输(formData传输),第二种是通过base64传输

文件相关的对象

file对象其实是blob的子类

blob对象的第一个参数必须是一个数组,你可以把一个file对象放进去就可以给你转成blob对象

formData可以使一个files以一个二进制的形式传递给后端

fileReader用于把文件(file对象或者blob对象)读成某种形式,如base64,text文本

Blob对象

<template>
  <div>
    <input type="file" name="file" @change="FileChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    
  },
  methods:{
    FileChange(e){
      let file=e.target.files[0]
      console.log(new Blob([file]),'blob')
    }
  }
  
}
</script>

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

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

相关文章

HCS-华为云Stack-计算节点内部网络结构

HCS-华为云Stack-计算节点内部网络结构 图中表示的仅为计算节点是两网口的模式&#xff0c;如果是四网口模式&#xff0c;系统会再自动创建一个网桥出来 图中未画出存储平面和Internal Base平面&#xff0c;它们和tunnel bearing、External OM-样&#xff0c;都是通过trunk0的…

模型驱动架构MDA

MDE 模型驱动工程&#xff08;MDE, Model-Driven Engineering&#xff09;是软件工程的一个分支&#xff0c;它将模型与建模拓展到软件开发的所有方面&#xff0c;形成一个多维建模空间&#xff0c;从而将工程活动建立在这些模型的映射和转换之上。[1] MDE的基本原则是将模型视…

《量子计算:下一个大风口,还是一个热炒概念?》

引言 量子计算,作为一项颠覆性的技术,一直以来备受关注。它被认为是未来计算领域的一次革命,可能改变我们对计算能力和数据处理的理解。然而,随着技术的不断进步和商业应用的探索,人们开始思考,量子计算到底是一个即将到来的大风口,还是一个被过度炒作的概念? 量子计…

空间复杂度(数据结构)

概念&#xff1a; 空间复杂度也是一个数学表达式&#xff0c;是对一个算法在运行过程中临时占用存储空间大小的量度 。 空间复杂度不是程序占用了多少bytes的空间&#xff0c;因为这个也没太大意义&#xff0c;所以空间复杂度算的是变量的个数。空间复杂度计算规则基本跟实践复…

软考73-上午题-【面向对象技术2-UML】-UML中的图4

一、构件图&#xff08;组件图&#xff09; 1-1、构件图的定义 展现了&#xff0c;一组构件之间的组织和依赖。 构件图专注于系统的静态实现图。 构件图与类图相关&#xff0c;通常把构件映射为一个、多个类、接口、协作。 【回顾】&#xff1a; 类图展示了一组对象、接口、…

C++之map与set的使用与原理+拓展avl树(详解)

前言&#xff1a;map和set是C里面的两种常用STL容器&#xff0c;他们被设计为关联式容器&#xff0c;这两个容器存储的元素都是唯一的&#xff0c;并且每个元素与键&#xff08;key&#xff09;相关联&#xff0c;简单来说就是两个存储不重复元素的容器。那就有人有疑问了&…

PostgreSQL中In, Exists在SQL查询中到底有无区别

前言 SQL查询当中&#xff0c;In和Exists子查询到底有无区别&#xff1f;记得很多年以前&#xff0c;确实是有相关的使用戒条的&#xff0c;或者说存在一些使用的惯用法。试图完全抹开两者的区别&#xff0c;就有点过了。 两者的主要区别&#xff1a; 从目的上讲&#xff0c…

微信小程序开发系列(二十七)·小程序生命周期详细介绍

目录 1. 小程序生命周期介绍 2. 应用生命周期 3. 页面生命周期 1. 小程序生命周期介绍 一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成。 应用生命周期&#xff1a;是指应用程序进程从创建到消亡的整个过程。 小程序的生命&#…

python——By.ID/By.NAME

一、通过元素的id属性来定位元素 from selenuim import webdriver from selenuim.webdriver.common.by import Bydriver webdriver.Chrome() driver.maximize_window() driver.get(http://xxx) time.sleep(3)# 通过By.ID找到唯一页面元素后&#xff0c;输入abcd driver.find_…

简析内部审计数字化转型的方法和路径

简析内部审计数字化转型的方法和路径 内部审计是一种独立的、客观的确认和咨询活动&#xff0c;包括鉴证、识别和分析问题以及提供管理建议和解决方案。狭义的数字化转型是指将企业经营管理和业务操作的各种行为、状态和结果用数字的形式来记录和存储&#xff0c;据此再对数据…

华为OD机试 - 模拟数据序列化传输(Java JS Python C C++)

题目描述 模拟一套简化的序列化传输方式,请实现下面的数据编码与解码过程 编码前数据格式为 [位置,类型,值],多个数据的时候用逗号分隔,位置仅支持数字,不考虑重复等场景;类型仅支持:Integer / String / Compose(Compose的数据类型表示该存储的数据也需要编码)编码后数…

VSCode安装C语言编译环境

目录 一、在vscode下载C/C扩展 二、配置gcc环境 1.访问网站&#xff1a;https://sourceforge.net/projects/mingw-w64/files/ 2.解压并复制bin目录 三、配置gcc环境 四、在cmd检查是否配置成功 五、vscode配置gcc环境 六、在vscode运行C文件 运行.c代码 七、在vscode运…

JVM-2

目录 1.虚拟机类加载机制 2.JVM常见回收算法 2.1标记清除算法 2.2标记整理算法 2.3标记复制算法 3.分代垃圾回收机制 新生代收集 第一次垃圾回收 第二次垃圾回收 第N此垃圾回收 老年代收集 4.补充 Stop The World Java的对象结构 1.虚拟机类加载机制 双亲委派模式…

理解STM32的低功耗模式

低功耗模式简介 TM32的低功耗模式是特别设计来减少微控制器在不活跃状态下的能耗。这些模式允许STM32在保持核心功能的同时尽可能减少电力消耗&#xff0c;适合用在电池供电或需长期运行的场景。理解各种低功耗模式如何节能&#xff0c;主要包括以下几个方面&#xff1a; 关闭…

DenseNet笔记

&#x1f4d2;from ©实现pytorch实现DenseNet&#xff08;CNN经典网络模型详解&#xff09; - 知乎 (zhihu.com) 是什么之 DenseBlock 读图&#xff1a; x0是inputH1的输入是x0 (input)H2的输入是x0和x1 (x1是H1的输出) Summary&#xff1a; 传统卷积网&#xff0c;网…

C语言——函数指针——函数指针数组 (详解)

函数指针数组 函数指针数组的作用 函数指针数组是一个数组&#xff0c;其中的每个元素都是一个函数指针。函数指针是指向函数的指针变量&#xff0c;可以用来调用相应的函数。函数指针数组的作用是可以根据需要动态地选择并调用不同的函数。 函数指针数组的使用场景有很多&…

C++ Standard Library简介

目录 ​编辑 引言&#xff1a; Boost C Libraries&#xff1a;截至本文编写时间最新版本 1.84.0 STL源码分析&#xff1a; C STL源码分析&#xff08;一&#xff09;&#xff1a;STL体系结构和一些基础知识 libc&#xff1a; 概述 libc 入门 现状 平台和编译…

BetterDisplay for mac V2.2.5 强大的mac显示器管理开源工具

BetterDisplay是Mac OS 一个很棒的工具&#xff01; 它允许您将显示器转换为完全可扩展的屏幕 管理显示器配置覆盖 允许亮度和颜色控制 提供 XDR/HDR 亮度升级&#xff08;Apple Silicon 和 Intel Mac 上兼容的 XDR 或 HDR 显示器的额外亮度超过 100% - 多种方法可用&#x…

【Linux】文件系统扩展——软硬链接

目录 对文件建立软硬链接 软链接 硬链接 对文件建立软硬链接 对 log 文件建立软链接&#xff1a; ln -s log log.soft.link 对 test 文件建立硬链接&#xff1a; ln test test.hard.link log.soft.link 和 test.hard.link 在 Linux 中都只是文件名&#xff0c;为了方便…

springboot整合shiro的实战教程(三)

文章目录 授权实现0.页面资源授权2.代码授权方式3.方法调用授权4.授权数据持久化5. 创建dao方法6.实现service接口7.修改自定义realm 授权实现 0.页面资源授权 <%taglib prefix"shiro" uri"http://shiro.apache.org/tags" %><shiro:hasAnyRoles…