前端文件上传

介绍

在实际工作中前端相互传输文件时，前端会采用二进制，文本格式或者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