js - 文件处理（转base64，blob，替换base64头部）

这里记录一些日常工作中对文件的一些处理（转base64，blob，替换base64头部）

获取file ：

 // 在vue中的使用 通过selectFile事件获选中的文件
 <input type="file" accept="image/*" multiple="multiple" @change="selectFile($event)" class="inputStyle" />

async selectFile(el) {
    let filesObj = el.target.files;
    console.log('filesObj:', filesObj);
    let fileList = Object.values(filesObj); // 将对象转化为数组
 }

获取到的File格式如下：

1，将获取的file类型转为 base64格式

/**
 * 将file文件转化为base64 使用promise
 * @param file 该文件的file类型
 */
export function fileTransferBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader(); //异步读取
      reader.readAsDataURL(file);
      // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
      reader.onload = (e) => {
        resolve(e.target.result);
      };
      // 失败返回失败的信息
      reader.onerror = (error) => {
        console.warn('file文件转化为base64s失败：', error);
        reject(error);
      };
    });
}

2，将base64格式的数据转为Blob

/**
 * 将以base64的图片url数据转换为Blob  并进行上传
 * @param urlData 用url方式表示的base64图片数据
 */
export function convertBase64UrlToBlob(urlData, filename) {
    if (urlData == '' || !urlData) {
      return console.warn('base64的图片不存在');
    }
    // 以base64的图片url数据转换为Blob
    var arr = urlData.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    let bold = new Blob([u8arr], { type: mime });
    return bold;
}

3，直接将File类型转为Blob

/**
 * 将file数据转换为Blob
 * @param file格式
 */
export function fileToBlob(file) {
  return new Promise((resolve, reject) => {
    // FileReader  异步读取文件
    const reader = new FileReader();
    // readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，
    reader.readAsDataURL(file);
    // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
    reader.onload = (e) => {
      let arr = e.target.result.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      const blob = new Blob([e.target.result], { type: mime });
      resolve(blob);
    };
    // 失败返回失败的信息
    reader.onerror = (error) => {
      console.warn('file数据转换为Blob失败：', error);
      reject(error);
    };
  });
}

4，获取文件(图片视频等)的本地内存地址进行 回显
获取的是blob开头的一个本地内存的访问链接；可以直接用img,video的src属性直接访问；
如下：
blob:http://localhost:8082/ba51f68a-e024-4b9f-af01-08f7c9914e13

/**
 * 获取文件(图片视频等)的本地内存地址 可以直接访问
 * @param file  该文件的文件流
 */
export function createObjectURLFun(file) {
  let url = '';
  if (window.createObjectURL != undefined) {
    // basic
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    // webkit or chrome
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
}

5，替换视频文件的base64头部
（针对mov(ios的录像视频格式)或avi，wmv的视频格式，这类的base64格式使用video的src属性不能直接进行播放；所以要统一替换为mp4格式才能进行正常播放；如果是正常的mp4格式不进行任何处理）

/*
 *对视频预览的处理 替换base64头部后缀 替换的视频文件名如下： mov: quicktime, avi:avi, wmv:x-ms-wmv, m2v:x-matroska等
 * 参数是base64  返回值也是base64格式
 */
export function handleBase64Preview(base64Url) {
  if (!base64Url) {
    return false;
  }
  let needReplaceHeaderList = ['data:video/avi', 'data:video/quicktime', 'data:video/x-ms-wmv', 'data:video/x-matroska'];
  let base64Header = base64Url.split(';')[0];
  let newBase64Url = '';
  if (needReplaceHeaderList.includes(base64Header)) {
    newBase64Url = base64Url.replace(base64Header, 'data:video/mp4'); //替换成MP4
    // newBase64Url = base64Url.replace(/^data:video\/\w+;base64,/, ''); //删除头部
    return newBase64Url;
  }
  return base64Url;
}

6，判断是否是苹果设备

/**
 * 判断是否是苹果设备 是返回true 否则返回false
 * @param 无
 */
export function isIOS() {
  let ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('android') != -1) {
    return false;
  }
  if (ua.indexOf('iphone') != -1) {
    return true;
  }
}