如何在reactjs上传到Firebase存储之前调整图像大小

Question

我正在尝试调整我的用户上传的图像的大小，以保持我的网站更有效，并限制我的存储使用。

我从包"react-image-file-resizer"

中创建了一个名为resizeFile的函数现在我正在努力的是如何在它上传到firebase存储之前调整图像的大小?

下面是我的代码:

const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(file, 500, 500, "JPEG", 100, 0, (uri) => {
resolve(uri);
});
});
const addProperty = async () => {
if (
!propName ||


) {
alert("Please Enter All Required Data");
} else {
await firebase
.firestore()
.collection("Properties")
.add({
propname: propName,

})
.then(async (result) => {
await Promise.all(
selectedImages.map(async (image) => {
const uri = await resizeFile(image);// i dont know what to do after this point
console.log(uri);
const storageRef = storage.ref(
`propertyImages/${result.id}/${image.name}`
);
storageRef.put(uri).then((urls) => {
console.log(urls);
storageRef.getDownloadURL().then( (downloadUrls) => {
console.log(downloadUrls);
firebase
.firestore()
.collection("Properties")
.doc(result.id)
.update({
propertyID: result.id,
imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
})
.then((res) => {
//handleUploadChange();
// alert("Property Added Successfully");
// window.location.reload();
});
});
});
})
);
});
}
};

编辑:

好吧，我设法解决了一些问题，但仍然有一个问题，这是高度从来没有得到调整到我指定的maxHeight的某种原因。为什么呢?

下面是我修改的内容:

await Promise.all(
selectedImages.map(async (image) => {
const uri = await resizeFile(image);
console.log(uri);
const storageRef = storage.ref(
`propertyImages/${result.id}/${image.name}`
);
storageRef.putString(uri,'data_url').then((urls) => {
console.log(urls);
storageRef.getDownloadURL().then( (downloadUrls) => {
console.log(downloadUrls);
firebase
.firestore()
.collection("Properties")
.doc(result.id)
.update({
propertyID: result.id,
imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
})
.then((res) => {
//handleUploadChange();
// alert("Property Added Successfully");
// window.location.reload();
});
});
});
})
);

Answer 1

我用这种方式解决了firebase和图像调整大小的问题。事实证明，该软件包确实调整并压缩图像到您指定的任何格式，但如果图像是另一种格式，如png(因为我指定了JPEG)，它不会完全按照您的喜好调整大小。然而，有人在评论中表示，这与firebase无关，它是由firebase函数解决的。

我所要做的就是使用. putstring()，以便将返回的base64转换为firebase存储中的字符串。因此，我的问题的答案实际上与firebase和firebase存储有很大的联系。

const resizeFile = file =>
new Promise(resolve => {
Resizer.imageFileResizer(file, 500, 500, "JPEG", 25, 0, uri => {
resolve(uri);
});
});
const addProperty = async () => {
if (
!propName ||
!price ||
!bedroom ||
!bathroom ||
!area ||
!type ||
!category ||
!features ||
!services
) {
alert("Please Enter All Required Data");
} else {
await firebase
.firestore()
.collection("Properties")
.add({
propname: propName,
price: price,
bedrooms: bedroom,
bathroom: bathroom,
exclusive: exclusive,
area: area,
type: type,
category: category,
features: features,
services: services,
summary: summary,
location: location,
salesAgentID: salesAgent,
date: getCurrentDate(),
})
.then(async result => {
await Promise.all(
selectedImages.map(async image => {
const uri = await resizeFile(image);
const storageRef = storage.ref(
`propertyImages/${result.id}/${image.name}`
);
storageRef.putString(uri, "data_url").then(urls => {
storageRef.getDownloadURL().then(downloadUrls => {
console.log(downloadUrls);
firebase
.firestore()
.collection("Properties")
.doc(result.id)
.update({
propertyID: result.id,
imageUrls:
firebase.firestore.FieldValue.arrayUnion(
downloadUrls
),
})
.then(res => {
setIsUploaded("Uploaded success");
//handleUploadChange();
// alert("Property Added Successfully");
// window.location.reload();
});
});
});
})
);
});
}
};