Question

又是我。

我正在学习本机响应，现在我正在尝试上传文件，该api已经使用邮递员进行了测试，并且可以正常工作，所以我编写了以下代码：

import * as DocumentPicker from 'expo-document-picker';

async login () {
    let response = await DocumentPicker.getDocumentAsync({type: '*/*'})

    const data = new FormData();
    data.append('file', response)

    // Fetch attempt ----------------------------------------
    fetch("http://192.168.0.3:8000/api/file", {
      method: "POST",
      headers:{  
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: data
    })
    .then(response => response.json())
    .then(response => {
      console.log("upload succes", response);
    })
    .catch(error => {
      console.log("upload error", error, JSON.stringify(error));
    });

    // Axios attempt ----------------------------------------
    axios.post('http://192.168.0.3:8000/api/file', data, { headers:{ "Content-Type": "application/x-www-form-urlencoded"} } )
    .then(res => {
      console.log("goddaamittt wooork", res)
    })
    .catch(error => {
      console.log("error", error, JSON.stringify(error))
    });
  }

当我从该请求中删除正文和标头时，它实际上返回的是当您尝试在不带“文件”的情况下向其POST时api应该返回的内容，消息“ {'fileName'：'A file required'}”但是将其添加到它时，我会收到网络错误，该错误是我在使用它时获取的错误：

upload error [TypeError: Network request failed] {"line":24646,"column":31,"sourceURL":"http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false"}

当到达axios尝试时，它会显示类似以下内容：

[Unhandled promise rejection: TypeError: Network request failed]

我尽我所能，我需要一些帮助！

Idk是否重要，但这是我选择文件时DocumentPicker返回的内容：

Object {
  "name": "FB_IMG_1573232116651.jpg",
  "size": 32482,
  "type": "success",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fjsonplaceholder-bcb4c1c6-b37d-4634-99a5-3410d9b8654e/DocumentPicker/db8d78dd-2587-40e4-aed9-656c36df29f4.jpg",
}

这是我从axios请求中删除主体时遇到的错误

错误[错误：请求失败，状态码为400] {“ config”：{“ transformRequest”：{}，“ transformResponse”：{}，“ headers”：{“ Accept”：“ application / json，text /普通的 / “}，”超时“：0，” xsrfCookieName“：” XSRF-TOKEN“，” xsrfHeaderName“：” X-XSRF-TOKEN“，” maxContentLength“：-1，”方法“：” post“，” url“：” http://192.168.0.3:8000/api/file“}，” response“：{” data“：{” message“：”需要文件“}，” status“：400，” headers“： {“ map”：{“ cache-control”：“ public，max-age = 0”，“ x-robots-tag”：“ noindex”，“ x-debug-token-link”：“ http://192.168.0.3:8000/_profiler/54e68c “，” x-debug-token“：” 54e68c“，” link“：” http://192.168.0.3:8000/api/docs.jsonld; rel = \“ http://www.w3.org/ns/hydra/core#apiDocumentation \”“，” content-type“：” application / json“， “ x-powered-by”：“ PHP / 7.2.4”，“ connection”：“ close”，“ date”：“ Fri，08 Nov 2019 17:54:12 GMT”，“ host”：“ 192.168.0.3 ：8000“}}，” config“：{” transformRequest“：{}，” transformResponse“：{}，” headers“：{” Accept“：” application / json，text / plain， / “}，”超时“：0，” xsrfCookieName“：” XSRF-TOKEN“，” xsrfHeaderName“：” X-XSRF-TOKEN“，” maxContentLength“：-1，” method“：” post“，” url“ ：“ http://192.168.0.3:8000/api/file”}，“请求”：{“ url”：“ http://192.168.0.3:8000/api/file”，“凭证”：“省略”，“标题”：{“地图”：{“接受”：“应用ication / json，text / plain， / “}}，” method“：” POST“，” mode“：null，” referrer“：null，” _ bodyText“：”“}}，” line“：178773，” column“：26，” sourceURL“：” http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false“}

Answer 1

您应尝试将内容类型修改为

fetch("http://192.168.0.3:8000/api/file", {
      method: "POST",
      headers:{  
        'Content-Type': 'multipart/form-data',
      },
      body: data
    })

，对于网址格式为url的形式，不支持提取。您必须自己推动它。您可以看到此answer。

Answer 2

这是一个转储解决方案，我花了几个小时才找到它：

当我从DocumentPicker获取文件时，我必须添加文件的类型，因为DocumentPicker返回了一个奇怪的类型，称为“成功”，当我将其更改为“ image / jpeg”时，它起作用了：D根本不是解决方案因为我将需要找到一种方法来知道用户选择的每个文件是哪种文件类型，无论如何，此代码可以正常工作：

let response = await DocumentPicker.getDocumentAsync({type: 'image/jpeg'})
    response.type = 'image/jpeg' // <- lasdfkasdfaslfkfsdkdsaf

    const data = new FormData();
    data.append('file', response);

    axios.post('http://192.168.0.3:8000/api/file', data , {headers: { 'Content-type': 'application/x-www-form-urlencoded' }} )
    .then(res => {
      console.log("gooosh", res.data)
    })
    .catch(error => {
      console.log("error", error, JSON.stringify(error))
    });

添加正文时，在POST请求中反应本机网络错误

2 个答案: