반응 네이티브는 가져오기를 사용하여 이미지를 업로드합니다.

이번에는 React Native를 사용하여 fetch를 사용하여이미지를 업로드하는 경우와 React Native를 사용하여 fetch를 사용하여 이미지를 업로드하는 경우의 주의사항을 알려드리겠습니다. 다음은 실제 사례입니다.

일반 네트워크요청 매개변수는 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'}의 유형이 다중 부분/양식일 수도 있습니다. -data
formData.append ("file", file)의 파일 필드는 이미지일 수도 있습니다

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 자료:

이것을 반응 이벤트에 바인딩하는 여러 가지 방법

String.prototype.format 문자열 접합을 사용하는 방법

JS의 암시적 유형 변환에 대한 자세한 설명

에 Angle

에서 $http 서비스를 사용하는 방법

위 내용은 반응 네이티브는 가져오기를 사용하여 이미지를 업로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!