vue之vant的h5项目在使用上传图片功能时--ios失败问题

问题描述：

框架相关描述：

vue之vant的h5项目在使用上传图片功能时–ios失败问题；

问题业务场景描述：

1. 在排查问题时，用ios相机拍照的照片（直接调用ios相机拍的照片）进行上传会显示上传失败，而安卓都不会
2. 刚开始我以为是图片格式的问题：（看这两种的图片在ios类型是不一样的HEIF和Jpeg，jpeg的格式上传没问题，但是HEIF的上传就会提示上传失败）
   
   

解决方案：

<van-uploader :before-read="beforeRead"
                                      :after-read="afterRead"
                                      :delete="deleteImg" slot="input"
                                      v-model="imageUrls"
                                      :max-count="3"/>

1. 最终的解决方案是：在afterRead时，将图片进行转流压缩
2. 实现代码源码：

hanleImage(file) {
                  let self = this;
                  // 看支持不支持FileReader
                  if (!file || !window.FileReader) return;
                  // 创建一个reader
                  let reader = new FileReader();
                  // 将图片2将转成 base64 格式
                  reader.readAsDataURL(file);
                  // 读取成功后的回调
                  reader.onloadend = function () {
                        let result = this.result;
                        let img = new Image();
                        img.src = result;
                        console.log('this.result.lengtht:' + this.result.length);
                        //判断图片是否大于512K,是就直接上传，反之压缩图片   512000
                        if (this.result.length <= 500 * 1024) {
                              console.log('执行此小方案：');
                              self.headerImage = this.result;
                              //进行转流：
                              let file = self.dataURLtoFile();
                              console.log("转流之后的值-file：" + file.name);
                              //处理图片方案：
                              let uploadImgUrlData = upLoaderImg(file);
                              uploadImgUrlData
                                    .then(result => {
                                          self.imageUrlsData.push(result.data);
                                          console.log(result.data);
                                          file.status = 'success';
                                          file.message = '上传成功';
                                    })
                                    .catch(error => {
                                          console.error(error);
                                          file.status = 'failed';
                                          file.message = '上传失败';
                                    });
                        } else {
                              console.log('执行此大方案：');
                              img.onload = function () {
                                    //压缩图片
                                    let data = self.compress(img);
                                    self.headerImage = data;
                                    //进行转流：
                                    let file = self.dataURLtoFile(this.headerImage);
                                    //处理图片方案：
                                    let uploadImgUrlData = upLoaderImg(file);
                                    uploadImgUrlData
                                          .then(result => {
                                                self.imageUrlsData.push(result.data);
                                                console.log(result.data);
                                                file.status = 'success';
                                                file.message = '上传成功';
                                          })
                                          .catch(error => {
                                                console.error(error);
                                                file.status = 'failed';
                                                file.message = '上传失败';
                                          });
                              };
                        }
                  };

            },
            // 压缩图片
            compress(img) {
                  let canvas = document.createElement("canvas");
                  let ctx = canvas.getContext("2d");
                  //瓦片canvas
                  let tCanvas = document.createElement("canvas");
                  let tctx = tCanvas.getContext("2d");
                  // let initSize = img.src.length;
                  let width = img.width;
                  let height = img.height;
                  //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
                  let ratio;
                  if ((ratio = (width * height) / 4000000) > 1) {
                        // console.log("大于400万像素");
                        ratio = Math.sqrt(ratio);
                        width /= ratio;
                        height /= ratio;
                  } else {
                        ratio = 1;
                  }
                  canvas.width = width;
                  canvas.height = height;
                  // 铺底色
                  ctx.fillStyle = "#fff";
                  ctx.fillRect(0, 0, canvas.width, canvas.height);
                  //如果图片像素大于100万则使用瓦片绘制
                  let count;
                  if ((count = (width * height) / 1000000) > 1) {
                        // console.log("超过100W像素");
                        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                        // 计算每块瓦片的宽和高
                        let nw = ~~(width / count);
                        let nh = ~~(height / count);
                        tCanvas.width = nw;
                        tCanvas.height = nh;
                        for (let i = 0; i < count; i++) {
                              for (let j = 0; j < count; j++) {
                                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                              }
                        }
                  } else {
                        ctx.drawImage(img, 0, 0, width, height);
                  }
                  //进行最小压缩
                  let ndata = canvas.toDataURL("image/jpeg", 0.1);
                  tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
                  return ndata;
            },
            //将base64转换为文件
            dataURLtoFile() {
                  console.log('执行转流方法');
                  // console.log('执行转流方法' + this.headerImage);
                  var arr = this.headerImage.split(","),
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                  while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                  }
                  return new File([u8arr], this.files.name, {
                        type: this.files.type
                  });
            },

//上传图片的动作方法我是封装在utils里的
//upLoaderImg.js
import axios from 'axios'		//引入axios
import {Toast} from 'vant'	//引入Toast

async function upLoaderImg(file) {
    try {
        // console.log("上传之前参数："+file.name)
        let params = new FormData();
        params.append('file', file);
        let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        };
        const res = await axios.post(process.env.VUE_APP_BASE_URL + '/tool/minioUpload', params, config);
        // console.log("上传之后的结果集："+res.data.data)
        if (res.data.flag) {
            return res.data;
        } else {
            Toast.fail(res.data && res.data.msg);
            throw new Error(res.data);
        }
    } catch (error) {
        Toast.fail('上传失败');
        throw error;
    }
}

export default upLoaderImg

如有问题欢迎批评改正。