Django REST: Загрузка файлов \ изображений

Question

Я хочу загрузить изображение, используя Vue.js и Django-rest. И с этим мало проблем.

Я пытаюсь использовать для этого запрос put (как в docs) и FileUploadParser, но получаю ошибку:

detail: "Missing filename. Request should include a Content-Disposition header with a filename parameter.

Если я сделаю мой заголовок как:

'Content-type':'multipart/form-data',
                'filename': 'file'

Django регистрирует запрос как OPTIONS, а не put, поэтому моя функция put не вызывается.

Мой сериализатор:

class ImagesSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Images
        fields = ('image',)

Мой взгляд:

class ImagesViewSet(APIView):
    parser_classes = (FileUploadParser,)

    def get(self, request):
        images = Images.objects.all()
        serializer = ImagesSerializer(images, many=True)
        return Response(serializer.data)


    def put(self, request, filename, format=None):
        image = request.data['image']

        Images.objects.create(
            image=image
        )
        return Response(status=204)

Мой запрос Vue.js:

import axios from 'axios';

export default {
  name: 'App',
  data(){
    return {
        name: '',
        image: '',
        description: '',
        price: '',
        files: false,
        }
    },
    methods: {
        onFileChange(e) {
            console.log('works');
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        createNewProduct(){

        const config = {
            headers: {
                'Content-type':'multipart/form-data',
                'filename': 'file'
            }
        }

        let formData = new FormData();
        formData.append('image', this.image);

        axios.put('http://127.0.0.1:8000/images/',{
            formData
        }, config).then(response => {
            console.log('Success');
            this.$router.push('/')
        }, response => {
            console.log('FAIL');
        });
        } 
    }
}

Что я делаю не так, или что я пропустил?

Answer 1

Загрузка файлов в Django REST Framework аналогична загрузке файлов в multipart / form в django.

Для проверки вы можете использовать curl:

curl -X POST -H "Content-Type:multipart/form-data" -u {username}:{password} \
-F "{field_name}=@{filename};type=image/jpeg" http://{your api endpoint}

Вы можете попробовать найти решениездесь на stackoverflow

ссылка

Answer 2

В дополнение к заголовку типа контента вы захотите добавить заголовок размещения контента, например: headers: { 'Content-type':'multipart/form-data', 'Content-Disposition': 'attachment; filename=file', 'filename': 'file' }