Native가 fetch를 사용하여 이미지 업로드 기능을 구현하는 방법

이번에는 Native가 fetch를 사용하여 imageupload 기능을 구현하는 방법을 보여 드리겠습니다. Native가 fetch를 사용하여 이미지 업로드 기능을 구현하는 notes는 무엇인지 살펴보겠습니다.

일반 네트워크요청 매개변수는 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)의 파일 필드는 이미지일 수도 있습니다. ​ ​

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 중국어 병음의 A-Z 정렬 구현 방법

vue.js는 배열 위치를 이동하고 실시간으로 뷰를 업데이트합니다.

Vue는 다음 표를 통해 배열 페이지를 처리합니다. 렌더링 없이

위 내용은 Native가 fetch를 사용하여 이미지 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!