React-Native: загрузка нескольких изображений на сервер - PullRequest
0 голосов
/ 10 июня 2019

Я создал функцию, позволяющую пользователям делать 1 фотографию, а затем загружать ее в мою базу данных Firebase. Однако я борюсь с:

1) Разрешение пользователям делать несколько снимков (скажем, 6). Есть ли какая-нибудь функция, которую я могу использовать, чтобы позволить камере оставаться открытой, чтобы позволить пользователям продолжать фотографировать, пока она не достигнет предела 6?

2) Объединение всех изображений и загрузка их в виде группы в базу данных Firebase. Прямо сейчас я просто определяю путь для хранения.

Я включил 5 функций, которые использую для:

1) Разрешить пользователю делать снимки с камеры (findNewImage)

2) Перед загрузкой убедитесь, что есть заголовок с изображением (uploadPublish)

3) Создайте путь к файлу для изображения на основе его формата: .png, .jpeg и т. Д. (UploadImage)

4) Загрузка изображения в Firebase с использованием пути к файлу, сгенерированного из «uploadImage» (completeUploadBlob)

5) Связывание изображения с базой данных в реальном времени (processUpload)

    findNewImage = async () => {
        this._checkPermissions();

        let result = await ImagePicker.launchCameraAsync({
            mediaTypes: "Images",
            allowsEditing: true,
            quality: 1
        });

        console.log("image picked is = result = ", result);

        if (!result.cancelled) {

            console.log("upload image");
            this.setState({
                imageSelected: true,
                imageId: this.uniqueId(),
                uri: result.uri
            });

        } else {

            console.log("cancel");
            this.setState({
                imageSelected: false
            });

        }
    };

    uploadPublish = () => {
        if (this.state.uploading == false) {

            if (this.state.caption != "") {
                //uploading image to firebase, as we have img with caption
                this.uploadImage(this.state.uri);
            } else {
                alert("Please enter caption for your photo before posting!");
            }

        } else {

            console.log("Ignoring click more than once.");

        }
    };

    // this is main function to upload upload img
    uploadImage = async uri => {
        let that = this;
        let userid = f.auth().currentUser.uid;
        let imageId = this.state.imageId; // imgId = uniqueIdGenerated()

        // check file extension ofo uploaded img
        let re = /(?:\.([^.]+))?$/; // filename, regular-expression
        let ext = re.exec(uri)[1]; // extension

        this.setState({
            currentFileType: ext,
            uploading: true
        });

        let FilePath = imageId + "." + that.state.currentFileType;

        const oReq = new XMLHttpRequest();
        oReq.open("GET", uri, true);
        oReq.responseType = "blob";
        oReq.onload = () => {
            const blob = oReq.response;
            //Call function to complete upload with the new blob to handle the uploadTask.
            this.completeUploadBlob(blob, FilePath);
        };

        oReq.send();
    };

    completeUploadBlob = (blob, FilePath) => {
        let that = this;
        let userid = f.auth().currentUser.uid;
        let imageId = this.state.imageId;

        let uploadTask = storage
        .ref("user/" + userid + "/img")
        .child(FilePath)
        .put(blob);

        uploadTask.on(
            "state_changed",
            snapshot => {
                let progress = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0);

                console.log("Upload is " + progress + "% completed.");

                that.setState({
                    progress: progress
                });
            },
            err => { console.log("error with upload - " + err); },

            // now upload is completed,
            () => {
                that.setState({
                    progress: 100
                });

                uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                    console.log("downloadURL is =", downloadURL);
                    that.processUpload(downloadURL);
                });
            }
        );
    };

    processUpload = imageUrl => {
        // set needed info of user

        //Set needed info
        let imageId = this.state.imageId;
        let userId = f.auth().currentUser.uid;
        let dateTime = Date.now();
        let caption = this.state.caption;
        let timestamp = Math.floor(dateTime / 1000);

        // we have uploaded img to storage, but we have to link that url with realtime-db
        // photo-json = author, caption, posted-timestamp, urlofimg

        let photoObj = {
            author: userId,
            caption: caption,
            posted: timestamp,
            url: imageUrl
        };

        // now, add info to realtime-db in two locations. as feed & profile
        // add data to photo-obj and user-object

        console.log("f.auth().currentUser.uid ", f.auth().currentUser.uid);
        // first to add photo to main feed of photos    database.ref("/photos/" + imageId).set(photoObj);

        // add photosobj to user-json as well.

        database.ref("/users/" + userId + "/photos/" + imageId).set(photoObj);

        // photo was not uploaded automatically to photos collection, on adding it to user's collection
        // then, manually adding that entry in photo collection after adding to users/userId/photosColln
        database.ref("/photos/" + imageId).set(photoObj);
        //  for debugging to see why image is not uploaded to database
        console.log("upload_226, userId =", userId);
        console.log("upload_226, imageId =", imageId);
        console.log("upload_226, photoObj is \n", photoObj);

        alert("Image Successfully Uploaded. Refresh Feed to View.");
        // after uploading photo, reset photo-attribute/ states

        this.setState({
            uploading: false,
            imageSelected: false,
            caption: "",
            uri: ""
        });
    };

Заранее спасибо

...