python - Django 休息 : Files\Images Uploading

Question

我想使用 Vue.js 和 Django-rest 上传图像。并且几乎没有什么问题。

我尝试使用 put 请求(如文档中所示)和 FileUploadParser，但出现错误:

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

如果我的标题如下:

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

Django 将 request 注册为 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

除了 Content-Type header 之外，您还需要添加一个内容处置 header ，如下所示:

headers: {
    'Content-type':'multipart/form-data',
    'Content-Disposition': 'attachment; filename=file',
    'filename': 'file'
}