【Next.js 入门教程系列】06-上传文件

原文链接

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话, 给我的点个star,关注一下吧

上一篇【Next.js 入门教程系列】05-数据库

上传文件

选择云平台

  • Amazon S3
  • Google Cloud
  • Microsoft Azure
  • Cloudinary

Cloudinary 安装与配置

前往Cloudinary注册账号,注册好之后使用 npm i next-cloudinary 安装。

.env 文件中添加以下内容

复制代码
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://root:@localhost:3306/nextapp"
# 添加下面这行,并修改为你的 Cloud Name
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

上传文件

本章代码链接

Cloudinary 内置了几个上传组件供我们使用,在Cloudinary Widgets有详细的介绍

创建 /upload/page.tsx 并添加以下内容

复制代码
"use client";
import React from "react";
import { CldUploadWidget } from "next-cloudinary";

const UploadPage = () => {
  return (
    // 这里的 preset 换成你自己的 preset
    <CldUploadWidget uploadPreset="">
      {({ open }) => (
        <button className="btn btn-secondary" onClick={() => open()}>
          Upload
        </button>
      )}
    </CldUploadWidget>
  );
};
export default UploadPage;

其中的 preset 需要我们在 Cloudinary 的 settings/upload 中添加,设置好后,复制名字到 uploadPreset="" 即可

最终显示效果如下

Cloudinary Library可以查看上传上去的文件

展示上传的文件

本章代码链接

可以调用 CldImage 组件来显示上传上去的文件。直接使用图片的 publicID 即可

复制代码
"use client";
import React, { useState } from "react";
// import CldImage 用于展示图片
import { CldUploadWidget, CldImage } from "next-cloudinary";

interface CloudinrayResult {
  public_id: string;
}

const UploadPage = () => {
  const [publicId, setPublicId] = useState("");
  return (
    <>
      {publicId && (
        // 若图片Id不为空则渲染图片
        <CldImage src={publicId} width={270} height={180} alt={"a picture"} />
      )}
      <CldUploadWidget
        uploadPreset="bf9xjxfb"
        onUpload={(result, widget) => {
          if (result.event !== "success") return;
          //   成功上传后修改图片Id
          const info = result.info as CloudinrayResult;
          setPublicId(info.public_id);
        }}
      >
        {({ open }) => (
          <button className="btn btn-secondary" onClick={() => open()}>
            Upload
          </button>
        )}
      </CldUploadWidget>
    </>
  );
};
export default UploadPage;

自定义上传组件

本章代码链接

Cloudinary Demo可以自定义上传组件,包括颜色,文件来源,是否支持多文件等等

你也可以直接在调用时添加参数:

TypeScript 复制代码
<CldUploadWidget
  uploadPreset="bf9xjxfb"
  // 直接在这里设置
  options={{
    sources: ["local"],
  }}
  onUpload={(result, widget) => {
    if (result.event !== "success") return;
    const info = result.info as CloudinrayResult;
    setPublicId(info.public_id);
  }}
></CldUploadWidget>

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话, 给我的点个star,关注一下吧

下一篇讲身份验证

下一篇【Next.js 入门教程系列】07-身份验证

相关推荐
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
杨进军10 小时前
React 协调器 render 阶段
前端·react.js·前端框架
Codebee10 小时前
50行代码搞定OneCode摄像头插件:快速定制实战指南
前端框架·开源·ecmascript 6
杨进军10 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
難釋懷10 小时前
TypeScript-webpack
javascript·webpack·typescript
上单带刀不带妹12 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军13 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
vim怎么退出14 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
Python私教14 小时前
FastAPI+React19 ERP系统实战 第01期
react·fastapi