前端通过JavaScript上传图片至S3 Bucket时遇文件路径错误求助

你遇到的错误核心在于：URL.createObjectURL(img)生成的是浏览器本地临时Blob URL，这个地址仅在当前浏览器会话内有效，后端服务器无法访问该路径下的资源，因此会抛出"No such file or directory"的错误。

1. 修改图片选择事件处理逻辑 #

直接保存File对象而非Blob URL，因为File对象本身就是可用于表单提交的二进制数据：

function onImageChange(event) {
  if (event.target.files && event.target.files[0]) {
    const imgFile = event.target.files[0];
    // 如果用状态管理表单数据，直接存储File对象
    setFormData(prev => ({
      ...prev,
      background_image: imgFile
    }));
  }
}

2. 构建FormData发起请求 #

发送图片时，通过FormData封装文件数据，浏览器会自动处理正确的请求编码：

// 示例提交函数（以fetch为例）
const submitImage = async () => {
  const formData = new FormData();
  // 将File对象添加到FormData，字段名与后端约定一致
  formData.append('background_image', formDataState.background_image);

  try {
    const response = await fetch('/your-backend-upload-api', {
      method: 'POST',
      body: formData
      // 无需手动设置Content-Type，浏览器会自动添加multipart/form-data及边界标识
    });
    const resData = await response.json();
    // 处理上传成功逻辑
  } catch (err) {
    // 处理上传失败逻辑
  }
};

关键注意点 #

• 禁止将Blob URL作为文件值传递给后端，后端无法解析本地临时地址
• File对象是Blob的子类，可直接被FormData处理，无需额外转换
• 后端需对应接收multipart/form-data类型的请求，通过指定字段名（如background_image）获取文件流，再上传至S3即可正常存储

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