ios 使用钉钉（专有钉钉、浙政钉）嵌入的h5 formData 无法正常使用

前言

在钉钉和浙政钉项目里有上传功能的需求，安卓可以正常上传，但是ios就是无法上传成功，得到的对象结构是 Object { appendData : …, realFormData : …}，后端就无法接受到

axios配置

• 平常的请求方法

/**
 * 作者：作者
 * 时间：2022/10/27 14:41:30
 * 功能：上传文件
 */
export const informUploadFile= (params) => {
    
    
  return request({
    
    
     url: '/h5/inform/uploadFile',
     zwApi: 'mgop.zy.znj.informUploadFile',
     method: 'post',
     data: params,
     noToken: false,
     headers: {
    
    
       "Content-type": "multipart/form-data"
     },
  });
};

优化后的方法

• 需要在axios里单独加配置
• 方法里加入区分 ios 和安卓的变量

let ran = navigator.userAgent
let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

// 上传附件
export function informUploadFile(params){
    
    
  let option = {
    
    
    url: '/h5/inform/uploadFile',
    zwApi: 'mgop.zy.znj.informUploadFile',
    method: 'post',
    data: params,
    noToken: false,
    headers: {
    
    
      "Content-type": "multipart/form-data"
    },
  }

  if (isIOS) {
    
    
    option = {
    
    
      url: '/h5/inform/uploadFile',
      zwApi: 'mgop.zy.znj.informUploadFile',
      method: 'post',
      data: params,
      noToken: false,
      headers: {
    
    
        "Content-type": "multipart/form-data"
      },
      // 这是重点，本人测试过，加上这个配置，安卓又不可以了，所以区分安卓和ios
      transformRequest: (data) => {
    
     data.toString = () => "[object FormData]"; return data; }
    }
  }

  return request(option)
}

小结

• 区分安卓和ios的方法很多，大家根据自己的项目情况来实现。
• 我只测试过浙政钉和钉钉，估计浙里办也会有这样的情况，也可以这样配置试一下。