使用reac-native的图片上传插件image-crop-picker上传图片的时候遇到了好多坑，真是把我坑惨了。

安装

安装可以参考插件提供的方法去安装。需要注意的是，如果android或者ios是有人负责的话就不要link了。link会自动关联代码会把客户端的代码变的不是你想要的。

调用相册

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

这个地方问题不大，有问题也可以去网上找找。

上传图片

这个地方要注意一下：

1.使用formdata去上传图片
2.上传文件的格式是固定的，除了uri以外的值不要变
3.这里的loading是用来控制loading动画的
4.实际的上传地址是类似”/Users/path/devices/xxxxx.jpg”这样的

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

try@H_301_11@ {
   let@H_301_11@ res = await uploadImage("/uploadImg.do"@H_301_11@,data);
   this@H_301_11@.setState({
       loading@H_301_11@: false@H_301_11@
   });
   console@H_301_11@.log(res)
   toast("上传成功!"@H_301_11@);
} catch@H_301_11@ (err) {
   console@H_301_11@.log(err)
   toast("图片太大，请重新选择"@H_301_11@);
      this@H_301_11@.setState({
        loading@H_301_11@: false@H_301_11@
      });
}

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

上传成功

查看日志是否成功