上传文件
选择云平台
- Amazon S3
- Google Cloud
- Microsoft Azure
- Cloudinary
Cloudinary 安装与配置
前往Cloudinary注册账号,注册好之后使用 npm i next-cloudinary
安装。
在 .env
文件中添加以下内容
.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
并添加以下内容
/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可以查看上传上去的文件