reactjs 我无法将我在React前端上传的图片发送到Django开发的后端

ffx8fchx  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(183)

我已经开发了一个网络应用程序,并使用以下代码行发送图像到后端。

const SubmitImage = () => {
        if (!image) return alert('Please select an image first');

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

        fetch('http://127.0.0.1:8000//api/classify-image', {
            method: 'POST',
            body: formData,
        })
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                Navigate('/output', { state: { image: image } });
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    };

我发送的文件上传为图像,也移动到一个新的网页在同一时间。在后端方面,我用这个来接收图像。

class UploadView(APIView):
    # permission_classes = (permissions.AllowAny,)
    parser_classes = (MultiPartParser, JSONParser)

    @staticmethod
    def post(request):
        Image_predict= request.data.get('Image')

        #loading models
        ResNetModel = ResNetModelConfig.model
        InceptionV3model = InceptionV3modelConfig.model

        # Preprocess the image (this needs to be checked)
        image_raw = Image.open(Image_predict)
        image1 = np.array(image_raw.resize((224, 224)))
        if len(image1.shape) == 2: #code checks if the image is grayscale. If it is, the image is converted to color by duplicating the grayscale channel three times to create an RGB image.
            image1 = np.expand_dims(image1, axis=2)
            image1 = np.concatenate([image1, image1, image1], axis=-1)
        elif len(image1.shape) == 3 and image1.shape[2] == 4: #code checks if the image has an alpha channel. If it does, the alpha channel is removed.
            image1 = image1[:, :, :3]

我最终收到500内部服务器错误或AttributeError: 'NoneType' object has no attribute 'seek'AttributeError: 'NoneType' object has no attribute 'read'
我该怎么解决这个问题?
我希望代码能够接收图像并发送回预测。(我没有包括在代码中)我是新的后端开发,所以我没有太多的线索,我可以做些什么来避免这种情况。

wf82jlnq

wf82jlnq1#

以下是您可以尝试解决此问题的一些方法:
确保HTML表单中文件输入字段的name属性与JavaScript代码中formData.append('image', image)所使用的名称匹配。
检查上传图像的文件大小是否太大,服务器无法处理。您可以通过在Django设置中添加以下内容来设置上传图像的最大文件大小:

FILE_UPLOAD_MAX_MEMORY_SIZE = 5242880 # 5MB
FILE_UPLOAD_PERMISSIONS = 0o640
FILE_UPLOAD_DIRECTORY_PERMISSIONS = 0o755

第一行将最大文件大小设置为5MB。第二行和第三行设置上载文件的权限。
请确保请求中的Content-Type报头被正确设置为multipart/form-data。您可以使用浏览器的开发者工具或Postman之类的工具检查这一点。
尝试使用request.FILES.get('image')检索上载的文件,而不是使用request.data.get('Image')
Image_predict = request.FILES.get('image')这将为您提供一个django.core.files.uploadedfile.InMemoryUploadedFiledjango.core.files.uploadedfile.TemporaryUploadedFile的示例,然后您可以使用它来打开和预处理图像。
在后端代码中,您使用Image.open(Image_predict)打开图像文件。这可能不起作用,因为Image_predict是一个类似文件的对象,而不是文件路径。相反,您可以使用Image.open(Image_predict.file)打开文件。
image_raw = Image.open(Image_predict.file)此外,您可能需要在打开图像之前添加Image_predict.seek(0),以确保文件指针位于文件的开头。

Image_predict.seek(0)
image_raw = Image.open(Image_predict.file)

相关问题