react图片上传

react（umi）上传头像和修改头像

node后端接口

1.上传图片

var multiparty = require("multiparty") //图片上传模块
router.post("/addimg", async (req, res) => {
    let form = new multiparty.Form()
    form.uploadDir = "upload"
    form.parse(req, (err, formData, imgData) => {
        res.send(imgData.file[0].path )
    })
})

2.react前端(antd组件)-函数组件

<Image
                    style={{
                      width: '250px',
                      height: '350px', 
                      marginLeft: '100px',
                    }}
                    width={250}
                    src={
                      chaunimg
                        ? `http://47.99.72.185:7777/${chaunimg}`
                        : `http://47.99.72.185:7777/${userMessage.imgpath}`
                    }
                    placeholder={
                      <Image
                        preview={false}
                        src={`http://47.99.72.185:7777/${userMessage.imgpath}`}
                        width={200}
                      />
                    }
                  />
       <Upload
                    action="/api/addimg"
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={handlePreview}
                    onChange={handleChanges}
                    onSuccess={success}
                  >
                    <Button icon={<UploadOutlined />}>更换头像</Button>
                  </Upload>

逻辑：

const [previewImage, setPreviewImage] = useState('');
  const [userImgPath, setUserImgPath] = useState();
  const [fileList, setFileList] = useState([]);
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewTitle, setPreviewTitle] = useState('');
  const [userMessage, setMessage] = useState(
    JSON.parse(sessionStorage.getItem('userMessage')),
  ); //登录之后的用户信息
  const [random, setRandom] = useState();
  // 上传成功之后的路径图片
  const [chaunimg, setchaunimg] = useState();
  function success(e) {
    setchaunimg(e);
    let url = 'http://47.99.72.185:7777/task/updateimg';
    request(url, {
      method: 'post',
      data: {
        xinxi: userMessage,
        path: e,
      },
    }).then((res) => {
      console.log(res);
      // setchaunimg(e)
    });
  }
  const handleCancel = () => setPreviewOpen(false);
  const handleChanges = ({ fileList: newFileList }) => {
 
    setFileList(newFileList);
  };

  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
    setPreviewTitle(
      file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    );
  };