分享一个看起来很酷的图片上传组件

  • 分享一个看起来很酷的图片上传组件已关闭评论
  • 40 次浏览
  • A+
所属分类:Web前端
摘要

点赞 + 收藏 === 学会🤣🤣🤣 可能有人觉得,这个组件很简单,没什么技术含量,其实确实也啥技术含量。但是,我是想借这个组件,来表达一种封装的思想在里面,希望可以帮助到一些朋友。


🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

分享一个看起来很酷的图片上传组件

 

可能有人觉得,这个组件很简单,没什么技术含量,其实确实也啥技术含量。但是,我是想借这个组件,来表达一种封装的思想在里面,希望可以帮助到一些朋友。

简单的描述下这个组件的功能:

  • 用户可以点击下面颜色比较绚丽的上传按钮,选择本地图片进行上传,也可以直接点击图片区域进行上传。
  • 上传过程中,会有一个上传中的进度条,上传完成后,会有一个上传成功的提示,如果失败了,会有一个上传失败的提示,而且支持重试。
  • 可以点击图片右上角的删除按钮,删除图片。
  • 并发控制,最多只能同时上传 N 张图片,也就是所谓的限频,这里是 2 张。

是不是看了这么多功能之后,就开始有点头皮发麻了?哈哈,不要怕,这就带你了解下,如何拆解这种功能,而且,学会了这种拆解的办法,后面你遇到更加复杂的,也可以得心应手。

拆解功能,逐步实现

首先,我们思考,我们该使用自底向上的思路,还是自顶向下的思路来拆解这个功能呢?我的建议自顶向下的思路去思考架构,然后自底向上的去实现功能。

分享一个看起来很酷的图片上传组件

因为我们这个图片上传组件是支持多长图片同时上传的,而且,我们还需要支持上传失败重试的功能,所以,为了让功能更加聚焦,我们把关注点放在 PhotoItem 上,没一个 PhotoItem 就是一个图片上传的单元。他可以独立的上传,独立的删除,独立的重试。

那么,为了让 PhotoItem 这个组件更加简洁,我们把上传逻辑放在hooks useUpload中,这样,PhotoItem 只需要关注自己的展示逻辑即可。

这样做的目的是做到关注点分离,通常来讲,也是符合单一职责原则的。写出来的组件维护性必定大大提升。

代码实现

我们先来看下 useUpload 的代码,因为PhotoItem 依赖他,我们先实现它。

"use client"; export const useUploader = (uploadAction) => {   const [isUploading, setIsUploading] = useState(false);   const [error, setError] = useState(null);   const upload = useCallback(async (file) => {     setIsUploading(true);     setError(null);     try {         return await uploadAction(file);     } catch (err) {       setError(err.message || 'Upload failed');     } finally {       setIsUploading(false);     }   }, [uploadAction]);    const reset = useCallback(() => {     setIsUploading(false);     setError(null);   }, []);    return { upload, isUploading, error, reset }; };

可以看到,我们的 hooks 非常之简单,就是暴露了一个实现图片上传的狗子 upload,然而,他替我们的组件管理了上传中,上传失败,的状态,因此,接下来看,我们的PhotoItem 组件将会有多清晰。

export const PhotoItem = ({   file,   onRemove,   onUploadComplete,   onUploadError, }) => {   const { upload, isUploading, error, reset } = useUploader();    const startUpload = useCallback(async () => {     try {       const url = await upload(file);       onUploadComplete(url);     } catch (err) {       onUploadError();     }   }, [file, upload, onUploadComplete, onUploadError]);    useEffect(() => {       startUpload();   }, [queueUpload, startUpload]);    const handleRetry = () => {     reset();     startUpload();   };    return (     <div className="relative w-full h-20">       <img         src={URL.createObjectURL(file)}       />       {!isUploading && !error(           Uploaded       )}       {isUploading && (           <Progress  />       )}       {error && (           <span>Failed</span>       )}     </div>   ); }; 

OK,到目前为止,还是极其简单的,但是我们貌似忘记了一个很核心的功能,限制并发数。为什么要限制并发数,因为我们自己的服务器或者三方的服务器,可能会有并发数的限制,如果我们不限制并发数,可能会导致一次传多张图片是卡住。

思考,如何限制并发数

我们想一样,是谁触发了上传的呢?是不是 PhotoItem 组件呢?是的,我们可以在 PhotoItem 组件中,去控制并发数,但是,这样做,会导致 PhotoItem 组件的逻辑变得复杂,因为他不仅要关注自己的展示逻辑,还要关注并发数的控制逻辑。这就显的不太合适了。所以,我们应该把他丢出去对吧,截止到目前为止,我们的PhotoUploader 这个组件似乎并没有干任何事情,我们思考下,并发控制的逻辑是否应该是他来呢?

答案是显然的,我们应该把并发控制的逻辑放在 PhotoUploader 组件中,因为他是整个上传组件的入口,他应该关注并发控制,而不是 PhotoItem 组件,而且最本质的原因是,PhotoItem 也不关心是否有其他的 PhotoItem 。

那么,问题来了,并发控制怎么写呢?使用什么数据结构较为合适呢?不卖关子了,我们知道,队列是最合适的数据结构,因为他是先进先出的,我们可以把上传任务放在队列中,然后,每次上传完成,就从队列中取出一个任务,继续上传。

好,我们改造一下,我们的 PhotoItem 组件,让他不要直接执行上传逻辑,而是把他做成一个任务,然后,把任务放在队列中,然后,我们在 PhotoUploader 组件中,去控制并发数。

export const PhotoItem = ({   file,   onRemove, ...   queueUpload // 加一个队列操作器 }) => {   const { upload, isUploading, error, reset } = useUploader(); ...  useEffect(() => {     queueUpload(startUpload); // 修改这里 }, [queueUpload, startUpload]);   const handleRetry = () => {     reset();     queueUpload(startUpload);//修改这里 };  // .... 其他几乎不变

在来看看我们的 PhotoUploader 组件,他是如何控制并发数的。很简单,我们只需要维护一个队列,然后,每次上传完成,就从队列中取出一个任务,继续上传。

  const processQueue = useCallback(() => {     while (activeUploadsRef.current < MAX_CONCURRENT_UPLOADS && uploadQueueRef.current.length > 0) {       const nextUpload = uploadQueueRef.current.shift();       activeUploadsRef.current++;       nextUpload();     }   }, []);    const queueUpload = useCallback((startUpload) => {     if (activeUploadsRef.current < MAX_CONCURRENT_UPLOADS) {       activeUploadsRef.current++;       startUpload();     } else {       uploadQueueRef.current.push(startUpload);     }   }, []);

这里,只给出最最核心的逻辑,实际上就是维护的了一个任务队列,然后,每次上传完成,就判断下队列中是否还有任务,并且是否超过了并发数,如果没有超过,并且队列中还有任务,就继续上传。仅此而已。

总结一下

这个图片上传组件,看似简单,但是,他涉及到了很多的知识点,比如并发控制,上传失败重试,组件拆解,自顶向下的架构设计,自底向上的功能实现。我们在实现这个组件的过程中。有过很多的思考,比如:

  • 如何拆解功能,让组件更加聚焦,做到关注点分离。
  • 控制并发数,使用队列是最合适的数据结构。
  • 如何设计一个 hooks,让组件更加简洁。
  • 以及自顶向下的架构设计,自底向上的功能实现。

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 分享一个看起来很酷的图片上传组件