Moralis 文件
创建 Moralis.File
Moralis.File
允许您将应用程序文件存储在云中,否则这些文件会太大或太笨重而无法放入常规的 Moralis.Object
。 最常见的用例是存储图像,但您也可以将其用于文档、视频、音乐和任何其他二进制数据。
Moralis.File
入门很容易。 有几种方法可以创建文件。 第一个是使用 base64 编码的字符串:
你可以使用JS
、React
来实现
const base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
const file = new Moralis.File("myfile.txt", { base64: base64 });
const { saveFile } = useMoralisFile();
const uploadFile = () => {
const base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
saveFile(
"myfile.txt",
{ base64 },
{
type: "base64",
onSuccess: (result) => console.log(result),
onError: (error) => console.log(error),
}
);
};
或者,您可以从字节值数组创建文件:
const bytes = [0xbe, 0xef, 0xca, 0xfe];
const file = new Moralis.File("myfile.txt", bytes);
Moralis 将根据文件扩展名自动检测您上传的文件类型,但您可以使用第三个参数指定 Content-Type:
const file = new Moralis.File("myfile.zzz", fileData, "image/png");
在浏览器中
在浏览器中,您需要使用带有文件上传控件的 HTML 表单。 为此,请创建一个文件输入标签,允许用户从本地驱动器中选择要上传的文件:
<input type="file" id="profilePhotoFileUpload" />
然后,在点击处理程序或其他函数中,获取对该文件的引用(你可以使用JS
、React
来实现):
const fileUploadControl = $("#profilePhotoFileUpload")[0];
if (fileUploadControl.files.length > 0) {
const file = fileUploadControl.files[0];
const name = "photo.jpg";
const moralisFile = new Moralis.File(name, file);
}
import { useState } from "react";
import { useMoralisFile } from "react-moralis";
function App() {
const [fileTarget, setFileTarget] = useState("");
const { saveFile } = useMoralisFile();
const uploadFile = () => {
saveFile("photo.jpg", fileTarget, {
type: "image/png",
onSuccess: (result) => console.log(result),
onError: (error) => console.log(error),
});
};
const fileInput = (e) => setFileTarget(e.target.files[0]);
return (
<div>
<input type="file" onChange={fileInput} />
<button onClick={uploadFile}>Call The Code</button>
</div>
);
}
export default App;
请注意,在此示例中,我们为文件命名为 photo.jpg
。 这里有两点需要注意:
- 您无需担心文件名冲突。 每次上传都有一个唯一的标识符,因此上传多个名为
photo.jpg
的文件没有问题。 - 为具有文件扩展名的文件命名很重要。 这让 Moralis 可以找出文件类型并相应地处理它。 因此,如果您要存储 PNG 图像,请确保您的文件名以
.png
结尾。
接下来,您需要将文件保存到云端。 与 Moralis.Object
一样,您可以使用多种保存方法的变体,具体取决于适合您的回调和错误处理类型。
moralisFile.save().then(
function () {
// The file has been saved to Moralis.
},
function (error) {
// The file either could not be read, or could not be saved to Moralis.
}
);
在 Node.js 中
在 NodeJs 中,您可以获取图像或其他文件并将它们存储为 Morales.File
:
const Moralis = require("moralis/node");
const request = require("request-promise");
const options = {
uri: "https://bit.ly/2zD8fgm",
resolveWithFullResponse: true,
encoding: null, // <-- this is important for binary data like images.
};
request(options)
.then((response) => {
const data = Array.from(Buffer.from(response.body, "binary"));
const contentType = response.headers["content-type"];
const file = new Moralis.File("logo", data, contentType);
return file.save();
})
.then((file) => console.log(file.url()))
.catch(console.error);
在对象中
最后,在保存完成后,您可以将 Moralis.File
与 Moralis.Object
关联起来,就像任何其他数据一样:
const jobApplication = new Moralis.Object("JobApplication");
jobApplication.set("applicantName", "Joe Smith");
jobApplication.set("applicantResumeFile", moralisFile);
jobApplication.save();
如果您在云代码中保存文件,则必须在保存对象时提供 MasterKey
。 例子:
jobApplication.save(null, { useMasterKey: true });
检索文件内容
如何最好地检索文件内容取决于您的应用程序的上下文。 由于跨域请求问题,最好让浏览器为您完成工作。 通常,这意味着将文件的 URL 渲染到 DOM 中。 在这里,我们使用 jQuery 在页面上渲染上传的个人资料照片:
const profilePhoto = profile.get("photoFile");
$("profileImg")[0].src = profilePhoto.url();
如果您想在云代码中处理文件的数据,您可以使用我们的 HTTP 网络库检索该文件:
Moralis.Cloud.httpRequest({ url: profilePhoto.url() }).then(function (
response
) {
// The file contents are in response.buffer.
});
删除文件
您可以使用 destroy
方法删除对象引用的文件。 删除文件需要主密钥:
const profilePhoto = profile.get("photoFile");
await profilePhoto.destroy({ useMasterKey: true });
添加元数据和标签
向文件添加元数据和标签允许您向存储在存储解决方案(即 AWS S3)中的文件添加额外的数据位。
注意:并非所有存储适配器都支持元数据和标签。 检查您正在使用的存储适配器的文档以了解兼容性。
你可以使用JS
、React
来实现
// Init with metadata and tags
const metadata = { createdById: "some-user-id" };
const tags = { groupId: "some-group-id" };
const file = new Moralis.File(
"myfile.zzz",
fileData,
"image/png",
metadata,
tags
);
// Add metadata and tags
const file = new Moralis.File("myfile.zzz", fileData, "image/png");
file.addMetadata("createdById", "some-user-id");
file.addTag("groupId", "some-group-id");
const metadata = { createdById: "some-user-id" };
const tags = { groupId: "some-group-id" };
saveFile(
"myfile.png",
{ fileData },
{
type: "image/png",
metadata,
tags,
onSuccess: (result) => console.log(result.ipfs()),
onError: (error) => console.log(error),
}
);
更多建议: