如何在 Sanity 中创建新用户及其个人资料图片？

Question

大家好，我是 Sanity 的初学者，我正在做一个个人项目。我只想知道如何将用户连同他的配置文件图像一起从他的设备中选择为文件添加到 Sanity 数据库。我希望他们在此表单中输入的任何详细信息都保存在后端。我正在使用 Next.js.


   <div className="flex h-screen flex-col items-center justify-center bg-[#171821]">
    <div className="m-6">
        <form>
          <input
              aria-label="Enter your email address"
              type="text"
              placeholder="User Name"
              className="text-gray-base mr-3 mb-2 h-2 w-full roundedpy-5 px-4 text-sm bg-black text-white"/>
      
<button type="submit" className="mt-5 w-full bg-green-400 p-2">
            Add User
          </button>
        </form>
      </div>
    </div>

这是我的简单理智模式


  export default {
    name: 'user',
    title: 'User',
    type: 'document',
    fields: [
        {
            name: 'user_name',
            title: 'User Name',
            type: 'string',
        },
        {
            name: 'profile_image',
            title: 'Profile Image',
            type: 'image',
        },
    ]
}

Answer 1

您可以使用 JavaScript 客户端来执行这样的变更。如果每个用户都与文档对齐，您可能会查看 create() method。请务必考虑令牌的安全性，因为您需要使用写入令牌，这将提供对整个项目内容的完整 CRUD 访问。

Answer 2

初始化理智客户端：

import SanityClient from '@sanity/client'

export const client = sanityClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: 'v1',
  token: process.env.SANITY_TOKEN,
  useCdn: false,
})

在pages/api/createUser

中写一个api函数

import { client } from '../../lib/sanity'

const createUserOnSanity = async (req, res) => {
  try {
    const userDoc = {
      _type: 'users',
      name: req.body.name,
      profileImage: req.body.profileImage,
      ...
    }

    await client.createIfNotExists(userDoc)

    res.status(200).send({ message: 'success' })
  } catch (error) {
    res.status(500).send({ message: 'error', data: error.message })
  }
}

export default createUserOnSanity

然后在您的组件中，向此 api

发出 post 请求

try {
      await fetch(`/api/createUser`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: name,
          // uploading file from computer needs extra work
          // I just pass url
          profileImage: event.target.url.value,
        }),
      })
    } catch (error) {
      console.error(error)
    }

如何在 Sanity 中创建新用户及其个人资料图片？

How to create a new user along with their profile images in Sanity?

javascript

schema

reactjs

next.js

sanity