feat: 群组头像上传与修改

shared/index.tsx

@@ -101,6 +101,7 @@ export {
   isDevelopment,
   version,
 } from './utils/environment';
-export { getTextColorHex } from './utils/string-helper';
+export { getTextColorHex, isValidStr } from './utils/string-helper';
 export { uploadFile } from './utils/upload-helper';
+export type { UploadFileResult } from './utils/upload-helper';
 export { sleep } from './utils/utils';

shared/utils/upload-helper.ts

@@ -3,7 +3,7 @@ import { request } from '../api/request';
 interface UploadFileOptions {
   onProgress?: (percent: number, progressEvent: unknown) => void;
 }
-interface UploadFileResult {
+export interface UploadFileResult {
   etag: string;
   path: string;
   url: string;
@@ -19,7 +19,7 @@ export async function uploadFile(
   const form = new FormData();
   form.append('file', file);
 
-  const { data } = await request.post('/file/v2/image/upload', form, {
+  const { data } = await request.post('/upload', form, {
     onUploadProgress(progressEvent) {
       if (progressEvent.lengthComputable) {
         if (typeof options.onProgress === 'function') {

web/src/components/Avatar.tsx

@@ -6,7 +6,7 @@ import _isNil from 'lodash/isNil';
 import _isEmpty from 'lodash/isEmpty';
 import _isNumber from 'lodash/isNumber';
 import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar';
-import { getTextColorHex } from 'tailchat-shared';
+import { getTextColorHex, isValidStr } from 'tailchat-shared';
 
 interface AvatarProps extends AntdAvatarProps {
   name?: string;
@@ -14,7 +14,7 @@ interface AvatarProps extends AntdAvatarProps {
 }
 export const Avatar: React.FC<AvatarProps> = React.memo((_props) => {
   const { isOnline, ...props } = _props;
-  const src = typeof props.src !== 'string' ? props.src : undefined;
+  const src = isValidStr(props.src) ? props.src : undefined;
 
   const name = useMemo(() => _upperCase(_head(props.name)), [props.name]);
 

web/src/components/AvatarUploader.tsx

@@ -0,0 +1,44 @@
+import { blobUrlToFile } from '@/utils/file-helper';
+import React, { useState } from 'react';
+import { uploadFile, UploadFileResult, useAsyncRequest } from 'tailchat-shared';
+import { AvatarPicker } from './AvatarPicker';
+
+export const AvatarUploader: React.FC<{
+  onUploadSuccess: (fileInfo: UploadFileResult) => void;
+}> = React.memo((props) => {
+  const [uploadProgress, setUploadProgress] = useState(0); // 0 - 100
+  const [{ loading }, handlePickImage] = useAsyncRequest(
+    async (blobUrl: string) => {
+      const file = await blobUrlToFile(blobUrl);
+
+      const fileInfo = await uploadFile(file, {
+        onProgress(percent) {
+          const uploadProgress = Number((percent * 100).toFixed());
+          console.log(`进度:${uploadProgress}`);
+          setUploadProgress(uploadProgress);
+        },
+      });
+
+      console.log('上传成功', fileInfo);
+      props.onUploadSuccess(fileInfo);
+    },
+    []
+  );
+
+  return (
+    <AvatarPicker
+      className="relative"
+      disabled={loading}
+      onChange={handlePickImage}
+    >
+      {props.children}
+      {loading && (
+        <div
+          className="absolute bottom-0 left-0 h-1"
+          style={{ width: `${uploadProgress}%` }}
+        />
+      )}
+    </AvatarPicker>
+  );
+});
+AvatarUploader.displayName = 'AvatarUploader';

web/src/components/modals/GroupDetail/Summary.tsx

@@ -1,4 +1,5 @@
 import { Avatar } from '@/components/Avatar';
+import { AvatarUploader } from '@/components/AvatarUploader';
 import {
   DefaultFullModalInputEditorRender,
   FullModalField,
@@ -7,7 +8,9 @@ import { NoData } from '@/components/NoData';
 import React from 'react';
 import {
   modifyGroupField,
+  showToasts,
   t,
+  UploadFileResult,
   useAsyncRequest,
   useGroupInfo,
 } from 'tailchat-shared';
@@ -20,6 +23,15 @@ export const GroupSummary: React.FC<{
   const [, handleUpdateGroupName] = useAsyncRequest(
     async (newName: string) => {
       await modifyGroupField(groupId, 'name', newName);
+      showToasts(t('修改群组名成功'), 'success');
+    },
+    [groupId]
+  );
+
+  const [, handleGroupAvatarChange] = useAsyncRequest(
+    async (fileInfo: UploadFileResult) => {
+      await modifyGroupField(groupId, 'avatar', fileInfo.url);
+      showToasts(t('修改群组头像成功'), 'success');
     },
     [groupId]
   );
@@ -30,11 +42,13 @@ export const GroupSummary: React.FC<{
 
   return (
     <div className="flex">
-      <div className="w-1/2">
-        <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
+      <div className="w-1/3">
+        <AvatarUploader onUploadSuccess={handleGroupAvatarChange}>
+          <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
+        </AvatarUploader>
       </div>
 
-      <div className="w-1/2">
+      <div className="w-2/3">
         <FullModalField
           title={t('群组名')}
           value={groupInfo.name}

web/src/utils/file-helper.ts

@@ -0,0 +1,116 @@
+import _get from 'lodash/get';
+
+/**
+ * 传入一个图片文件， 返回对应的 Base64 编码
+ * @param img 图片文件
+ */
+export function fileToDataUrl(img: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => resolve(String(reader.result ?? '')));
+    reader.addEventListener('error', () => reject(reader.error));
+    reader.readAsDataURL(img);
+  });
+}
+
+/**
+ * 传入文件并返回该文件的内容
+ * @param file 文件对象
+ */
+export function fileToText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => resolve(String(reader.result ?? '')));
+    reader.addEventListener('error', () => reject(reader.error));
+    reader.readAsText(file);
+  });
+}
+
+/**
+ * 根据一个BlobUrl地址获取相应的Blob对象
+ * @param blobUrl blobUrl 地址，由URL.createObjectURL方法生成
+ */
+export function blobFromUrl(blobUrl: string): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const req = new XMLHttpRequest();
+    req.responseType = 'blob';
+    req.onload = () => {
+      resolve(req.response);
+    };
+    req.onerror = () => {
+      reject(req.responseText);
+    };
+    req.open('get', blobUrl);
+    req.send();
+  });
+}
+
+/**
+ * Blob对象转文件对象
+ * @param blob Blob对象
+ * @param fileName 文件名
+ */
+export function blobToFile(blob: Blob, fileName: string): File {
+  return new File([blob], fileName, {
+    lastModified: new Date().valueOf(),
+    type: blob.type,
+  });
+}
+
+/**
+ * blobUrl 转 文件对象
+ * @param blobUrl blobUrl
+ * @param fileName 文件名
+ */
+export async function blobUrlToFile(
+  blobUrl: string,
+  fileName = 'image.jpg'
+): Promise<File> {
+  const blob = await blobFromUrl(blobUrl);
+  return blobToFile(blob, fileName);
+}
+
+/**
+ * 下载Bloburl
+ */
+export async function downloadBlobUrl(blobUrl: string, fileName: string) {
+  const a = document.createElement('a');
+  a.href = blobUrl;
+  a.download = fileName; // 这里填保存成的文件名
+  a.click();
+}
+
+/**
+ * 下载Blob文件
+ */
+export async function downloadBlob(blob: Blob, fileName: string) {
+  const url = String(URL.createObjectURL(blob));
+  downloadBlobUrl(url, fileName);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * 打开一个选择文件的窗口, 并返回文件
+ */
+interface FileDialogOptions {
+  accept?: string;
+}
+export async function openFile(
+  fileDialogOptions?: FileDialogOptions
+): Promise<File | null> {
+  return new Promise((resolve) => {
+    const fileEl = document.createElement('input');
+    fileEl.setAttribute('type', 'file');
+    if (typeof fileDialogOptions?.accept === 'string') {
+      fileEl.accept = fileDialogOptions.accept;
+    }
+    fileEl.addEventListener('change', function (e) {
+      const file: File | null = _get(this, ['files', 0], null);
+      resolve(file);
+
+      fileEl.remove();
+    });
+
+    fileEl.click();
+  });
+}