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将请求注册为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框架中上传文件与在Django中以multipart / form形式上传文件相同。

要进行测试，可以使用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上找到解决方案

link

Answer 2

除了content-type标头之外，您还想添加一个content-disposition标头，如下所示： headers: { 'Content-type':'multipart/form-data', 'Content-Disposition': 'attachment; filename=file', 'filename': 'file' }

Django REST：文件\图像上传

2 个答案: