Reputation: 909
I want to use a library called react-native-image-picker to deliver the image to the backend server using formData
and save it to the computer diskStorage
upload using multer.
However, there is some confusion in using this. If I use my code I get this error:
MulterError: Unexpected fielderror.
How can I fix the code?
this is my code
(front/Third.js)
const Third = () => {
const [imageSource, setImageSource] = useState(undefined);
const dispatch = useDispatch();
const options = {
title: 'Load Photo',
customButtons: [
{name: 'button_id_1', title: 'CustomButton 1'},
{name: 'button_id_2', title: 'CustomButton 2'},
],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
const showCameraRoll = () => {
launchImageLibrary(options, (response) => {
if (response.error) {
console.log('LaunchImageLibrary Error: ', response.error);
} else {
setImageSource(response.uri);
}
console.log('response.uri:', response.uri);
// response.uri: file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
const form = new FormData();
form.append('Files', {
name: 'SampleFile.jpg', // Whatever your filename is
uri: response.uri, // file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
type: 'image/jpg', // video/mp4 for videos..or image/png etc...
});
dispatch({
type: UPLOAD_IMAGES_REQUEST,
data: form,
});
});
};
return (
<Container>
{imageSource && <Photo source={{uri: imageSource}} />}
<ImagePickerButton onPress={showCameraRoll}>
<Label>Show Camera Roll</Label>
</ImagePickerButton>
</Container>
);
};
export default Third;
(backend/post.js)
try {
fs.accessSync('uploads');
} catch (error) {
console.log('uploads 폴더가 없으므로 생성합니다.');
fs.mkdirSync('uploads');
}
const upload = multer({
storage: multer.diskStorage({
destination(req, file, done) {
done(null, 'uploads');
},
filename(req, file, done) {
const ext = path.extname(file.originalname);
const basename = path.basename(file.originalname, ext);
done(null, basename + '_' + new Date().getTime() + ext);
},
}),
limits: {fileSize: 20 * 1024 * 1024},
});
router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => {
// dispatch UPLOAD_IMAGES_REQUEST POST /post/images
res.json(req.files.map((v) => v.filename));
});
(saga/index.js)
function uploadImagesAPI(data) {
return axios.post('/post/images', data);
}
function* uploadImages(action) {
try {
const result = yield call(uploadImagesAPI, action.data);
yield put({
type: UPLOAD_IMAGES_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UPLOAD_IMAGES_FAILURE,
error: err.response.data,
});
}
}
Upvotes: 2
Views: 4513
Reputation: 5002
Create a FormData
and send a post request to backend by including that form in the body of the request
const SendFileToBackend = (uri) => {
const form = new FormData();
form.append("Files", {
name: "SampleFile.jpg", // Whatever your filename is
uri: uri, // file:///data/user/0/com.cookingrn/cache/rn_image_picker_lib_temp_5f6898ee-a8d4-48c9-b265-142efb11ec3f.jpg
type: "image/jpg", // video/mp4 for videos..or image/png etc...
});
// Perform a Post request to backend server by putting `form` in the Body of the request
};
Upvotes: 2