前端文件上传

news2024/11/18 16:44:49

文件上传方式

前端文件上传有两种方式,第一种通过二进制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>

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

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

相关文章

Oracle SQL优化(读懂执行计划 一)

目录 SQL执行计划的作用示例演示执行计划概念介绍执行计划实例DISPLAY_CURSOR 类型DISPLAY_AWR 类型 指标详解 SQL执行计划的作用 示例演示 执行计划概念介绍 执行计划实例 DISPLAY_CURSOR 类型 DISPLAY_AWR 类型 指标详解

Vivado原语模板

1.原语的概念 原语是一种元件&#xff01; FPGA原语是芯片制造商已经定义好的基本电路元件&#xff0c;是一系列组成逻辑电路的基本单元&#xff0c;FPGA开发者编写逻辑代码时可以调用原语进行底层构建。 原语可分为预定义原语和用户自定义原语。预定义原语为如and/or等门级原语…

【电路笔记】-PNP晶体管

PNP晶体管 文章目录 PNP晶体管1、概述2、PNP晶体管电路示例3、PNP晶体管识别1、概述 PNP 晶体管与我们在上一篇教程中看到的 NPN 晶体管器件完全相反。 在这种类型的 PNP 晶体管结构中,两个互连的二极管相对于之前的 NPN 晶体管是相反的。 这会产生正-负-正类型的配置,箭头…

vxe-table配合Export2Excel导出object类型数据{type,count}。表格数据呈现是利用插槽,导出只要count该怎么做

先贴一张数据来&#xff1a; 一、然后是vxe-grid的columns配置&#xff1a; 然后就正常用封装好的Export2Excel就行。 碰到一次在控制台报错&#xff1a; 没复现出来&#xff0c;大概就说是count咋样咋样。 以后碰到的话再说&#xff0c;各位要用的话也注意看看 二、或者 用js…

不知道吧,腾讯云轻量应用服务器使用有一些限制!

腾讯云轻量应用服务器相对于云服务器CVM是有一些限制的&#xff0c;比如轻量服务器不支持更换内网IP地址&#xff0c;不支持自定义私有网络VPC&#xff0c;内网连通性方面也有限制&#xff0c;轻量不支持CPU内存、带宽或系统盘单独升级&#xff0c;只能整个套餐整体升级&#x…

AWS 入门实践-远程访问AWS EC2 Linux虚拟机

远程访问AWS EC2 Linux虚拟机是AWS云计算服务中的一个基本且重要的技能。本指南旨在为初学者提供一系列步骤&#xff0c;以便成功地设置并远程访问他们的EC2 Linux实例。包括如何上传下载文件、如何ssh远程登录EC2虚拟机。 一、创建一个AWS EC2 Linux 虚拟机 创建一个Amazon…

MySQL通过SQL语句进行递归查询

这里主要是针对于MySQL8.0以下版本&#xff0c;因为MySQL8.0版本出来了一个WITH RECURSIVE函数专门用来进行递归查询的 先看下表格数据&#xff0c;就是很普通的树结构数据&#xff0c;通过parentId关联上下级关系 下面我们先根据上级节点id递归获取所有的下级节点数据&#x…

nmcli绑定bond双网卡(active-backup模式)

当前网卡mac地址IP都不一样 创建名为“jbl”的新连接&#xff0c;并将其模式设置为“active-backup” nmcli connection add type bond ifname jbl mode active-backup添加物理网卡到bond(JBL),两个物理网卡添加到新创建的bond连接中 nmcli connection add type bond-slave…

python:布伊山德U检验(Buishand U test,BUT)突变点检测(以NDVI时间序列为例)

作者:CSDN @ _养乐多_ 本文将介绍布伊山德U检验(Buishand U test,BUT)突变点检测代码。以 NDVI 时间序列为例。输入数据可以是csv,一列NDVI值,一列时间。代码可以扩展到遥感时间序列突变检测(突变年份、突变幅度等)中。 结果如下图所示, 文章目录 一、准备数据二、…

Building Systems with the ChatGPT API

Building Systems with the ChatGPT API 本文是 https://www.deeplearning.ai/short-courses/building-systems-with-chatgpt/ 这门课程的学习笔记。 文章目录 Building Systems with the ChatGPT APIWhat you’ll learn in this course Language Models, the Chat Format and…

