如何通过HTTP请求从图像Uri发送图像？（React Native 和 Django 后端）

IT技术 javascript image reactjs http react-native
2021-04-25 13:44:28

我正在使用 Expo 的图像选择器，并且得到以下输出：

Object {
  "cancelled": false,
  "height": 468,
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540jbaek7023%252Fstylee/ImagePicker/9a12f0a3-9260-416c-98a6-51911c91ddf4.jpg",
  "width": 468,
}

我可以渲染我的图像，但我刚刚意识到 URL 是手机的本地 URI。

我正在使用 Redux-Thunk 和 Axios 发送HTTP POST 请求：

export const sendPost = ( imageUri, title, content ) => async dispatch => {
  let response = await axios.post(`${ROOT_URL}/rest-auth/registration/`, {
    image, <<<<- I can't put image uri here :( it's LOCAL path
    title,
    content
  })

  if(response.data) {
    dispatch({ type: POST_CREATE_SUCCESS, payload: response.data.token })
  } else {
    dispatch({ type: POST_CREATE_FAIL })
  }
}

更新我更改了请求调用

let headers = { 'Authorization': `JWT ${token}`};
  if(hType==1) {
    headers = { 'Authorization': `JWT ${token}`};
  } else if (hType==2) {
    headers = { 'Authorization': `Bearer ${token}`};
  }

let imageData = new FormData();
imageData.append('file', { uri: image });
let response = await axios.post(`${ROOT_URL}/clothes/create/`, {
    image: imageData,
    text, bigType, onlyMe ...
  }, {headers});

!! 很抱歉出现了复杂情况，但图像变量名称；image是uri为了图像。我不想更改原始变量名称的名称

在服务器上，它正在打印 

'image': {'_parts': [['file', {'uri': 'file:///data/user/0/host.exp.exponent
    /cache/ExperienceData/%2540jbaek7023%252Fstylee/
    ImagePicker/78f7526a-1dfa-4fc9-b4d7-2362964ab10d.jpg'}]]}

我发现 gzip 压缩是一种发送图像数据的方式。它有帮助吗？

3个回答

另一种选择是将您的图像转换为 base64 并发送字符串。缩小是通常 base64 字符串比图像本身具有更大的尺寸。

像这样的东西：

function readImage(url, callback) {   
    var request = new XMLHttpRequest();
    request.onload = function() {
       var file = new FileReader();
       file.onloadend = function() {
          callback(file.result);
       }
       file.readAsDataURL(request.response);
    };   
    request.open('GET', url);   
    request.responseType = 'blob';              
    request.send(); 
}

它必须是本地 URI，这没有问题，否则您将如何指向图像。

现在要上传图像，您应该首先将其包装在 FormData 中：

// add this just above the axios request
let img = new FormData();
img.append('file', { uri: imageUri });

然后在您的 axios 请求正文中添加：

image: img,

编辑：当前形式的这个问题是无法回答的。

我在我的一个项目中使用相同的 Expo 图像选择器和 React-native 作为 OP，一切正常，FormData 没有问题。

几天前在 stackoverflow 聊天中与 OP 交谈后，将请求分解为一个图像，服务器开始抛出编码错误：

UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 168: invalid start byte

所以问题在于 OP 的 Django 后端在解析图像时没有正确设置，而不是图像本身的发送 - 这使得问题无法回答。

你不能使用 react-native-fetch-blob .....

import RNFetchBlob from " react-native-fetch-blob"
  PostRequest(PATH){
      RNFetchBlob.fetch('POST', "[URL]", {

            "x-session-id": "SESSION_ID", //or Custom headers
            'Content-Type': 'multipart/form-data',

        }, [

                { name: 'image', filename: 'vid.jpeg', data: RNFetchBlob.wrap(PATH) },
                // custom content type

            ]).then((res) => {
                console.log(res)

            })
            .catch((err) => {
                console.log(err)
                // error handling ..
            })
        }
  }

供参考react-native-fetch-blob

其它你可能感兴趣的问题
上一篇Anet A6 ERR MAXTEMP BED 错误 下一篇如何设置 Marlin 使用加热室？