创建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 });

添加元数据和标签

向文件添加元数据和标签允许您向存储在存储解决方案(即AWSS3)中的文件添加额外的数据位。

注意:并非所有存储适配器都支持元数据和标签。检查您正在使用的存储适配器的文档以了解兼容性。

你可以使用​JS​、​React​来实现

// Init with metadata and tagsconst 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 tagsconst 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),  });