如何在部署到Vercel的Next.js应用程序中上传图像或文件

mrwjdhj3  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(150)

当我从localhost上传图片时,它工作得很好。但是当我将Next.js应用程序部署到Vercel,并尝试在cloudinary上上传文件或图片时,它不工作。我该如何解决这个问题?
我希望图片或文件将完美上传与vercel以及将存储到cloudinary。

3lxsmp7m

3lxsmp7m1#

这对我很有效:

import { v2 as cloudinary } from "cloudinary";
import { NextResponse } from "next/server";

// Cloudinary config
cloudinary.config({
  cloud_name: "your_cloud_name",
  api_key: "your_api_key",
  api_secret: "your_api_secret",
  secure: true,
});

export const POST = async (req) => {
  
  const data = await req.formData();
  const image = await data.get("image");
  const fileBuffer = await image.arrayBuffer();

  var mime = image.type; 
  var encoding = 'base64'; 
  var base64Data = Buffer.from(fileBuffer).toString('base64');
  var fileUri = 'data:' + mime + ';' + encoding + ',' + base64Data;

  try {
    
    const uploadToCloudinary = () => {
      return new Promise((resolve, reject) => {

          var result = cloudinary.uploader.upload(fileUri, {
            invalidate: true
          })
            .then((result) => {
              console.log(result);
              resolve(result);
            })
            .catch((error) => {
              console.log(error);
              reject(error);
            });
      });
    };

    const result = await uploadToCloudinary();
    
    let imageUrl = result.secure_url;

    return NextResponse.json(
      { success: true, imageUrl: imageUrl },
      { status: 200 }
    );
  } catch (error) {
    console.log("server err", error);
    return NextResponse.json({ err: "Internal Server Error" }, { status: 500 });
  }
};

字符串

相关问题