文档(pdf)上传与react native expo和Cloudinary

zujrkrfu  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(164)

我有下面的代码,我可以选择一个文档(pdf文件)使用了mart-document-picker,现在我想上传到cloudinary。然而,我得到了一个错误[SyntaxError: JSON Parse error: Unexpected token: <]。我的假设是我错误地将formData发送到了Cloudinary API,但我不确定我到底做错了什么。我确实去了Cloudinary设置,并确保我启用了pdf和zip文件上传。
下面是我的代码:

import * as React from "react";
import * as DocumentPicker from "expo-document-picker";

const cloudName = "example";
const apiKey = "example";

export default function MyUploadScreen({ navigation }) {
const [pickedFile, setPickedFile] = React.useState(null);
const [uploadedFile, setUploadedFile] = React.useState(null);

  const pickFile = async () => {
    try {
      const filePickResponse = await DocumentPicker.getDocumentAsync({
        type: "*/*",
      });

      if (filePickResponse.type === "success") {
        setPickedFile({
          name: filePickResponse.name,
          type: filePickResponse.mimeType,
          uri: filePickResponse.uri,
        });
      }
    } catch (error) {
      console.log(error);
    }
  };

const uploadFile = async () => {

    //Add your cloud name
    let apiUrl = "https://api.cloudinary.com/v1_1/${cloudName}/document/upload";

    const formData = new FormData();
    formData.append("document", pickedFile);
    formData.append("file", pickedFile);
    formData.append("api_key", apiKey);
    formData.append("upload_preset", "example");

    const options = {
      method: "POST",
      body: formData,
      headers: {
        Accept: "application/json",
        "Content-Type": "multipart/form-data",
      },
    };

    try {
      const fileUploadResponse = await fetch(cloudinaryBaseUrl, {
        body: formData,
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "multipart/form-data",
        },
      });

      const jsonResponse = await fileUploadResponse.json();

      console.log(jsonResponse); // This will be the success response with id, secure_url, public_id, asset_id etc..
      setUploadedFile(jsonResponse);
    } catch (error) {
      console.log(error);
    }
};

字符串
文档能够被正确地拾取。这里出了什么问题,导致上传文档时出错?

mm5n2pyu

mm5n2pyu1#

返回错误[SyntaxError: JSON Parse error: Unexpected token: <],因为你得到的是响应HTML而不是JSON,因此出现了意外的标记:<
第一个可能导致此问题的原因是您尝试将上传请求发送到的URL-即https://api.cloudinary.com/v1_1/${cloudName}/document/upload。您使用document作为resource_type,而document不是有效值。您可以使用imageraw来处理PDF文件,或者使用auto让Cloudinary自动分配resource_type-对于PDF来说它将是“image”。PDF被认为是“image”resource_types,因为你可以对它们应用转换。https://cloudinary.com/documentation/paged_and_layered_media#deliver_a_selected_pdf_page_as_an_image
其次,apiUrl的值是一个字符串,但你试图在那里插入cloudName变量。你需要用反引号替换双引号。
通过这些更改,您的代码可能看起来像这样:

let apiUrl = `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`;

字符串
我看到你也没有使用apiUrl,但你发送的请求cloudinaryBaseUrl-值得仔细检查,以确保这个URL是正确的,在上述格式-或者你可以取代apiUrlcloudinaryBaseUrl
除此之外,您还需要对FormData进行以下更改:

  • api_key可以被删除,因为使用未签名上传时不需要它
  • document不是有效的上载API参数,因此应将其删除

FormData可以是:

const formData = new FormData();
formData.append("file", pickedFile);
formData.append("upload_preset", "example");

相关问题