编译原理之词法分析-语法分析-中间代码生成

编译原理之词法分析-语法分析-中间代码生成 文章说明源码效果展示Gitee链接 文章说明 学习编译原理后&#xff0c;总是想制作自己的一款小语言编译器&#xff0c;虽然对技术不是很理解&#xff0c;学的不是很扎实&#xff0c;但还是想着尝试尝试&#xff1b;目前该效果只是初步…

关于安卓ZXing条码识别(一)引入源码

背景 从0-1引入安卓zxing&#xff0c;实现条码识别 环境 win10 as4 jdk8 引入 首先&#xff0c;官方网站&#xff0c;就是源码。链接 选择你要引入的分支&#xff0c;这里博主选择的是最近更新的分支&#xff0c;如下图&#xff1a; 上图中&#xff0c;1和2都需要引入&am…

eNSP模拟器-单臂路由

设备名/VLANIPPC1192.168.10.2/24PC2192.168.20.2/24VLAN10192.168.10.1VLAN20192.168.20.1 交换机LSW1配置&#xff1a; <Huawei>sys # 进入系统视图 Enter system view, return user view with CtrlZ. [Huawei]vlan 10 # 创建vlan10 [Huawei-vlan10]q [Huawei]…

【实战项目】Boost搜索引擎项目

目录 1. 项目的相关背景 2. 搜索引擎的相关宏观原理 3. 搜索引擎技术栈和项目环境 4. 正排索引 vs 倒排索引 - 搜索引擎具体原理 4.1 正排索引 4.2 目标文档进行分词 4.3 倒排索引 4.4 模拟一次查找的过程&#xff1a; 5. 编写数据去标签与数据清洗的模块 Parser 5.1…

2024春招算法打卡-腾讯WXG

大数相乘 class Solution {public String multiply(String num1, String num2) {String ZERO_STR "0";String ONE_STR "1";// 其中一个为0直接返回0if(ZERO_STR.equals(num1) || ZERO_STR.equals(num2)){return ZERO_STR;}// 其中一个为1直接返回另一…

TCP粘包和分包

TCP的粘包和分包是网络通信中常见的问题&#xff0c;特别是在使用TCP协议进行数据传输时。这两个问题都涉及到TCP在传输数据时的工作机制。 粘包&#xff08;TCP数据合并&#xff09; 粘包指的是发送方发送的多个小数据包在传输过程中被TCP协议合并成一个大的数据包接收&…

AI写真,太火了

昨天晚上&#xff0c;AI大佬吴东子直播讲解了AI写真项目&#xff0c;说21点破局星球会准时放出预约链接&#xff0c;结果21点星球直接崩溃了&#xff0c;只能说这个项目太火爆了 经过星球授权&#xff0c;这里把整个项目的SOP截取一部分给到大家&#xff0c;完整的SOP太长了&am…

mysql集群搭建-读写分离

一.前期准备 1.检查是否存在MySQL安装包 执行命令&#xff1a;rpm -qa | grep -i mysql 删除搜索到的MySQL安装包 执行命令&#xff1a;rpm -e --nodeps 搜索到的mysql 2.创建用户 创建用户组: groupadd mysql 创建用户&#xff1a; useradd -g mysql mysql 二.安装MySQL…

GEE:基于ERA5数据集(U和V风速分量)计算风速的幅值和风向

作者:CSDN @ _养乐多_ 本文将介绍使用Google Earth Engine (GEE)平台提供的API加载ERA5月度数据集,该数据集包含了从1979年至今的全球月度气象数据。然后,定义了一个数据计算函数,用于将U和V风速分量转换为风速的幅值和风向。 结果如下图所示, 文章目录 一、核心函数1…

Rust泛型与trait特性,模仿接口的实现

泛型是一个编程语言不可或缺的机制。 C 语言中用"模板"来实现泛型&#xff0c;而 C 语言中没有泛型的机制&#xff0c;这也导致 C 语言难以构建类型复杂的工程。 泛型机制是编程语言用于表达类型抽象的机制&#xff0c;一般用于功能确定、数据类型待定的类&#xf…