React — Django, как сделать добавление аватара?

Добрый вечер, нужно сделать добавление аватара, на фронте есть input c type file и кнопка отправить на сервер.
На сервере считываю параметр и добавляю в поле avatar модели пользователя. Получаю ошибку название не сериализуется - nature_gora.jpg> is not JSON serializable
<input type="file" onChange={this.fileChangedHandler} />
    <button onClick={this.uploadHandler}>Upload!</button>

    fileChangedHandler(e) {
        this.setState({selectedFile: e.target.files[0]})
    }

    uploadHandler() {
        console.log(this.state.selectedFile);
        axios.post("/api/add_user_avatar/", {
            avatar: this.state.selectedFile.name
        })
            .then((res) => {
                this.setState({showUploadInput: false})
            })
            .catch(error => {
                console.log(error);
            });
    }



    @csrf_exempt
    def add_user_avatar(request):
        if request.method == "POST":
            user = UserAccount.objects.get(id=request.user.id)
            data_unicode = request.body.decode("utf-8")
            data = json.loads(data_unicode)
            user.avatar = "nature_gora.jpg"
            user.save()
            return JsonResponse({
                "avatar": user.avatar
            }, safe=False)

Чего не хватает на бэкэнде?
  • Вопрос задан
  • 350 просмотров
Решения вопроса 1
planc
@planc
тебе на js нужно создать объект FormData, запушить в него файл, а на бэкэнде уже работать как с формой
Какой удобный, красивый file uploader для vue?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы