Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 《React-Native系列》26、 ReactNative實現圖片上傳功能

《React-Native系列》26、 ReactNative實現圖片上傳功能

編輯:關於Android編程

在查看ReactNative的官方文檔的時候,你會發現其實Fackbook是沒有提供圖片上傳功能的。

如果我們的項目裡需要使用圖片上傳(用JS 實現圖片上傳),那我們有沒有什麼辦法呢?

通過搜索react-native的github, 會發現裡面有這麼一篇文章:https://github.com/facebook/react-native/issues/5308

解決方案:

采用FormData來實現,FormData 的API參考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

利用FormData對象,你可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest發送這個"表單".

那麼我們就來看看在RN裡怎麼做,貼代碼:

  uploadImage(){
    let formData = new FormData();
    let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};

    formData.append("images",file);

    fetch(url,{
      method:'POST',
      headers:{
      	'Content-Type':'multipart/form-data',
      },
      body:formData,
    })
    .then((response) => response.text() )
    .then((responseData)=>{

      console.log('responseData',responseData);
    })
    .catch((error)=>{console.error('error',error)});

  }
}

1、首先我們new了一個FormData

2、創建一個file對象,uri是什麼?如下示例:

android: file:///storage/emulated/0/Pictures/eb645893-4c00-44a3-a9b4-a2116e955f7c.jpg
ios: /Users/ashleydw/Library/Developer/CoreSimulator/Devices/23EE88D0-6E91-43AD-A3B6-06F87698C5A8/data/Containers/Data/Application/A73E68D3-7424-4301-9934-AD0F8251C1EB/tmp/7803DA8A-0E40-4FCB-A593-884805878172.jpg

3、設置header

'Content-Type':'multipart/form-data',

4、將創建好的FormData賦值給body

這樣我們就完成了圖片上傳的功能。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved