가져오기를 사용하여 React Native에서 이미지 업로드 정보(자세한 튜토리얼)

이 글에서는 주로 React Native에서 fetch를 사용하여 이미지를 업로드하는 샘플 코드를 소개하고 참고용으로 올려드립니다.

이 기사에서는 fetch를 사용하여 이미지 업로드를 구현하는 React Native의 샘플 코드를 소개합니다. 자세한 내용은 다음과 같습니다.

일반적인 네트워크 요청 매개변수는 JSON 개체입니다.

요청 매개변수는 다음과 같습니다. 이미지 업로드는 formData 개체를 사용합니다.

사용 업로드 이미지 가져오기 코드는 다음과 같이 캡슐화됩니다.

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';  //用户登陆后返回的token
/** 
 * 使用fetch实现图片上传
 * @param {string} url 接口地址
 * @param {JSON} params body的请求参数
 * @return 返回Promise 
 */
function uploadImage(url,params){
  return new Promise(function (resolve, reject) {
    let formData = new FormData();
    for (var key in params){
      formData.append(key, params[key]);
    }
    let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
    formData.append("file", file);
    fetch(common_url + url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;charset=utf-8',
        "x-access-token": token,
      },
      body: formData,
    }).then((response) => response.json())
      .then((responseData)=> {
        console.log('uploadImage', responseData);
        resolve(responseData);
      })
      .catch((err)=> {
        console.log('err', err);
        reject(err);
      });
  });
}

사용 방법

let params = {
  userId:'abc12345',  //用户id
  path:'file:///storage/emulated/0/Pictures/image.jpg'  //本地文件地址
}
uploadImage('app/uploadFile',params )
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功
      upLoadImgUrl = res.body.imgurl; //服务器返回的地址
    }else{
       //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
     //请求失败
  })

참고: 백그라운드 서버 구성이 다르기 때문에
let file = {uri: params.path, type: 'application /octet-stream', name: 'image.jpg'}는 multipart/form-data일 수도 있습니다. formData.append("file", file)의 파일 필드는 다음과 같습니다. also be Images

위 내용은 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JQuery는 select 컴포넌트

$set의 선택된 값 메소드를 선택하고 vue.js_vue.js

vue는 vue-i18n과 결합되어 배경을 구현합니다. 데이터 다국어 전환 방식

위 내용은 가져오기를 사용하여 React Native에서 이미지 업로드 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!