社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Django

Django/React 415(不支持的介质类型)

ActaDennis • 3 年前 • 1170 次点击  

我要走了 POST http://localhost:8000/api/reports/ 415 (Unsupported Media Type) 当我试图从React提交表格时,我不明白问题出在哪里。

这是密码。

models.py

class Report(models.Model):

    category = models.ForeignKey(Category, on_delete=models.PROTECT)
    description = models.TextField()
    address = models.CharField(max_length=500)
    reporter_first_name = models.CharField(max_length=250)
    reporter_last_name = models.CharField(max_length=250)
    reporter_email = models.CharField(max_length=250)
    reporter_phone = models.CharField(max_length=250)
    report_image_1 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
    report_image_2 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
    report_image_3 = models.ImageField(_("Image"), upload_to=upload_to, null=True, blank=True)
    date = models.DateTimeField(default=timezone.now)

    class Meta:
        ordering = ('-date',)

    def __str__(self):
        return self.description

我还尝试为图像设置默认值,但仍然出现了错误。

serializers.py

class ReportSerializer(serializers.ModelSerializer):
    categoryName = CategorySerializer(many=False, read_only=True, source='category')

    class Meta:
        model = Report
        fields = '__all__'

views.py

class ManageReports(viewsets.ModelViewSet):
    serializer_class = ReportSerializer
    parser_classes = [MultiPartParser, FormParser]

    def get_object(self, queryset=None, **kwargs):
        id = self.kwargs.get('pk')
        return get_object_or_404(Report, id=id)

    def get_queryset(self):        
        return Report.objects.all()

这是负责提交的代码。

report.js

    const initialPostData = Object.freeze({
        category: '',
        address: '',
        description: '',
        reporter_first_name: '',
        reporter_last_name: '',
        reporter_email: '',
        reporter_phone: '',
    });

    const [postData, updatePostData] = useState(initialPostData);
    const [postImage1, setPostImage1] = useState({image: null});
    const [postImage2, setPostImage2] = useState({image: null});
    const [postImage3, setPostImage3] = useState({image: null});

    const handleChange = (e) => {
        if([e.target.name] == 'reporter_image_1') {
            setPostImage1({
                image: e.target.files[0],
            });
        } else if([e.target.name] == 'reporter_image_2') {
            setPostImage2({
                image: e.target.files[0],
            });
        } else if([e.target.name] == 'reporter_image_3') {
            setPostImage3({
                image: e.target.files[0],
            });
        } else if([e.target.name] == 'category') {
            updatePostData({
                ...postData,
                [e.target.name]: e.target.value,
            });
        } else {
            updatePostData({
                ...postData,
                [e.target.name]: e.target.value.trim(),
            });
        }
    };


    const handleSubmit = async(e) => {
        e.preventDefault();

        let formData = new FormData();
        formData.append('category', postData.category);
        formData.append('address', postData.address);
        formData.append('description', postData.description);
        formData.append('reporter_first_name', postData.reporter_first_name);
        formData.append('reporter_last_name', postData.reporter_last_name);
        formData.append('reporter_email', postData.reporter_email);       
        formData.append('reporter_image_1', postImage1.image);       
        formData.append('reporter_image_2', postImage2.image);        
        formData.append('reporter_image_3', postImage3.image);       

        const submitForm = await submitReport(formData);

下面是答案 submitReport 美国石油学会

API.js

const axiosInstance = axios.create({
    baseURL: 'http://localhost:8000/api/',
    timeout: 5000,
    headers: {
        Authorization: accessToken
            ? 'JWT ' + accessToken
            : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }, 
});

// Submit Report Form
const submitReport = async(formData) => {
    const { data } = await axiosInstance.post('reports/', {...formData });
    return data;
}

这些应该是了解发生了什么所需的所有文件。

提前谢谢。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/132305
 
1170 次点击  
文章 [ 2 ]  |  最新文章 3 年前
ActaDennis
Reply   •   1 楼
ActaDennis    3 年前

我找到了解决方案,我在 submitReport 函数,但我不需要使用它,所以:

API.js

// Submit Report Form
const submitReport = async(formData) => {
    const { data } = await axiosInstance.post('reports/', {...formData });
    return data;
}

变成

// Submit Report Form
const submitReport = async(formData) => {
    const { data } = await axiosInstance.post('reports/', formData);
    return data;
}
Arif
Reply   •   2 楼
Arif    3 年前

你的 parser_classes 视图集上的属性错误。如果希望在请求正文中接受JSON格式,则需要包括 JSONParser 在你的 parser_类 属性

请参阅中的相关部分 here 在DRF文档中。