我正在尝试将文件上传到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 })}
非常感谢您的帮助。谢谢!
答案 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,然后又没有调整参数并感到困惑。希望这可以帮助其他人的大脑消退。