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

小编典典

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

reactjs

我正在使用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压缩是一种发送图像数据的方法。有帮助吗？

阅读 390

2020-07-22

共1个答案

小编典典

另一个选择是将图像转换为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(); 
}

2020-07-22