无法使用 cloudinary 更新个人资料图片

Question

我已经尝试在 Cloudinary 中上传图像，并且还想将其保存到我的数据库中。在 Cloudinary 中上传图像工作正常，但我无法将其保存到我的数据库中。每当我尝试这样做时，它都只使用我在模型中设置的默认图像。也喜欢 setPic 正在工作，但有一段时间又一次更改为默认图像。请任何人帮我解决这个问题。

如果您需要任何其他详细信息，请发表评论。请帮助我。

这是函数

const postDetails = (pics) => {
    setPicMessage(null);
    if (pics?.type === 'image/jpeg' || pics?.type === 'image/png') {
      const data = new FormData();
      data.append('file', pics);
      data.append('upload_preset', 'codeblogger_profile_image');
      data.append('cloud_name', 'dhuej17x0');
      fetch('https://api.cloudinary.com/v1_1/dhuej17x0/image/upload', {
        method: 'post',
        body: data,
      })
        .then((res) => res.json())
        .then((data) => {
          setPic(data.secure_url.toString());
          console.log(pic);
        })
        .catch((err) => {
          toast.error(err);
        });
    } else {
      setPicMessage('Please Select an Image');
      toast.error(picMessage);
    }
  };

这里是完整的 Profile.js 文件

import React, { useEffect, useState } from 'react';
import { Button, Col, Container, Form, InputGroup, Row } from 'react-bootstrap';
import { toast, ToastContainer } from 'react-toastify';
import { useDispatch, useSelector } from 'react-redux';
import { getUserDetails, updateUserProfile } from '../actions/userActions';
import { USER_UPDATE_PROFILE_RESET } from '../constant/userConstants';

const Profile = ({ history }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [pic, setPic] = useState();
  const [password, setPassword] = useState('');
  const [picMessage, setPicMessage] = useState();
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordType, setPasswordType] = useState('password');
  const [passwordType2, setPasswordType2] = useState('password');
  const [showPass, setShowPass] = useState(false);
  const [showPass2, setShowPass2] = useState(false);

  const dispatch = useDispatch();

  const userDetails = useSelector((state) => state.userDetails);
  const { user } = userDetails;

  // console.log(` this is from line 25 ${user}`);

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const userUpdateProfile = useSelector((state) => state.userUpdateProfile);
  const { success } = userUpdateProfile;

  useEffect(() => {
    if (!userInfo) {
      history.push('/login');
    } else {
      if (!user || !user.name || success) {
        dispatch({ type: USER_UPDATE_PROFILE_RESET });
        dispatch(getUserDetails('profile'));
      } else {
        setName(user.name);
        setEmail(user.email);
        setPic(user.pic);
      }
    }

    if (success) {
      toast.success('Profile Updated successfully');
    }
    showPass ? setPasswordType('text') : setPasswordType('password');
    showPass2 ? setPasswordType2('text') : setPasswordType2('password');
  }, [showPass, showPass2, dispatch, history, success, user, userInfo]);

  const postDetails = (pics) => {
    setPicMessage(null);
    if (pics?.type === 'image/jpeg' || pics?.type === 'image/png') {
      const data = new FormData();
      data.append('file', pics);
      data.append('upload_preset', 'codeblogger_profile_image');
      data.append('cloud_name', 'dhuej17x0');
      fetch('https://api.cloudinary.com/v1_1/dhuej17x0/image/upload', {
        method: 'post',
        body: data,
      })
        .then((res) => res.json())
        .then((data) => {
          setPic(data.secure_url.toString());
          console.log(pic);
        })
        .catch((err) => {
          toast.error(err);
        });
    } else {
      setPicMessage('Please Select an Image');
      toast.error(picMessage);
    }
  };

  const submitHandler = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      toast.error('Passwords do not match');
    } else {
      dispatch(updateUserProfile({ id: user._id, name, email, password }));
    }
  };

  return (
    <div className="profilePage mt-4 py-3">
      <ToastContainer />
      <Container>
        <h2>PROFILE</h2>
        <Row className="profileContainer">
          <Col md={6}>
            <Form onSubmit={submitHandler}>
              <Form.Group controlId="name" className="mb-2">
                <Form.Label>Name</Form.Label>
                <Form.Control
                  type="text"
                  value={name}
                  placeholder="Name"
                  onChange={(e) => setName(e.target.value)}
                />
              </Form.Group>
              <Form.Group controlId="email" className="mb-2">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </Form.Group>
              <Form.Group controlId="password" className="mb-2">
                <Form.Label>New Password</Form.Label>
                <InputGroup>
                  <Form.Control
                    type={passwordType}
                    placeholder="New Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <InputGroup.Text>
                    <i
                      onClick={() => setShowPass(!showPass)}
                      className={showPass ? 'fas fa-eye-slash' : 'fas fa-eye'}
                      style={{ cursor: 'pointer' }}></i>
                  </InputGroup.Text>
                </InputGroup>
              </Form.Group>
              <Form.Group controlId="confirmPassword" className="mb-2">
                <Form.Label>Confirm Password</Form.Label>
                <InputGroup>
                  <Form.Control
                    type={passwordType2}
                    placeholder="Confirm Password"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                  />
                  <InputGroup.Text>
                    <i
                      onClick={() => setShowPass2(!showPass2)}
                      className={showPass2 ? 'fas fa-eye-slash' : 'fas fa-eye'}
                      style={{ cursor: 'pointer' }}></i>
                  </InputGroup.Text>
                </InputGroup>
              </Form.Group>
              <Form.Group controlId="pic" className="mb-2">
                <Form.Label>Change Profile Picture</Form.Label>
                <Form.Control
                  onChange={(e) => postDetails(e.target.files[0])}
                  type="file"
                  accept=".jpeg,.png,.jpg"
                  custom="true"
                />
              </Form.Group>
              <Button
                type="submit"
                variant="success"
                style={{ letterSpacing: '2px' }}>
                UPDATE
              </Button>
            </Form>
          </Col>
          <Col
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <img src={pic} alt={user.name} className="profilePic" />
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default Profile;

Answer 1

在 submitHandler 方法中，您没有在 updateUserProfile 中传递 pic 变量。

使用这个

dispatch(updateUserProfile({ id: user._id, name, email, password, pic }));

无法使用 cloudinary 更新个人资料图片

Can't update the profile picture using cloudinary

cloudinary

reactjs

redux

mern

这是函数

这里是完整的 Profile.js 文件