[英]Facing ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid') -Django Rest + React
[英]Django Rest Framework+React JS ,unable to implement form parser (error: The submitted data was not a file. Check the encoding type on the form.)
當我從帶有圖像的反應前端提交表單時,服務器響應"The submitted data was not a file. Check the encoding type on the form."
. 當我使用 Django RF 可瀏覽 API 時,我可以成功添加圖像。 那么這會是前端的問題嗎?
意見.PY
class PostListCreateview(generics.ListCreateAPIView):
queryset = Post.objects.all().order_by('id')
serializer_class = PostSerializer
permission_classes = [permissions.IsAuthenticatedOrReadOnly]
parser_class = (FileUploadParser,)
def perform_create(self, serializer):
serializer.save(author=self.request.user)
Post model 接受來自表單 POST 方法的title,body and pic
作為參數。
反應前端
const [image,setImage] = useState(null)
const handlesubmit =()=>{
let endpoint = `/api/post/`;
apiService(endpoint,'POST',{title:title,body:body,pic:image}).then(data=>
console.log(data))};
return (<input type="file" onChange={(e)=>setImage(e.target.files[0])}/>
<Button onClick={handlesubmit} >Upload</Button>)
找到了答案, https://medium.com/@emeruchecole9/uploading-images-to-rest-api-backend-in-react-js-b931376b5833
import React,{useState} from 'react'
function Addpost() {
const [title,setTitle] = useState('dfv')
const [body,setBody] = useState('vdfvdfd')
const [picture, setPicture] = useState(null);
const handlesubmit = (e)=>{
e.preventDefault();
let form_data = new FormData();
form_data.append('pic', picture, picture.name);
form_data.append('title', title);
form_data.append('body', body);
let url = '/api/post/';
axios.post(url, form_data, {
headers: {
'content-type': 'multipart/form-data',
'X-CSRFTOKEN': CSRF_TOKEN
}
}).then(res => {
console.log(res.data);
}).catch(err => console.log(err))
};
return (
<Grid container spacing={6} justify="center" alignItems="center" direction="row" style={{marginTop:'3'}}>
<Grid item lg={8} xs={11}>
<Typography>Add new posts </Typography>
<form onSubmit={handlesubmit} >
<TextField style={{margin:'5px'}} value={title} onChange={(e)=>setTitle(e.target.value)} multiline fullWidth id="outlined-basic" label="Post Title" variant="outlined" />
<TextField style={{margin:'5px'}} value={body} onChange={(e)=>setBody(e.target.value)} multiline fullWidth id="outlined-basic" label="Post Body" variant="outlined" />
<Grid item xs={11} lg={8} style={{margin:'5px'}} >
<Typography color="primary">Upload an Image </Typography>
<input type="file" accept="image/png, image/jpeg" onChange={(e)=>{setPicture(e.target.files[0])}} />
<input type="submit"/>
</Grid>
</form>
</Grid>
</Grid>
)
}
export default Addpost
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.