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

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

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

  1. import * as React from "react";
  2. import * as DocumentPicker from "expo-document-picker";
  3. const cloudName = "example";
  4. const apiKey = "example";
  5. export default function MyUploadScreen({ navigation }) {
  6. const [pickedFile, setPickedFile] = React.useState(null);
  7. const [uploadedFile, setUploadedFile] = React.useState(null);
  8. const pickFile = async () => {
  9. try {
  10. const filePickResponse = await DocumentPicker.getDocumentAsync({
  11. type: "*/*",
  12. });
  13. if (filePickResponse.type === "success") {
  14. setPickedFile({
  15. name: filePickResponse.name,
  16. type: filePickResponse.mimeType,
  17. uri: filePickResponse.uri,
  18. });
  19. }
  20. } catch (error) {
  21. console.log(error);
  22. }
  23. };
  24. const uploadFile = async () => {
  25. //Add your cloud name
  26. let apiUrl = "https://api.cloudinary.com/v1_1/${cloudName}/document/upload";
  27. const formData = new FormData();
  28. formData.append("document", pickedFile);
  29. formData.append("file", pickedFile);
  30. formData.append("api_key", apiKey);
  31. formData.append("upload_preset", "example");
  32. const options = {
  33. method: "POST",
  34. body: formData,
  35. headers: {
  36. Accept: "application/json",
  37. "Content-Type": "multipart/form-data",
  38. },
  39. };
  40. try {
  41. const fileUploadResponse = await fetch(cloudinaryBaseUrl, {
  42. body: formData,
  43. method: "POST",
  44. headers: {
  45. Accept: "application/json",
  46. "Content-Type": "multipart/form-data",
  47. },
  48. });
  49. const jsonResponse = await fileUploadResponse.json();
  50. console.log(jsonResponse); // This will be the success response with id, secure_url, public_id, asset_id etc..
  51. setUploadedFile(jsonResponse);
  52. } catch (error) {
  53. console.log(error);
  54. }
  55. };

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

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变量。你需要用反引号替换双引号。
通过这些更改,您的代码可能看起来像这样:

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

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

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

FormData可以是:

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

展开查看全部

相关问题