IOS上传相册图片没有反应

一、前言

  有段时间没有写博客了，正好今天在写项目时出现出现一个问题，在此记录一下，希望以后不会再反同样的错误。

二、问题描述

  在项目开发中我们不免会遇到图片上传的问题，我们会和后端开发人员上联以何种图片方式上传图片（base64、File文件流等），这里我们公司用的是File文件流的方式上传的图片。

1.修改前

  在上传图片之前，最后进行一下图片压缩，提高上传速度，这是很有必要的。个人推荐使用图片压缩插件，方便简洁、易操作。

1.安装

npm install lrz --save

2.文件调用

import lrz from "lrz";
import { dataURLtoFile } from "@/util/util.js";
/* 此处省略 */
lrz(所选文件的file)
      .then(res => {
          /* 调用自定义的base64转file的方法 */
          let resultFile = dataURLtoFile(res.base64, "file");
          console.log(resultFile )
          /*后续执行上传接口，再次省略，根据自己的业务需求，自行编写*/
        })
        .catch(error => {
          errorToast(error);
        });

注意：在调用lrz压缩成功之后，我再次调用了一个自定义的base64转file的方法dataURLtoFile()。

3.dataURLtoFile()

// 将base64转换为文件
export const dataURLtoFile = (dataurl, filename) => {
  console.log(filename);
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
};

4.运行结果
  我们在ios11以上版本运行正常，android版本也运行正常，但是在ios11以下发现能够正常调起相册，但是就是不执行我的上传接口，好气人哦o(╥﹏╥)o。经过我多次的求证，发现只要修改dataURLtoFile()里面的方法即可。

2.修改后

export const dataURLtoFile = (dataurl, filename) => {
  console.log(filename);
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  //return new File([u8arr], filename, { type: mime });
  return new Blob([u8arr], { type: mime });    //兼容低版本的ios系统
};

完美解决，各版本的ios系统均可调起上传接口(^▽)。

三、总结

  希望对大家有所帮助，谢谢