I am using nestjs and react js to make an image uploader. For react i use this:
const props = {
onChange({ file, fileList }: any) {
const fd = new FormData();
fd.append('img', fileList[0].originFileObj);
fetch('http://localhost:3000/upload', {
method: 'POST',
body: fd,
})
.then(async response => {
const data = await response.json();
console.log(data)
})
.catch(error => {
message.error('There was an error!', error);
});
},
defaultFileList: [
],
};
return (
<div>
<Form
name="form"
className="form"
>
<Form.Item
className="upload"
valuePropName="fileList"
>
<Upload {...props}>
<Button>Upload</Button>
</Upload>
</Form.Item>
</Form>
</div>
);
};For NestJs i use:
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Post('/upload')
@UseInterceptors(
FileInterceptor('img', {
dest: './uploads',
}),
)
uploadFile(@UploadedFile() file) {
console.log(file, 'file');
}
}In console.log(file, 'file'); i get:
{
fieldname: 'img',
originalname: 'Full.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: './uploads',
filename: '3c45cd07145707ec09235c7bf3954d7f',
path: 'uploads\\3c45cd07145707ec09235c7bf3954d7f',
size: 60655
} Question: Which info from the object above should i send back to front end and which to store in database?
Note: Now, in uploads folder in NestJs application i store 3c45cd07145707ec09235c7bf3954d7f after uploading the image. How i know, i should send data on my server and the server should return the valid file(image).
Who can help?
from Upload images using form data and return to front end in React js
No comments:
Post a Comment