React 上传器的最佳实践

如何解决React 上传器的最佳实践

我构建了一个上传器元素，它接受多个文件，然后上传它们（一次最多 3 个）。不幸的是，结果是一团糟。我遇到了关键冲突和一堆古怪的行为。我认为问题可能在于“上传”状态的异步更新。每个上传元素都会频繁地使用当前进度更新共享的“上传”状态。如果有人可以查看此内容并指出对结构的改进，我将不胜感激。

upload 元素有一个 prop，它是一个从 input 元素接收文件的数组。道具通过后，我清除父级上的表单。

我在上传器上使用两种状态。 “open”控制元素的可见性，“uploads”跟踪所有文件。

    const [open,setOpen] = useState(true);
    const [uploads,setUploads] = useState([]);

当传递新文件时，我会向它们添加各种值以跟踪文件的状态，然后将它们添加到“上传”。

// Push to queue
    useEffect(() => {
        if (files.length === 0) return;

        setUploads((prev) => {
            const newArray = [...prev];

            // Add data to each file
            files.forEach((file) => {
                const id = uuidv4();
                const newFile = {
                    active: false,file: file,id: id,name: file.name,progress: 0,push: false,};
                newArray.push(newFile);
            });

            return [...newArray];
        });
    },[files]);

每当“上传”改变时，就会触发以下效果。它应该强制执行最大同时上传数量并过滤尚未上传的文件。

// Activate upload
    useEffect(() => {
        // Prevent running on empty array
        if (uploads.length === 0) return;

        // Limit number of uploads
        const activeUploads = uploads.filter((el) => el.active === true);
        if (activeUploads.length > 2) return;

        // Get first file from queue
        const file = uploads.find((el) => el.active === false);
        if (file === undefined) return;

        // Prevent duplicates
        //const duplicates = uploading.filter((el) => el.id === file.id);
        //if (duplicates.length > 0) return;

        // Add xhr to file
        createXhr(file).then((xhr) => {
            // Append xhr to element
            file.xhr = xhr;

            // Activate
            file.active = true;

            // Get index
            const i = uploads.findIndex((el) => el.id === file.id);

            //Push to active Uploads
            setUploads((prev) => {
                prev[i] = file;
                return [...prev];
            });

            // Start upload
            xhr.send(file.file);
        });
    },[uploads]);

仅供参考，这里是添加 xhr 对象的函数：

// Create xhr
    async function createXhr(fileObject) {
        // Get file from file object
        const file = fileObject.file;

        // Get file id
        const fileId = fileObject.id;

        // Get upload url
        const { url,uuid,key,name } = await getSignedUploadUrl({
            name: file.name,type: file.type,});

        // Create XHR object
        const xhr = new XMLHttpRequest();

        // onProgress
        xhr.upload.onprogress = (e) => {
            // Get progress
            const percentage = (e.loaded / e.total) * 100;

            //Push to active Uploads
            updateUpload(fileId,"progress",percentage);
        };

        // onError
        xhr.onerror = () => {
            xhr.abort();
        };

        // onAbort
        xhr.onabort = () => {
            removeUpload(fileId);
        };

        // onSuccess
        xhr.onload = async () => {
            // Set database
            const res = await checkWasabiFile(key);

            // Proceed if file exists
            if (res.data) {
                // Get download url
                const urlObject = await firebase
                    .functions()
                    .httpsCallable("sign_wasabi_download_url")({
                    storage_key: key,});

                // Create Firestore object
                await firebase
                    .firestore()
                    .collection("users")
                    .doc(user.uid)
                    .collection("files")
                    .doc(uuid)
                    .set({
                        storage_key: key,name: name.split(".")[0],owner: user.uid,path: "/",suffix: key.split(".")[1],tags: [],type: file.type.split("/")[0],url: urlObject.data,});

                // Get thumbnails
                if (file.type.split("/")[0] === "image") {
                    //Image
                    await fetch(
                        `https://api.cardboard.video/img-thumb-${env}?key=${key}`
                    );
                } else if (file.type.split("/")[0] === "video") {
                    //Video
                    fetch(`https://api.cardboard.video/video-thumb-${env}?key=${key}`);
                }
            } else {
                window.alert("There was a problem with your upload. Please try again.");
            }

            // Remove from uploads
            removeUpload(fileId);
        };

        xhr.open("PUT",url,true);
        xhr.setRequestHeader("Content-Type",file.type);

        return xhr;
    }

这里是更新进度状态和删除加载元素的函数：

// Remove item from upload
    const removeUpload = (id) => {

        // Remove from uploads
        setUploads((prev) => {
            const items = [...prev];
            const index = items.findIndex((el) => el.id === id);
            items.splice(index,1);
            return [...items];
        },console.log(uploads));
    };

    // Update upload object
    const updateUpload = (id,value) => {
        // Prevent execution on empty array
        if (uploads.length === 0) return;

        // Update upload state
        setUploads((prev) => {
            const items = [...prev];
            const i = items.findIndex((el) => el.id === id);
            if (items[i] === undefined) return [...prev];
            items[i][key] = value;
            return [...items];
        });
    };

我感谢任何建议。