使用Axios上传图片后GET获取显示异常，请求排查PUT/GET环节问题

可能的问题点及修复步骤 #

1. PUT上传环节：确保上传的是正确的二进制数据 #

• 检查this.foto1的类型：如果this.foto1是base64字符串（比如从摄像头获取的dataURL），直接上传会导致服务器收到文本而非二进制文件，损坏图片。需要先转换为Blob：

  // base64转Blob工具函数
  const base64ToBlob = (base64Str) => {
    const [metaPart, dataPart] = base64Str.split(',');
    const mime = metaPart.split(':')[1].split(';')[0];
    const byteString = atob(dataPart);
    const ab = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(ab);
    
    for (let i = 0; i < byteString.length; i++) {
      uint8Array[i] = byteString.charCodeAt(i);
    }
    
    return new Blob([ab], { type: mime });
  };
  
  // 修改上传内容
  const content = base64ToBlob(this.foto1);
  

• 检查Axios全局配置：如果你的api实例有全局拦截器自动序列化JSON（比如设置了transformRequest），会把二进制数据转成字符串，导致损坏。需要在PUT请求中覆盖配置：

  return await api.put(url, content, {
    headers: { "Content-Type": "image/jpeg" },
    transformRequest: [(data) => data] // 跳过自动序列化
  });
  

• 验证上传请求：在浏览器Network面板查看PUT请求的Request Payload，应该显示为[Binary data]，而非文本内容。如果是文本，说明上传数据格式错误。

2. GET请求环节：修复Promise链与数据转换 #

• 修复Promise链逻辑：原代码中catch之后的then会在请求出错时仍执行，导致response为undefined，引发后续错误。改用try/catch简化逻辑：

  async getRequest() {
    const image = async (url) => {
      try {
        const response = await api.get(url, { responseType: "blob" });
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.onerror = reject;
          reader.readAsDataURL(response.data);
        });
      } catch (error) {
        console.error('GET请求失败:', error);
        throw error; // 抛出错误便于上层处理
      }
    };
  
    // 调用示例
    try {
      const imgDataUrl = await image('你的图片URL');
      // 将dataURL赋值给img元素
      document.getElementById('你的图片容器').querySelector('img').src = imgDataUrl;
    } catch (err) {
      // 处理错误
    }
  }
  

• 验证转换结果：打印转换后的imgDataUrl，确认格式为data:image/jpeg;base64,...，如果格式错误，说明返回的Blob无效。

3. 服务器端与第三方验证 #

• 用Postman直接上传本地JPG文件到目标API，再GET查看是否能正常显示。如果仍异常，说明问题出在服务器端，需检查服务器是否正确处理二进制文件的PUT存储与GET返回。
• 检查服务器返回的响应头，确保Content-Type为image/jpeg，且没有额外的编码或转换。

内容的提问来源于stack exchange，提问作者Diego Chaves