{"id":2438,"date":"2025-12-22T17:29:00","date_gmt":"2025-12-22T09:29:00","guid":{"rendered":"https:\/\/womeifei.cn\/?p=2438"},"modified":"2025-12-22T17:29:16","modified_gmt":"2025-12-22T09:29:16","slug":"%e7%82%b9%e5%87%bb%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/12\/22\/%e7%82%b9%e5%87%bb%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87\/","title":{"rendered":"\u70b9\u51fb\u4e0a\u4f20\u56fe\u7247"},"content":{"rendered":"\n

src\/api\/FriendCircle\/index.ts<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

CircleDetailView.tsx<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\/\/ [\u65b0\u589e] \u4e0a\u4f20\u8bf7\u6c42\n  const { run: uploadAvatar, loading: uploadLoading } = useRequest2(\n    (file: File) => updateFriendGroupAvatar({ group_id: circle.group_id, file }),\n    {\n      manual: true,\n      successToast: \"\u5934\u50cf\u66f4\u65b0\u6210\u529f\", \/\/ \u5efa\u8bae\u7528 t() \u5305\u88f9\n      errorToast: \"\u5934\u50cf\u66f4\u65b0\u5931\u8d25\",\n      onSuccess: () => {\n        setAvatarKey(Date.now()); \/\/ \u66f4\u65b0\u65f6\u95f4\u6233\n        onRefresh(); \/\/ \u5237\u65b0\u7236\u7ec4\u4ef6\/\u5217\u8868\u6570\u636e\n      }\n    }\n  );\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\/\/ [\u65b0\u589e] \u70b9\u51fb\u5934\u50cf\u89e6\u53d1\u6587\u4ef6\u9009\u62e9\n  const handleAvatarClick = () => {\n    if (!isOnwer) return;\n    fileInputRef.current?.click();\n  };\n\n  \/\/ [\u65b0\u589e] \u6587\u4ef6\u9009\u62e9\u5904\u7406\n  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    \/\/ 1. \u7acb\u5373\u751f\u6210\u672c\u5730\u9884\u89c8 (0\u5ef6\u8fdf\u4f53\u9a8c)\n    const localUrl = URL.createObjectURL(file);\n    setPreviewUrl(localUrl);\n\n    \/\/ 2. \u4e0a\u4f20\n    uploadAvatar(file);\n    e.target.value = \"\"; \/\/ \u6e05\u7a7a value \u5141\u8bb8\u91cd\u590d\u9009\u540c\u4e00\u5f20\n  };\n\n  \/\/ [\u65b0\u589e] \u8ba1\u7b97\u6700\u7ec8\u663e\u793a\u7684\u56fe\u7247 URL\n  const displaySrc = useMemo(() => {\n    if (previewUrl) return previewUrl; \/\/ \u4f18\u5148\u663e\u793a\u521a\u624d\u9009\u7684\n    if (circle.avatar) return `${circle.avatar}?t=${avatarKey}`; \/\/ \u5176\u6b21\u663e\u793a\u670d\u52a1\u5668\u7684(\u5e26\u65f6\u95f4\u6233)\n    return namiIcon; \/\/ \u515c\u5e95\n  }, [previewUrl, circle.avatar, avatarKey]);<\/code><\/pre>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\/\/ \u522b\u5fd8\u4e86\u5f15\u5165\u4f60\u7684 toaster \u7ec4\u4ef6\u7528\u6765\u62a5\u9519\n  import { toaster } from \"@\/components\/common\/MyToaster\"; \n\n  \/\/ ... \u7ec4\u4ef6\u5185\u90e8 ...\n\n  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    \/\/ \ud83d\udee1\ufe0f \u7b2c\u4e00\u9053\u9632\u7ebf\uff1a\u6821\u9a8c\u683c\u5f0f\n    if (!ALLOWED_TYPES.includes(file.type)) {\n      toaster.create({\n        type: \"error\",\n        title: \"\u683c\u5f0f\u4e0d\u652f\u6301\",\n        description: \"\u4ec5\u652f\u6301 JPG \u6216 PNG \u683c\u5f0f\u7684\u56fe\u7247\",\n      });\n      \/\/ \u274c \u6821\u9a8c\u5931\u8d25\uff0c\u5fc5\u987b\u6e05\u7a7a input\uff0c\u5426\u5219\u7528\u6237\u4e0b\u6b21\u9009\u540c\u4e00\u4e2a\u9519\u6587\u4ef6\u4e0d\u4f1a\u89e6\u53d1 onChange\n      e.target.value = \"\"; \n      return;\n    }\n\n    \/\/ \ud83d\udee1\ufe0f \u7b2c\u4e8c\u9053\u9632\u7ebf\uff1a\u6821\u9a8c\u5927\u5c0f\n    if (file.size > MAX_FILE_SIZE) {\n      toaster.create({\n        type: \"error\",\n        title: \"\u56fe\u7247\u592a\u5927\u5566\",\n        description: \"\u8bf7\u4e0a\u4f20 2MB \u4ee5\u5185\u7684\u56fe\u7247\",\n      });\n      \/\/ \u274c \u6821\u9a8c\u5931\u8d25\uff0c\u6e05\u7a7a input\n      e.target.value = \"\";\n      return;\n    }\n\n    \/\/ \u2705 \u901a\u8fc7\u5b89\u68c0\uff0c\u653e\u884c\uff01\u6267\u884c\u9884\u89c8\u548c\u4e0a\u4f20\n    const localBlobUrl = URL.createObjectURL(file);\n    setPreviewUrl(localBlobUrl);\n    \n    uploadAvatar(file);\n    e.target.value = \"\"; \/\/ \u4e0a\u4f20\u5f00\u59cb\u540e\u4e5f\u8981\u6e05\u7a7a\uff0c\u5141\u8bb8\u91cd\u590d\u9009\u540c\u4e00\u5f20\u56fe\n  };<\/code><\/pre>\n\n\n\n
<\/h2>\n","protected":false},"excerpt":{"rendered":"
src\/api\/FriendCircle\/index.ts CircleDetailView.tsx<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2438","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2438"}],"version-history":[{"count":2,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2438\/revisions"}],"predecessor-version":[{"id":2450,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2438\/revisions\/2450"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}