Javascript 如何以输入文件的形式获取我选择的文件的路径，以便我可以使用cloudinary在服务器端上传

我能够获得图片对象下的文件名，如下图所示

我向cloudinary发出了如下请求，但它说图像路径不正确，这是有道理的，但是我为所选图片提供的对象没有显示图像路径

那么，如何获得cloudinary的正确路径呢

var cloudinary = require("cloudinary").v2;

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export default async function signup(req, res) {
  console.log(req.body);
  const body = req.body;

  cloudinary.uploader.upload(
    `${body}`,
    function (error, result) {
      console.log(result, error);
    }
  );

  try {
    const result = req.body;
    res.status(200).send(result);
  } catch (error) {
    console.error(error);
    res.status(error.requestResult.statusCode).send(error.message);
  }
}

下面是我发送给api的内容

 const res = await fetch("../api/image", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data.picture[0].name),
    });

    console.log(res);

我使用的是react钩子表单，下面是上下文的全部代码

import { useForm, Controller } from "react-hook-form";
import Layout from "../components/Layout";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { gql, useMutation } from "@apollo/client";
import useSWR from "swr";
import { useRouter } from "next/router";

const CREATE_DECOR_ENTRY = gql`
  mutation CreateDecorEntry(
    $ownerID: ID!
    $description: String!
    $pieces: Int!
    $purchaser: String!
    $alterations: Boolean!
    $cost: Int!
    $purchaseDate: Date!
    $category: String!
  ) {
    createDecor(
      data: {
        description: $description
        pieces: $pieces
        purchaser: $purchaser
        alterations: $alterations
        cost: $cost
        purchaseDate: $purchaseDate
        category: $category
        owner: { connect: $ownerID }
      }
    ) {
      description
    }
  }
`;

const fetcher = (url) => fetch(url).then((r) => r.json());
const fetchWithImage = (url, image) =>
  fetch(`${url}?image=${image}`).then((r) => r.json());

export default function Decor() {
  const { data: user, error: userError } = useSWR("/api/user", fetcher);

  const { data: cookieData, error: cookieError } = useSWR(
    "/api/cookie",
    fetcher
  );

  var cookieBearer = `Bearer ${cookieData}`;

  return (
    <Layout>
      <h1>Enter your Decor Data</h1>

      {user && cookieBearer && <Form user={user} cookieBearer={cookieBearer} />}
    </Layout>
  );
}

const Form = ({ cookieBearer, user }) => {
  const Router = useRouter();

  const [
    createDecorEntry,
    { data: createDecorEntryData, loading: saving },
  ] = useMutation(CREATE_DECOR_ENTRY, {
    context: {
      headers: {
        authorization: cookieBearer,
      },
    },
  });

  const { register, handleSubmit, errors, control } = useForm();
  const onSubmit = async (data) => {
    console.log(data);

    let yourDate = data.purchaseDate;

    const offset = yourDate.getTimezoneOffset();
    yourDate = new Date(yourDate.getTime() - offset * 60 * 1000);
    const date = yourDate.toISOString().split("T")[0];

    console.log(date);

    const dataMassage = {
      ...data,
      pieces: parseInt(data.pieces),
      cost: parseInt(data.cost),
      purchaseDate: date,
    };

    console.log(dataMassage);

    const res = await fetch("../api/image", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data.picture[0].name),
    });

    console.log(res);

    // const res = await createDecorEntry({
    //   variables: {
    //     ownerID: user.id,
    //     ...dataMassage,
    //   },
    // }).catch(console.error);

    // Router.push(`/decor/data`);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <h2>Image</h2>
        <input ref={register} type="file" name="picture" />
      </div>
      <div>
        <h2>Description</h2>
        <input
          type="text"
          placeholder="Description"
          name="description"
          ref={register({ required: true })}
        />
      </div>
      <div>
        <h2>Number of Pieces</h2>
        <input
          type="number"
          placeholder="Number of Pieces"
          name="pieces"
          ref={register({ required: true })}
        />
      </div>
      <div>
        <h2>Purchaser</h2>
        <input
          type="text"
          placeholder="Purchaser"
          name="purchaser"
          ref={register({ required: true })}
        />
      </div>
      <div>
        <h2>Alternations Needed</h2>
        <input
          type="checkbox"
          placeholder="Alternations Needed"
          name="alterations"
          ref={register({ required: true })}
        />
      </div>
      <div>
        <h2>Cost</h2>
        <input
          type="number"
          placeholder="Cost"
          name="cost"
          ref={register({ required: true })}
        />
      </div>
      <div>
        <h2>Purchase Date</h2>
        <Controller
          name="purchaseDate"
          control={control}
          render={({ onChange, value }) => (
            <ReactDatePicker selected={value} onChange={onChange} />
          )}
        />
      </div>
      <div>
        <h2>Category</h2>
        <select name="category" ref={register}>
          <option value="Curation">Curation</option>
          <option value=" Good"> Good</option>
        </select>
      </div>

      <div>
        <input type="submit" />
      </div>
    </form>
  );
};

