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

Question

[Сергей Алексеев]

Добрый вечер, нужно сделать добавление аватара, на фронте есть 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)

Чего не хватает на бэкэнде?

Answer 1

[planc]

тебе на js нужно создать объект FormData, запушить в него файл, а на бэкэнде уже работать как с формой
Какой удобный, красивый file uploader для vue?

Comments

[Сергей Алексеев]

Вот смотрите, создаю объект FormData, добавляю в него файл, отправляю на апи, но во вьюшке не могу его получить.

@csrf_exempt
def add_user_avatar(request):
    if request.method == "POST":
        user = UserAccount.objects.get(id=request.user.id)
        print(request.POST, request.FILES)
        return JsonResponse({
            "avatar": user.avatar
        }, safe=False)

request.POST, request.FILES пустые ?