嘗試上傳到 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

您的項目應該在單獨的文件夾中，並清除您的瀏覽器歷史記錄、緩存