从“react hook form”导入{useForm，Controller}；
从“./组件/布局”导入布局；
从“react datepicker”导入react datepicker；
导入“react datepicker/dist/react datepicker.css”；
从“@apollo/client”导入{gql，usemotation}；
从“swr”导入useSWR；
从“下一个/路由器”导入{useRouter}；
const CREATE_DECOR_ENTRY=gql`
突变装饰(
$ownerID:ID！
$description:String！
$pieces:Int！
$purchaser:字符串！
$更改：布尔值！
$cost:Int！
$purchaseDate:日期！
$category:String！
) {
createDecor(
数据：{
description:$description
件数：$件
购买者：$purchaser
更改：$更改
费用：$费用
purchaseDate:$purchaseDate
类别：$类别
所有者：{connect:$ownerID}
}
) {
描述
}
}
`;
常量fetcher=（url）=>fetch（url）；
const fetchWithImage=（url，图像）=>
fetch（`${url}？image=${image}`）。然后（（r）=>r.json（））；
导出默认函数Decor（）{
const{data:user，error:userError}=useSWR（“/api/user”，fetcher）；
const{data:cookieData，error:cookieError}=useSWR(
“/api/cookie”，
取款机
);
var cookieBearer=`Bearer${cookieData}`；
返回(
输入您的装饰数据
{user&&cookieBearer&&}
);
}
const Form=（{cookieBearer，user}）=>{
const Router=useRouter（）；
常数[
创造装饰，
{data:createDecorEntryData，加载：保存}，
]=使用变异（创建装饰条目{
背景：{
标题：{
授权：Cookie Bearner，
},
},
});
常量{register，handleSubmit，errors，control}=useForm（）；
const onSubmit=async（数据）=>{
控制台日志（数据）；
让yourDate=data.purchaseDate；
常量偏移量=yourDate.getTimezoneOffset（）；
yourDate=新日期（yourDate.getTime（）-offset*60*1000）；
const date=yourDate.toISOString（）.split（“T”）[0]；
控制台日志（日期）；
常数数据按摩={
…数据，
片段：parseInt（data.pieces），
成本：parseInt（data.cost），
购买日期：日期，
};
console.log（数据按摩）；
const res=wait fetch（“../api/image”{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（data.picture[0].name），
});
控制台日志（res）；
//const res=等待createDecorEntry({
//变量：{
//ownerID:user.id，
//…数据按摩，
//   },
//}）catch（console.error）；
//Router.push（`/decor/data`）；
};
返回(
形象
描述
件数
买方
需要更改
成本
购买日期
(
)}
/>
类别
策展
好
);
};

根据，您不能只上传文件。您必须首先将其保存在某个位置（例如本地磁盘上），或者

---

有趣的是，文档的其他部分建议您发送一个，但我不确定它是否在Node中可用。我只是发布这个答案，以便其他人可以从中受益，我最终选择了数组缓冲区路径

import formidable from "formidable";
const cloudinary = require("cloudinary").v2;
const fs = require("fs");
const path = require("path");
let streamifier = require('streamifier');

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

// first we need to disable the default body parser
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function image(req, res) {
  

  try {

    const form = new formidable.IncomingForm();
  form.uploadDir = "./";
  form.keepExtensions = true;
  form.parse(req, (err, fields, files) => {
    console.log(JSON.stringify(files));

    console.log(files.image.path);

    var oldPath = files.image.path;
    var rawData = fs.readFileSync(oldPath);

    console.log(rawData);

    let cld_upload_stream = cloudinary.uploader.upload_stream(
      {
        folder: "sick-fits"
      },
      function(error, result) {
          console.log(error, result);
          res.status(200).send({ result });
      }
  );

  streamifier.createReadStream(rawData).pipe(cld_upload_stream);

  });

  } catch (error) {
    console.error(error);
    res.status(error.requestResult.statusCode).send(error.message);
  }
}

---

哦，所以我将它保存在磁盘上并使用该路径，或者如果我有base64，我应该向cloudinary传递一个长字符串，而不是文件路径。所以在点击browse的操作中，在选择它之后，它需要转换为一个baseString，我需要在此时运行一个服务器端函数来执行此操作。当它和baseSring一起返回时，hook表单会拾取它或其他东西。由于它已注册到该输入，您必须首先将base64转换为数据uri，但是可以-您可以传递本地文件路径，也可以传递base64数据uri。我会使用本地路径-保存临时文件，上传到cloudinary，删除临时文件。好的，我在这里做一些谷歌搜索，但是我从哪里开始保存临时文件，我会先从文件输入中监听onChange事件，但不确定。我会继续寻找，但如果你知道方向，这将有助于alotSo，你得到你的文件在nodejs，对吗？您可以使用将此文件写入磁盘。将文件保存到磁盘上后，将其路径传递给Cloundary uploader。上传完成时-从磁盘上传文件。