使用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
  });
}

上传成功

查看日志是否成功

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...