尝试上传到s3时出现“ params.Body为必需”错误

时间:2019-05-07 16:24:30

标签: reactjs amazon-s3 aws-amplify aws-appsync

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

状态:

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


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

handleAddrecord:

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 })}

非常感谢您的帮助。谢谢!

2 个答案:

答案 0 :(得分:0)

结果我没有通过图像状态。因此修正后的版本看起来像这样,尽管他们提供了更好的方法

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
    })
    ....

答案 1 :(得分:0)

自从我昨晚在我的Node项目上研究谷歌搜索这个问题以来,我想为此花掉我的$ 0.50。事实证明,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,然后又没有调整参数并感到困惑。希望这可以帮助其他人的大脑消退。