Axios上传文件监听进度

• 设置请求头 axios请求拦截中修改content-type

config.headers['Content-Type'] = 'multipart/form-data;charset=UTF-8';

• 转换文件格式 将文件格式的photo转换问formdata

/**
 * 对象转formdata
 * @param data
 */
export const getJsonToFormData = data => {
  const result = new FormData();
  for (const key in data) {
    if (data[key] instanceof Blob) {
      // blob特殊处理
      const value = data[key];
      const type = value.type;
      const time = new Date().getTime();
      result.append(key, value, value?.name ?? `${time}.${type.replace(/^image//g, '')}`);
    } else {
      result.append(key, data[key]);
    }
  }
  return result;
};

• 请求时config加入axios的上传回调事件

onUploadProgress

/** 上传证件照 */
postIdentityImage: (data, cb) =>
  axios.post(`${ProxyBaseURL.ApplySubmit}/identity-image-upload`, data, {
    file: true,
    onUploadProgress: progressEvent => cb(onHandleUploadProgress(progressEvent)),
  }),

处理进度百分比

// 检测上传进度
const onHandleUploadProgress = progressEvent => {
  if (progressEvent.lengthComputable) {
    return Math.round((progressEvent.loaded / progressEvent.total) * 10000) / 100.0;
  }
};