antdpro+github rest api实现向GitHub上传图片等文件

Github rest api

创建或上传内容的GitHub api官方文档地址，示例如下（其他api参考官方文档）：

PUT /repos/{owner}/{repo}/contents/{path}

await octokit.request('PUT https://api.github.com/repos/{owner}/{repo}/contents/{path}', {
  owner: 'OWNER',
  repo: 'REPO',
  path: '在仓库中的存储路径+文件名',
  message: 'my commit message',
  committer: {
    name: 'Monalisa Octocat',
    email: 'octocat@github.com'
  },
  content: 'bXkgbmV3IGZpbGUgY29udGVudHM='
})

Headers

Headers	type	example	describe
accept	string	application/vnd.github.v3+json	v3或者v4,默认为v3
Authorization	string	“token ghp_NfF***** 2pjEKc”	认证方式有多种，此处token可在官网生成

Path parameters

parameters	type	example	required	describe
owner	string	user1	true	用户名
repo	string	repo1	true	仓库名
path	string	docs/abc.txt	true	文件路径与文件名

Body parameters

parameters	type	example	required	describe
message	string	“my commit message”	true	描述
content	string	‘YWJj’	true	The new file content, using Base64 encoding.
sha	string		true/false	Required if you are updating a file. The blob SHA of the file being replaced.
branch	string		false	The branch name. Default: the repository’s default branch (usually master)
committer	object		false	The person that committed the file. Default: the authenticated user.
author	object		false	The author of the file. Default: The committer or the authenticated user if you omit committer.

antd pro

FileReader()

一般会用到此方法，参考该方法文档地址

构造函数

FileReader()
返回一个新构造的FileReader。

有关详细信息和示例，请参阅如何在 web 应用程序中使用文件。

属性

1. FileReader.error 只读
   一个DOMException，表示在读取文件时发生的错误 。

2. FileReader.readyState 只读
   表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据。
LOADING	1	数据正在被加载。
DONE	2	已完成全部的读取请求。

3. FileReader.result 只读
   文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件处理

1. FileReader.onabort
   处理abort (en-US)事件。该事件在读取操作被中断时触发。

2. FileReader.onerror (en-US)
   处理error (en-US)事件。该事件在读取操作发生错误时触发。

3. FileReader.onload
   处理load (en-US)事件。该事件在读取操作完成时触发。

4. FileReader.onloadstart
   处理loadstart (en-US)事件。该事件在读取操作开始时触发。

5. FileReader.onloadend
   处理loadend (en-US)事件。该事件在读取操作结束时（要么成功，要么失败）触发。

6. FileReader.onprogress
   处理progress (en-US)事件。该事件在读取Blob时触发。

备注： 因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

方法

1. FileReader.abort()
   中止读取操作。在返回时，readyState属性为DONE。

2. FileReader.readAsArrayBuffer()
   开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

3. FileReader.readAsBinaryString() 非标准
   开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

4. FileReader.readAsDataURL()
   开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

5. FileReader.readAsText()
   开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

upload组件

部分代码

const [fileListState, setFileListState] = useState<UploadFile[]>()
<Upload
   name="avatar"
   listType="picture-card"
   showUploadList={true}
   //内部会根据给出的地址自动上传，自定义上传逻辑需要实现customrequest
   //action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
   beforeUpload={(file) => {
     const fileType = file.type;
     if (fileType !== 'image/jpeg' && fileType !== 'image/png') {
        message.error('你只能上传 JPG/PNG 文件!');
       return false;
      }
     const fileSize = file.size;
     if (fileSize > 2 * 1024 * 1024) {
       message.error('你的文件大小超过2M!');
       return false;
     }
     return true;
    }}
    //上传中、完成、失败都会调用这个函数。
   onChange={handleChange}
   fileList={fileListState}
   customRequest={uploadImg}
  >
  {imgurl ? <img src={imgurl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>

onChange方法

const handleChange: UploadProps['onChange'] = (info) => {
	//打印出onchange的参数结构如下图
	//状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
   console.log(info);
	setFileListState(info.fileList);
};

解释一下上图这里fileList的数组大小为6的含义：发现在点击上传文件按钮并选择文件后，第一次调用onChange，会把选择的图片文件信息加入到info对象的file属性对象中，同时，再将file加入到fileList属性数组中。所以此处打印出的info中的file为刚才点击上传的图片文件信息，fileList为组件中fileList属性指定的fileListState（存储在state中，此处打印时为5个成员）数组+刚上传的文件（一共为6个成员）。之后在onChange方法将info中的fileList存储到state中setFileListState(info.fileList);，组件中fileList属性指定的fileListState就有了新上传的图片（由5个变成6个）

customRequest方法：

customRequest 怎么使用？
请参考：https://github.com/react-component/upload#customrequest
实现customRequest:

const uploadImg = (options: any) => {
    console.log('this is upload options,', options);

    const { file, onError, onSuccess } = options;
    const reader = new FileReader();
	//读取图片文件，并转码为base64
    reader.readAsDataURL(file);
    reader.onload = async (fileInfo) => {
      const file64 = fileInfo.target?.result?.toString();
   	  //github上传文件的格式要求不要携带头部信息，进行切割
      const content = file64?.split('base64,')[1] as string;
	  //定义图片文件名
      const date = moment().format('YYYYMMDD');
      const pre = crypto.randomUUID();
      const filename = 'mall/' + date + '-' + pre + '-' + file.name;
      //console.log('这是文件名', filename);
      try {
	    //此处直接调用自己在前端使用umi request实现的上传方法，因为要配置token等信息，也可以将文件上传到自己的后端再上传到GitHub
        const msg = await uploadImg2Git(filename, {
          message: 'upload avatar',
          content,
        });
        setUploading(false);
        console.log('github返回的msg', msg);
		//解析出GitHub返回的信息，得到有用的信息
        const { path, sha } = msg.content;
		//组装图片的访问路径，由于国内好像无法访问GitHub直链（使用魔法可以忽略），可以利用GitHub pages访问到，路径格式：
        //https://用户名.github.io/images/mall/20220920-da8549e0-dd69-4641-aa67-6f3c9202e903-1a1.png
        const avatarUrl = 'https://用户名.github.io/images/' + path;
		//将文件列表即其他一些有用的信息存入State
        setFileList([
          {
            ...fileList[0],
            status: 'done',
            fileName: filename,
            url: avatarUrl,
            linkProps: { sha },
          },
        ]);
		//onSuccess，onError等方法会改变fileList中file的status状态，同时触发onChange方法
        onSuccess(msg, file);
      } catch (error) {
        console.log('上传失败');
        onError(error, file);
      }
    };
  };