React 将静态文件中指定路径的图片url上传

在项目中经常会遇到上传图片， 通常的一种图片上传，就是使用<input type='file' />组件来选择图片进行上传操作，

项目中遇到将静态文件夹中的一张默认图片直接上传的需求。

此时知道图片的路径，就不需要选择图片的操作。

在项目中使用react，然后使用在点击按钮时使用require('url')，将图片路径引入，这时读取的信息就是图片base64的字符串，

然后将base64的字符串传给后端，后端接口要可以解析base64字符串。

使用ant design 组件
<Button className={'default-image-btn'} loading={this.state.loading} onClick={this.onUploadDefaultImage}>应用默认图片</Button>

/**
   * 上传默认图片
   * */
  onUploadDefaultImage = (e) => { try {
      let urlImage = require(defaultImages[size]);
      let filestr = urlImage.split(',')[1];  // 读取文件内容中base64的信息
      this.setState({loading: true});
      let uploadUrl = '';  // 图片上传的URL接口
      // 请求后端接口 
      /**
      request(uploadUrl, {filestr})
        .then(res => {
          this.setState({loading: false});
          if (res) {
            // 上传成功
          } else {
            // 提示错误信息 默认图片上传失败;
          }
        });
       */
    } catch (err) {
      // 提示错误信息 默认图片上传失败;
    }

  }