大佬教程收集整理的这篇文章主要介绍了如何将图像从客户端发送到服务器节点 js react，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试创建上传个人资料图片方法，帮助用户在网站上上传他们的个人资料图片，但我不知道如何将图像从客户端发送到服务器并将这些图像存储在 cloudinary 或 firebase 上。
我的路线如下所示： ProfileAPI.Js
const express = require("express");
const router = express.Router();
const { body,param } = require("express-valIDator");
const { catchErrors } = require("../errors/errorHandlers");
const multer = require('multer');
const uuIDv4 = require('uuID/v4');
const upload_dir = './images';
const storage = multer.diskStorage({
destination: (req,file,cb) => {
cb(null,upload_dir);
},filename: (req,`${uuIDv4()}-${file.filename.tolowerCase}`);
}
});
const upload = multer({
storage: storage,fileFilter: (req,cb) => {
if (
file.mimetype == 'image/png' ||
file.mimetype == 'image/jpg' ||
file.mimetype == 'image/jpeg'
) {
cb(null,true);
} else {
cb(null,false);
return cb(new Error('Only .png,.jpg and .jpeg format allowed!'));
}
}
});
const {
getUserProfile,getUsersPublicProfile,lookUpID,updateUserProfile,updateUserEmail,deleteUserProfile,// deleteUserSkill,addplayersProfile,getCreatedplayers,updatePlayersProfile,deleteUserCreatedplayer,} = require("./profilesController");
router.post(
"/upload",upload.single('profileimg'),updateUserProfile
);
所以关键点是设置存储告诉哪里上传+上传文件过滤器，对吗？
还有将 `upload.single('profileimg') 的 route.post，对吗？该路由将包括我的 updateUserProfile 控制器，可在此处找到： profilesController.Js
exports.updateUserProfile = async (req,res) => {
const userID = req.session.passport.user.ID;
// This array will contain all the update functions to run.
const updates = [];
// If a gravatar url has not been generated,do it Now.
const pictureValue = gravatar.url(
req.body.email,{ s: "100",r: "pg",d: "retro" },true
);
const payload = {
fullname: req.body.fullname,location: req.body.location,webpage: req.body.webpage,linkedin: req.body.linkedin,institution: req.body.institution,bio: req.body.bio,major: req.body.major,mergedTo: userID,picture: pictureValue,skillone: req.body.skillone,skilltwo: req.body.skilltwo,skillthree: req.body.skillthree
};
}
现在是前端代码（react.Js）：
这是我在 React 应用程序中加载的表单：
UserProfile.Js
const UserProfile = (serverUserData) => {
const appState = useContext(GlobalContext);
const { currentUser } = appState;
const { email,picture,name } = currentUser;
const [isverifIEd,setIsverifIEd] = useState(false);
const checkVerificationData = () => {
axios.get("/API/v1/profiles/profile").then((res) => {
const { data } = res;
if (data.verifIEdDT) {
setIsverifIEd(data.verifIEdDT);
}
});
};
useEffect(() => {
checkVerificationData();
},[isverifIEd]);
// Upload user avatar function
const [imageSelected,setimageSelected] = useState("");
const handlesubmit = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('email',email);
formData.append('name',name);
formData.append('profileimg',imageSelected);
axios
.post(`/upload`,formData)
.then(() => console.log("success"))
.catch(err => console.log(err));
};
const onfileChange = (e) => {
setimageSelected({ profileimg: e.target.files[0] });
};
};
const classes = useStyles();
return (
<div classname={classes.root}>
<GrID item xs={12}
container
direction="row"
justify="center"
alignItems="center"
spacing={4}>
<GrID item>
<GrID item>
<UserCard
picture={currentUser.picture}
userEmail={email}
name={name}
isverifIEd={isverifIEd}
handlesubmit={handlesubmit}
onfileChange={onfileChange}
/>
<br />
</GrID>
这里是用户可以上传他们的个人资料照片的地方： UserCard.Js
{picture ? (
<div>
<Avatar
src={picture}
alt="Avatar"
classname="avatar--profile_image"
/>
<input
type="file"
onChange={onfileChange}
/>
<button onClick={handlesubmit}>submit</button>
</div>
) : (
<AccountCircleIcon classname="avatar--profile_image" />
)}
因此，当输入内容并点击添加按钮时，我的 API 声明 req.file 未定义，我无法找出原因。
谁能帮我分析错误？
要上传文件，您需要使用 contentType: "multipart/form-data"。 参考以下实现文件上传。
helper 函数来创建一个带有所需标头的实例。您可以在此处添加任何其他人。
const getInstance = () => {
return axios.create({
headers: {
"Content-Type": "multipart/form-data",},});
}
使用要上传的文件调用此方法
const fileUplaod = (file) => {
let formData = new FormData();
formData.append("images",file,file.name);
getInstance()
.post(endpoint_post_url,formData)
.then((response) => {
console.log("IMAGES_SUBMIT_SUCCESS");
})
.catch((err) => {
console.error("image submit error",err);
});
}
检查后端代码中的请求正文。您也可以将多张图片上传到同一媒体资源。它将是请求对象中的一个数组。
,编辑 handleSubmit 函数以向 axios 调用添加配置。
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('email',email);
formData.append('name',name);
formData.append('profileImg',imageSelected);
axios
.post(`/upload`,formData,{
headers: {
'Content-Type': "multipart/form-data"
}
})
.then(() => console.log("success"))
.catch(err => console.log(err));
};
以上是大佬教程为你收集整理的如何将图像从客户端发送到服务器节点 js react全部内容，希望文章能够帮你解决如何将图像从客户端发送到服务器节点 js react所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。