将图像上传到火柴存储V9 (相机和图像选择器)后，响应本地世博会的崩溃

Question

我正在学习如何用火基地来应对。当我试图保存一篇文章，里面有画廊里的图片，或者是iphone的照片，应用程序就崩溃了。

我的代码：

const savePost =  async() => {

    if(!image) return;

    const path = `posts/${auth.currentUser.uid}/${Math.random().toString(36)}`;

            // Create the file metadata
    /** @type {any} */
    const metadata = {
        contentType: 'image/jpeg'
    };

    const response = await fetch(image);
    const blob = await response.blob();
    
    // Upload file and metadata to the object 'images/mountains.jpg'
    const storageRef = ref(storage, path);
    const uploadTask = uploadBytesResumable(storageRef, blob, metadata);
    
    // Listen for state changes, errors, and completion of the upload.
    uploadTask.on('state_changed',
        (snapshot) => {
        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + Math.round(progress) + '% done');
        switch (snapshot.state) {
            case 'paused':
            console.log('Upload is paused');
            break;
            case 'running':
            console.log('Upload is running');
            break;
        }
        }, 
        (error) => {
        // A full list of error codes is available at
        // https://firebase.google.com/docs/storage/web/handle-errors
        switch (error.code) {
            case 'storage/unauthorized':
            // User doesn't have permission to access the object
            console.log("// User doesn't have permission to access the object");
            break;
            case 'storage/canceled':
            // User canceled the upload
            console.log("// User canceled the upload");
            break;
    
            // ...
    
            case 'storage/unknown':
            // Unknown error occurred, inspect error.serverResponse
            console.log("// Unknown error occurred, inspect error.serverResponse");
            break;
        }
        }, 
        () => {
        // Upload completed successfully, now we can get the download URL
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log('File available at', downloadURL);
        });
        }
    );
    
}

上传它的工作效率达到24%，应用程序崩溃，我有一部iphone 11，我正在使用世博会

Answer 1

这是我的解决方案，不用降级什么的。我只是用了一个图像选择器。我发现把我的质量从1转换到0也是有效的。我不知道为什么，但是嘿，这件事帮了我的忙！

 import { getStorage, ref, uploadBytes } from "firebase/storage";
 import * as ImagePicker from "expo-image-picker";


const app = initializeApp(firebaseConfig);
const [pic, setPic] = useState(null);

const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 0,
});
const source = { uri: result.uri };
setPic(source.uri);
console.log(source.uri);
 };

const uploadImage = async () => {
const storage = getStorage(app);
const storageRef = ref(storage, "images");
const imageRef = ref(storageRef, "image.jpg");
const response = await fetch(pic);
const blob = await response.blob();
const snapshot = await uploadBytes(imageRef, blob);
console.log(snapshot);
};

Answer 2

对于那些仍在努力解决这个问题的人来说，答案可能在于上传到Firebase期间的图像质量。

经过相当长时间的挖掘，并与@Rene Ortega的答案类似，pickImage函数内部有一个quality键，它的值通常为1。这意味着您将是压缩图像以获得最大质量。出于某种原因，这会导致您的图像上传到一个尺寸比预期的大上，进而导致应用程序崩溃。

通过将quality值更改为默认的0.2，我认为您会发现您可以上传图像而无需应用程序崩溃。

更改：

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1, >>>>>>>
});

至：

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 0.2, <<<<<<<<<
});

编辑:我刚刚了解到，图像类型/大小也可能在崩溃中发挥作用。关于它的更多信息，这里。

编辑:你的图像质量并没有明显降低，只是在上传过程中压缩。

Answer 3

我发现只使用uploadBytes而不是任何其他选项似乎可以使用v9.0.0