使用react-native-image-crop-picker上傳圖片

使用reac-native的圖片上傳插件image-crop-picker上傳圖片的時候遇到了好多坑，真是把我坑慘了。

安裝

安裝可以參考插件提供的方法去安裝。需要注意的是，如果android或者ios是有人負責的話就不要link了。link會自動關聯代碼會把客戶端的代碼變的不是你想要的。

調用相冊

import ImagePicker from 'react-native-image-crop-picker';
async function openImage(){
 let image = await ImagePicker.openPicker({
        width: 750,
        height: 750,
        cropping: true
    });
}
//返回image對象，其中path就是剪切之後的圖片地址

這個地方問題不大，有問題也可以去網上找找。

上傳圖片

這個地方要注意一下：

1.使用formdata去上傳圖片
2.上傳文件的格式是固定的，除了uri以外的值不要變
3.這裏的loading是用來控制loading動畫的
4.實際的上傳地址是類似”/Users/path/devices/xxxxx.jpg”這樣的

let data = new FormData();
let file = { uri: image.path, type: "multipart/form-data", name: "image.png" };
data.append("imgFile", file);

try {
   let res = await uploadImage("/uploadImg.do", data);
   this.setState({
       loading: false
   });
   console.log(res)
   toast("上傳成功!");
} catch (err) {
   console.log(err)
   toast("圖片太大，請重新選擇");
      this.setState({
        loading: false
      });
}

let uploadImage=async function(url,data){
    return await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data;charset=utf-8'
    },
    body: data
  });
}

上傳成功

查看日誌是否成功