Javascript S3使用Axios从React联系人表单上载文件时创建空文件

我已经创建了一个测试联系人表单，用户可以在其中上传图像附件

• 预签名AWS Lambda函数工作正常
• 图像文件（blob）在html中显示为图像，因此添加正确
• 当图像发布时，我得到了一个成功的200响应，文件显示在S3中

但是，在S3中，所有文件都显示为空。大小似乎随链接大小的长度而变化（例如，blob是63B，硬编码链接的大小不同），因此它似乎只是将链接作为数据，而不是实际图像。我多次检查我的axios语法是否正确，并在中查看了许多线程，但无法找出我做错了什么

AWS Lambda生成预签名的URL：

const AWS = require('aws-sdk')
AWS.config.update({ region: 'eu-west-2' })
const s3 = new AWS.S3();

const uploadBucket = 'xxx-bucket'

exports.handler = async (event) => {
  const result = await getUploadURL()
  console.log('Result: ', result)
  return result
};

const getUploadURL = async function() {
  console.log('getUploadURL started')
  let actionId = Date.now()

  var s3Params = {
    Bucket: uploadBucket,
    Key:  `${actionId}.jpg`,
    ContentType: 'image/jpeg',
    CacheControl: 'max-age=31104000',
    ACL: 'public-read'
  };

  return new Promise((resolve, reject) => {
    // Get signed URL
    let uploadURL = s3.getSignedUrl('putObject', s3Params)
    resolve({
      "statusCode": 200,
      "isBase64Encoded": false,
      "headers": {
        "Access-Control-Allow-Origin": "*"
      },
      "body": JSON.stringify({
          "uploadURL": uploadURL,
          "photoFilename": `${actionId}.jpg`
      })
    })
  })
}

反应前端：

class QuoteForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      file:null,
    };
  };

  onContactNameChange(e){
    this.setState({ContactName:e.target.value});
  };

  onFileChange(e){
    let [file] = e.target.files;
    if (file) {
      this.setState({
        file: URL.createObjectURL(e.target.files[0]),
      });
      console.log(file);
    }
  };

  async handleSubmit(e){
    e.preventDefault();
  
      axios.post(`https://xxxx/`)
      .then(res => {
            console.log(res)
            const url = res.data.uploadURL;

            const axiosConfig = {
                headers: { 
                    "Content-Type": "image/jpeg",
                    "Cache-Control": 'max-age=31104000' 
                }
            }

            axios.put(url, this.state.file, axiosConfig)
                .then(response => {console.log(response)}).catch(err => {console.log(err.response)
            });
        });

    }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
            <input 
                type="file"
                name="file"
                id="fileUpload" 
                onChange={this.onFileChange.bind(this)}
            />

            <img src={this.state.file} alt="img" />

            <button 
                className="large"
                style={{marginTop:"1.25rem"}} >
                Submit
            </button>
      </form>
    );
  }
}

class QuoteForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：null，
};
};
onContactNameChange（e）{
this.setState（{ContactName:e.target.value}）；
};
onFileChange（e）{
让[file]=e.target.files；
如果（文件）{
这是我的国家({
文件：URL.createObjectURL（e.target.files[0]），
});
console.log（文件）；
}
};
异步handleSubmit（e）{
e、 预防默认值（）；
轴心柱(`https://xxxx/`)
。然后（res=>{
console.log（res）
const url=res.data.uploadURL；
常数axioconfig={
标题：{
“内容类型”：“图像/jpeg”，
“缓存控制”：“最大年龄=31104000”
}
}
put（url，this.state.file，axioconfig）
.then（response=>{console.log（response）}）.catch（err=>{console.log（err.response）
});
});
}
render（）{
返回(
提交
);
}
}

S3存储桶文件：

---

我只是不明白为什么S3存储桶中的文件会变成空的。

好的，我知道我的问题出在哪里了<代码>createObjectURL在我的前端React代码中，显然不能用于将文件上载到服务器，因为它实际上不包含文件，而只包含URL。我将整个

onFileChange（e）

函数缩短为下面的函数，S3开始接收实际文件

  onFileChange(e){
        const [selectedFile] = e.target.files;
    if (selectedFile) {
            this.setState({file:selectedFile})
        }
  };