react处理图片base64位上传

1.react处理图片base64位上传，使用react+antd的Upload组件

const [pice,setPice] = useState() //定义图片的默认值

//定义图片转base64方法
  function customRequest(option) {
    const formData = new FormData();
    formData.append("files[]", option.file);
    const reader = new FileReader();
    reader.readAsDataURL(option.file);
    reader.onloadend = function(e) {
      console.log(e.target.result);// 打印图片的base64
      setPice(e.target.result)
      if (e && e.target && e.target.result) {
        option.onSuccess();
      }
    };
  }

	//请求接口
 const onFinish = (values) => {
    console.log(id, values);
    getRegister({
      id: id,
      title: values.title,
      picture:pice,
    }).then(res => {
      console.log(res);
      message.success(res.data)
    })
  }
 
 //至关重要
const props = {
    customRequest: customRequest,  //调用base64方法
    showUploadList: true, // 页面展示文件列表
    // beforeUpload: beforeUpload
  };

const uploadButton = (
    <div>
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
          color: "#1890FF"
        }}
      >
        上传图片
      </div>
    </div>
  );

return (
    <div id='map'>
            <Form className='form'
              labelCol={{
                span: 2,
              }}
              wrapperCol={{
                span: 18,
              }}
              layout="horizontal"
              // onValuesChange={onFormLayoutChange}
              onFinish={onFinish}
            >
              <Form.Item label="图片" name="picture" >
                <Upload {...props}   //至关重要
                // action={getRegister}
                  listType="picture-card"
                  fileList={fileList}
                  onPreview={handlePreview}
                  // onChange={handleChange}
                  >
                  { uploadButton}
                </Upload>
              </Form.Item>
    </div>
  )

2.图片地址转base64上传

const [Img, setImg] = useState() //完整的base64位地址
const [Imgs, setImgs] = useState() //去掉data:image/jpeg;base64,的地址
let imgUrl = "https://img2.baidu.com/it/u=119687581,2050452551&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670691600&t=d2d54e983720723fedcb1e47b44f8f83"

useEffect(getBase64(imgUrl), [])

  const getBase64 = (imgUrl) => {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    // 至关重要
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        //得到一个blob对象
        var blob = this.response;
        console.log("blob", blob)
        // 至关重要
        let oFileReader = new FileReader();
        console.log(oFileReader);
        oFileReader.onloadend = function (e) {
          // 此处拿到的已经是 base64的图片了
          let base64 = e.target.result;
          let base = base64.split(',')[1]
          // console.log("方式一》》》》》》》》》", base64)
          // console.log(base);
          setImgs(base64)
          setImg(base)
        };
        oFileReader.readAsDataURL(blob);
      }
    }
    xhr.send();
  }

3.图片url地址转base64上传（解决跨域问题）。注：只能解决大多跨域问题，有一些还是需要配合后端解决。

 let image = 'https://static.veer.com/veer-v2/cms/20221223/41fa74744c5b4c2ebac19039891fb9f7.jpg'
  getBase64(image).then((res)=>{
    console.log(res);  // 图片base64位地址
  })
  function getBase64(img_url) {
    debugger;
    function toBase64(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL('image/png');hongkong
      return base64;
    }
    
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.setAttribute('crossOrigin', 'anonymous'); // 解决跨域
      image.crossOrigin = '*';
      image.src = img_url + '?v=' + Math.random();  // 解决图片URL缓存问题
      image.onload = () => {
        console.log("111");
        resolve(toBase64(image));
      };
    });
  }