从reactJS前端发送上传的图像文件到django python后端的问题(文件发送为未定义)

yr9zkbsy  于 2023-06-25  发布在  Go
关注(0)|答案(1)|浏览(119)

我试图将reactJS前端上的用户输入的各种数据类型发送到Django python后端,并得到一个错误,其中文本字符串发送,但图像文件不发送。
这里是我发送图像和说明的地方

handleSubmit = async () => {
    try {
        const formData = new FormData();
        console.log('Image: ', this.props.fileInput);
        console.log('Image type: ', typeof this.props.fileInput);
        console.log('Image is a File: ', this.props.fileInput instanceof File);

        formData.append('file', this.props.fileInput);
        // formData.append('file', this.props.file);  
        formData.append('caption', this.state.caption);
        for (let pair of formData.entries()) {
          console.log(pair[0] + ', ' + pair[1]);
        }
        
        const response = await axios.post(API_URL, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        if (response.status === 200) {
            console.log('Image uploaded successfully');
        }
    } catch (error) {
        console.error(error);
    }
  }

在字幕部分和图像部分

updateImage = async (imageId, caption) => {
    try {
        const formData = new FormData();
        console.log('File:', this.state.file); 
        console.log('Caption:', caption); 

        formData.append('file', this.state.file);  
        formData.append('caption', caption);

        for (let pair of formData.entries()) {
            console.log(pair[0] + ', ' + pair[1]);
        }

        const response = await axios.post(API_URL, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        if (response.status === 200) {
            console.log('Image processed successfully');
            const currentState = this.state;
            const newState = {...currentState};
            newState.elements[imageId].URL = response.data.image_url;
            this.setState(newState);

            return response.data.image_url; 
        }
    } catch (error) {
        console.error(error);
    }
}
...
...
return(
...
            {this.state.newElement &&
                <Caption 
                    file={this.state.file} 
                    imageId={this.state.newElement.id} 
                    updateCaption={this.updateImage} 
                />
            }
            </div>            
        );
    }
}

export default Image;

请让我知道,如果有什么明显的错误或你会试图解决这个问题,我感谢任何指导或帮助,因为这是我试图解决的最后一个问题!

9bfwbjaz

9bfwbjaz1#

您可以将文件转换为base64字符串。然后将请求作为json对象发送。在django应用程序中,将base64字符串解析为所需的文件并使用它。通过使用base64字符串,我节省了大量的时间和头痛。
请记住,base64会使您的文件稍大。

相关问题