javascript – 如何通过HTTP请求从图像Uri发送图像? (React Native和Django后端)

前端之家收集整理的这篇文章主要介绍了javascript – 如何通过HTTP请求从图像Uri发送图像? (React Native和Django后端)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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});

!抱歉复杂但图像变量名称;图像是图像的uri.我不想更改原始变量名的名称

在服务器上,它正在打印

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

我发现gzip压缩是一种发送图像数据的方法.有帮助吗?

解决方法

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

猜你在找的JavaScript相关文章