尝试上传到 s3 时出现“params.Body is required”错误

Question

我正在尝试将文件上传到 aws。 但是当我尝试时，出现错误“params.Body is required”。 我以前从未遇到过这个错误，我不知道如何处理它 go。 您可以在下面找到相关代码。

state：

const initialState = {
   arzt:"",
   patient: "",
   record: "",
   image: "",
   audio: "",
 };


class EintraegePatient extends Component {
 state = {
   ...initialState
 };

句柄地址记录：

handleAddRecord = async () => {
   try{
    const visibility = "public";
    const {identityId} = await Auth.currentCredentials()
    const filename = `/${visibility}/${identityId}/${Date.now()}-${this.state.image.name}`

    const uploadedFile = await Storage.put(filename, this.state.image.file, {
      contentType: this.state.image.type
    })
    const file = {
      key: uploadedFile.key,
      bucket: aws_exports.aws_user_files_s3_bucket,
      region: aws_exports.aws_project_region
    }
    const input = {

     record: this.state.record,
      file
    }
    const result = await API.graphql(graphqlOperation(createRecords, {input}))
    console.log( "success", result )
    Notification({
      title: "Success",
      message: "Record successfully created!",
      type: "success"
    })
    this.setState({ ...initialState })
  } catch(err) {
    console.error('Error adding Record', err)
  }
  }

然后是重要的渲染部分

<TextField
         id="outlined-eintreag-input"
         label="eintrag"
         placeholder="Neuer Eintrag"
         margin="normal"
         variant="outlined"
         onChange={record => this.setState({ record })}
       />
       <Button
       variant="contained"
       color="primary"
       className={classes.button}
       onClick={this.handleAddRecord}
       >
       Senden <SendIcon color="secondary" style={{ margin: 8 }}/>
      </Button>


     <PhotoPicker
       title="Product Image"
       id="contained-button-file"
       preview="hidden"
       onPick={file => this.setState({ image : file })}
       onLoad={url => this.setState({ imagePreview: url })}

任何帮助深表感谢。 谢谢！

Answer 1

我想我会为此放弃 0.50 美元，因为我昨晚在我的 Node 项目上工作时最终在谷歌上搜索了这个问题。 事实证明，S3 的结构在方法之间有点不同。

使用 s3.upload() 函数时，它看起来像这样：

async upload (key, file) {

  const storage = new AWS.S3()

  try {
    const params = {
      Body: file.data,
      Key: key,
      ACL: 'public-read',
      Bucket: process.env.AWS_S3_BUCKET
    }

    return await storage.upload(params).promise()

  } catch (err) {
    throw new Error(`S3 upload error: ${err.message}`)
  }
}

使用浏览器端 ManagedUpload 函数时，参数以双嵌套方式传递，如下所示：

  ...

    return await storage.ManagedUpload({ params }).promise()

  ...

我的大脑屁是先尝试 ManagedUpload 然后没有调整我的参数并感到困惑。 希望这有助于其他人的大脑褪色。

Answer 2

结果我没有通过图像状态。 所以更正后的版本看起来像这样，虽然他们有更好的方法来做到这一点

addImageAndRecord = async (e) => {

    const kk = e.target.files[0];
    this.state.image=kk;
    console.log( "imago", this.state.image )

     console.log( "value", kk )
    const visibility = "public";
    const {identityId} = await Auth.currentCredentials()
    const filed = kk;
    console.log( "value", filed )
    const filename = `/${visibility}/${identityId}/${Date.now()}-${this.state.image.name}`

    const uploadedFile = await Storage.put(filename, filed, {
       contentType: this.state.image.type
    })
    ....

Answer 3

您的项目应该在单独的文件夹中，并清除您的浏览器历史记录、缓存