我封了2天的图片上传。我有一个表格,里面有日期、字符串、布尔和图像等内容。这是为了在我的网站上创建一个公告。
我们实际上使用了 Reactjs, Redux, Axios, Datepicker。
这是我的代码。(对不起,如果它是废话,我是初学代码…)
Component (用于img) :
<form id="myform" onSubmit={onCreateAnnouncementSubmit} method="post" >
{...}
<div className="createAnnouncement__input drop desktop input">
<input
type="file"
className="input"
accept=".png, .jpg, .jpeg"
name={picture}
onChange={fileChangedHandler}
/>
</div>
{...}
<div className="createAnnouncement__flex">
<button type="submit" className="createAnnouncement__button button">Créer</button>
</div>
Container :
import CreateAnnouncement from '../components/CreateAnnouncement';
import { inputCreateAnnouncement, postCreateAnnouncement, passId} from '../Redux/actions'
import {connect} from 'react-redux';
const mapStateToProps = ({data}) => {
return({
{...}
picture: data.create.picture,
})
};
const mapDispatchToProps = (dispatch, {match}) => ({
onCreateAnnouncementSubmit: (e) => {e.preventDefault(); dispatch(passId(postCreateAnnouncement))},
fileChangedHandler = (event) => dispatch(inputCreateAnnouncement({ [e.target.name]: {
selectedFile: event.target.files[0]
}})),
})
;
const createAnnouncement = connect(mapStateToProps, mapDispatchToProps)(CreateAnnouncement);
export default createAnnouncement;
这里有一些动作。
export const INPUT_CREATE_ANNOUNCEMENT= 'INPUT_CREATE_ANNOUNCEMENT';
export const inputCreateAnnouncement = (payload) => ({
type: INPUT_CREATE_ANNOUNCEMENT,
payload
})
export const postCreateAnnouncement = () => (dispatch, getState) => {
const fd = new FormData();
fd.append('image', selectedFile)
axios({
headers: {
ContentType: 'multipart/form-data',
Authorization: `bearer ${token()}`,
},
method: 'post',
url: `***********/api/announcements/`,
data:
{
user_id: getState().login.userId,
category: "default",
...getState().data.create
}
})
.then((res) => console.log(res))
.catch((err) => console.log(err))
};
export const passId = (func) => (dispatch, getState) => {
dispatch(func(getState().login.userId))
}
还有数据:
const initialState = {
create: {
{...}
picture: null,
},
{...}
case INPUT_CREATE_ANNOUNCEMENT:
return {
...state,
create:{...state.announcements[0], ...action.payload}
}
在我的symfony中。
/**
* @Route("/", name="add", methods={"POST"})
*/
public function add(Request $request, GetErrorsFromForm $getErrorsFromForm)
{
$announcement = new Announcement();
// On décode les données envoyées
$donnees = json_decode($request->getContent(), true);
/** On verifie si la propriété est envoyé dans le json si oui on hydrate l'objet
* sinon on passe à la suite */
$form = $this->createForm(AnnouncementType::class, $announcement);
$form->submit($donnees);
$donnees = json_decode($request->getContent(), true);
$form = $this->createForm(AnnouncementType::class, $announcement);
//dd($announcement);
$form->submit($donnees, false);
if ($form->isValid()) {
$announcement->setCreatedAt(new \DateTime);
if ($form['picture']->isSubmitted() && $form['picture']->isValid()){
/** @var UploadImage
* $uploadedFile */
$uploadedFile = $form['picture']->getData();
$destination = $this->getParameter('kernel.project_dir').'/public/uploads/AnnouncementPicture';
$originalFilename = pathinfo($uploadedFile->getClientOriginalName(), PATHINFO_FILENAME);
$newFilename = $originalFilename.'-'.uniqid().'.'.$uploadedFile->guessExtension();
$uploadedFile->move(
$destination,
$newFilename
);}
$em = $this->getDoctrine()->getManager();
$em->persist($announcement);
$em->flush();
return new JsonResponse('ok', 201);
} else {
$errors = $getErrorsFromForm->getErrors($form);
$data = [
'type' => 'validation_error',
'title' => 'There was a validation error',
'errors' => $errors,
];
return new JsonResponse($data, 400);
}
}
先谢谢你,对不起,我的英语不好… …
解决方案:
你可以用 axios 发送你的表单信息,使用的是 表格数据 像这样。
const firstName = 'my_first_name';
const lastName = 'my_last_name';
const date = '2020-04-10';// date in format that your backend supports
const fd = new FormData();
fd.append('name', firstName)
fd.append('last_name', lastName);
fd.append('file', selectedFile);
fd.append('date', date);
axios({
headers: {
ContentType: 'multipart/form-data',
Authorization: `bearer ${token()}`,
},
method: 'post',
url: `***********/api/announcements/`,
data: fd
})
.then((res) => console.log(res))
.catch((err) => console.log(err))
你可以阅读更多。axios post请求发送表单数据 axios – 发送表格数据和非表格数据
本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/902.html