не могу отправить файл изображения в бэкэнд, используя formData и аксиальный пост-запрос - PullRequest
Новая
       13

не могу отправить файл изображения в бэкэнд, используя formData и аксиальный пост-запрос

0 голосов
/ 06 октября 2019

У меня есть приложение стека MERN, я хочу отправить форму, содержащую ввод файла и обычные текстовые вводы, отправленная форма отправляется в избыточное действие, а внутри действия я использую formData для преобразования изображения в двоичную формуи отправить его в бэкэнд, используя formData.append и axios .post, а в бэкэнде я получил обычный код мультиптера с upload.single ('photo'). Бэкэнд сам по себе работает, я проверил его с почтальоном. ДЕЙСТВИЕ ПЕРЕДНЕГО КОНЦА REDUX: 

// update user info
export const updateUser = (userData, id) => dispatch => {
    var form = new FormData()
    console.log(userData.photo);
    if (userData.photo) {
        form.append('photo', userData.photo);

    }
    axios
        .post("http://localhost:4000/api/users/update/" + id, userData)
        .then(res => {
            axios
                .post('http://localhost:4000/api/users/upload_photo/' + id, form)
                .then(res => {
                    const { user } = res.data;
                    console.log(user);
                    //save new user to localStorage
                    localStorage.setItem("user", JSON.stringify(user));
                    //dispatch to reducer
                    dispatch({
                        type: UPDATE_USER,
                        payload: user
                    })
                })



        })

}

BACKEND API 

let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/user');
    },
    filename: function (req, file, cb) {
        cb(null, req.params.id + "_" + Date.now() + "_" + Math.floor(Math.random() * 10000) + file.originalname);
    }
});
let upload = multer({ storage: storage })
//profile picture upload 
router.route('/upload_photo/:id').post(upload.single('photo'), function (req, res) {
    User.findById(req.params.id, function (err, user) {
        if (err) {
            res.status(404).send("user is not found");
        }
        else {
            user.photo = {};
            user.photo.path = req.file.path;
            user.save().then(() => {
                res.json({ message: 'picture uploaded!', user: user });
            })
                .catch(err => {
                    res.status(400).send("Upload not possible");
                });
        }
    })
});
...