H5实现文件上传

一、基本思路

1、input读取本地文件
2、FileReader获取文件数据
3、post请求上传数据

二、实现

核心代码vue+ts

<input type="file" class="choose-file" @change="inclusionImg">

inclusionImg(e: any){
  const file = e.target.files[0];
  // FileReader的实例
  const reader = new FileReader();
  // 读取文件内容，以base64格式返回结果
  const fileData = reader.readAsDataURL(file);
  // 读取文件成功回调
  reader.onload = () => {
    this.fileData = reader.result;
    console.log(file, this.fileData);
  };
  // 读取文件失败回调
  reader.onerror = () => {
    this.readErr = '文件读取失败，请重试';
    setTimeout(() => {
      this.readErr = '';
    }, 2000);
  }
}

file对象为
{
	name： '', //文件名称，只读字符串。只包含文件名，不包含任何路径信息。
	size： 8768, //文件大小，按字节数(bytes)计算，只读的64位整数。
	type: '' //文件的MIME类型，只读字符串，当类型不能确