图片上传后编成base64再传给后端

最新推荐文章于 2024-04-02 18:35:53 发布

原创最新推荐文章于 2024-04-02 18:35:53 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

记录专栏收录该内容

20 篇文章

订阅专栏

<img className="thumbnail-img" src={imageUrl || '/images/default.png'}/>
<input id="file_load"  type="file"   accept="image/*"  ref={file}  onChange={upload} />

const AllowImgType = ["image/jpeg", "image/png", "image/bmp"];
 const upload = useCallback(() => {
    if (file?.current?.files) {
      let data = file?.current?.files[0];
      if (data) {
        if (!AllowImgType.includes(data.type)) {
          message.error("图片格式不符合要求");
          return;
        }
        const isLt8M = data.size / 1024 / 1024 < 8;
        if (!isLt8M) {
          message.error("图片不能超过8m");
          return;
        }
        let imgFile = new FileReader();
        imgFile.readAsDataURL(data);
        imgFile.onload = (res: any) => {
          setImageUrl(res.target.result);
        };
      }
    }
  }, [file, form]);