微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Next JS 和上传图片到谷歌云存储

如何解决Next JS 和上传图片到谷歌云存储

我正在尝试使用 Next JS 并最终使用 Vercel 来处理使用 Google Cloud Storage 上传图片,但结果喜忧参半。

我从一些文档中上传一个基本的文件,如下所示:

function NewBet(props) {
  const [state,setState] = useState({
     src: '',})

  const { src } = state

  const registerUser = async (event) => {

    event.preventDefault()

    //Upload image to Google
    const file = src
    const filename = encodeURIComponent(file.name)

    console.log('filename: ',filename)
    const resImg = await fetch(`/api/upload?file=${filename}`)
    const url = await resImg.json()
    const formData = new FormData()
    formData.append('file',filename)

    const upload = await fetch(url,{
      method: 'POST',body: formData,})

    if (upload.ok) {
      console.log('Uploaded successfully!')
    } else {
      console.error('Upload Failed.')
    }
  }

 const onSelectFile = (e) => {
   if (e.target.files && e.target.files.length > 0) {
     setState({ ...state,src: e.target.files[0] })
   }
 }
 .....
 <form onSubmit={registerUser} className="myForm">
     <OCRCompoonent onOCRReturned={handleOCR} onSelectFile={onSelectFile} />
 .....
 </form>

我的上传看起来像这样:

import { Storage } from '@google-cloud/storage'

export default async function handler(req,res) {
  const storage = new Storage({
    projectId: process.env.PROJECT_ID,credentials: {
      client_email: process.env.CLIENT_EMAIL,private_key: process.env.PRIVATE_KEY,},})

  const bucket = storage.bucket(process.env.BUCKET_NAME)
  const file = bucket.file(req.query.file)
  const options = {
    expires: Date.Now() + 1 * 60 * 1000,//  1 minute,fields: { 'x-goog-Meta-test': 'data' },}

  const [response] = await file.generateSignedPostPolicyV4(options)
  res.status(200).json(response)
}

这基本上是我的环境变量

所以 1) 我在控制台日志中成功上传了图像,但似乎没有任何内容添加到我的云存储桶中,而数字 2... 当部署到 Vercel 时,我得到...

[clubid]-f98a4d840994ca2053e3.js:1 POST https://xxxxxx.xxxxx.app/club/[object%20Object] net::ERR_ABORTED 500
(anonymous) @ [clubid]-f98a4d840994ca2053e3.js:1
...more error code....

react_devtools_backend.js:2557 Upload Failed.

我做错了什么吗?谢谢

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。