通过input type=file 上传，获取data:base64格式文件,blob

思路：

1. 通过 input 获取到需要上传的文件;
2. 通过事件获取到文件信息，利用 blob() 将文件转化成blob类型；
3. 利用 FileReader 对象的 readAsDataURL() 方法获取文件的 data: Base64；

一、HTML

 <input type="file" @change="filechange"/>

H5 input type类型拓展： 参考菜鸟教程 类型大全

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	定义复选框
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据

二、js

// 上传文件
    filechange(e){
      const resultFile = e.target.files; // input 获取的文件列表
      // console.log(`resultFile`, resultFile)
      
      const aBlob = new Blob([resultFile[0]],{type:'video/mp4'}) // 指定转换成blob的类型
      // console.log(`aBlob`, aBlob)
      
      const reader = new FileReader(); // 3 新建 FileReader 对象,用于操作文件
      // console.log(`reader`, reader) 
      reader.onload=(ev)=>{
        const base64Url = ev.target.result; // 5 base64内容
      }
      reader.readAsDataURL(aBlob) // 4 将文件转换成指定类型的数据
    },

补充:
MDN 拓展一：Blob 完整文档

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

// 语法
var aBlob = new Blob( array, options );
// 示例
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

array
是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
type，默认值为 “”，它代表了将会被放入到blob中的数组内容的 MIME类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持blob中保存的结束符不变

补充：如果不知道当前文件的 MIME类型，可以通过打印文件的type熟悉查看。

MDN 拓展二：FileReader 完整文档

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 对象的方法：

FileReader.abort() 
//中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer()
// 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString() 
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL()
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
FileReader.readAsText()
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

本地文件预览请查看下篇文章https://blog.csdn.net/qq_45301392/article/details/115627872