后浪云Moralis教程: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),
  }
);

文章来源网络,作者:运维,如若转载,请注明出处:https://shuyeidc.com/wp/289802.html<

(0)
运维的头像运维
上一篇2025-05-16 23:13
下一篇 2025-05-16 23:14

相关推荐

  • 个人主题怎么制作?

    制作个人主题是一个将个人风格、兴趣或专业领域转化为视觉化或结构化内容的过程,无论是用于个人博客、作品集、社交媒体账号还是品牌形象,核心都是围绕“个人特色”展开,以下从定位、内容规划、视觉设计、技术实现四个维度,详细拆解制作个人主题的完整流程,明确主题定位:找到个人特色的核心主题定位是所有工作的起点,需要先回答……

    2025-11-20
    0
  • 社群营销管理关键是什么?

    社群营销的核心在于通过建立有温度、有价值、有归属感的社群,实现用户留存、转化和品牌传播,其管理需贯穿“目标定位-内容运营-用户互动-数据驱动-风险控制”全流程,以下从五个维度展开详细说明:明确社群定位与目标社群管理的首要任务是精准定位,需明确社群的核心价值(如行业交流、产品使用指导、兴趣分享等)、目标用户画像……

    2025-11-20
    0
  • 香港公司网站备案需要什么材料?

    香港公司进行网站备案是一个涉及多部门协调、流程相对严谨的过程,尤其需兼顾中国内地与香港两地的监管要求,由于香港公司注册地与中国内地不同,其网站若主要服务内地用户或使用内地服务器,需根据服务器位置、网站内容性质等,选择对应的备案路径(如工信部ICP备案或公安备案),以下从备案主体资格、流程步骤、材料准备、注意事项……

    2025-11-20
    0
  • 如何企业上云推广

    企业上云已成为数字化转型的核心战略,但推广过程中需结合行业特性、企业痛点与市场需求,构建系统性、多维度的推广体系,以下从市场定位、策略设计、执行落地及效果优化四个维度,详细拆解企业上云推广的实践路径,精准定位:明确目标企业与核心价值企业上云并非“一刀切”的方案,需先锁定目标客户群体,提炼差异化价值主张,客户分层……

    2025-11-20
    0
  • PS设计搜索框的实用技巧有哪些?

    在PS中设计一个美观且功能性的搜索框需要结合创意构思、视觉设计和用户体验考量,以下从设计思路、制作步骤、细节优化及交互预览等方面详细说明,帮助打造符合需求的搜索框,设计前的规划明确使用场景:根据网站或APP的整体风格确定搜索框的调性,例如极简风适合细线条和纯色,科技感适合渐变和发光效果,电商类则可能需要突出搜索……

    2025-11-20
    0

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注