使用react-native-image-crop-picker上传图片
来源:互联网 发布:人人商城源码 编辑:程序博客网 时间:2024/05/24 06:33
使用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 });}
上传成功
查看日志是否成功
阅读全文
0 0
- 使用react-native-image-crop-picker上传图片
- React Native开源库react-native-image-crop-picker使用图解
- React Native开源库react-native-image-crop-picker使用图解
- react-native-image-crop-picker学习
- react-native-image-crop-picker记录学习
- React Native 使用react-native-image-picker插件上传图片详细步骤
- React Native 使用react-native-image-picker库实现图片上传功能
- RN-第三方-react-native-image-picker,选择图片上传
- react-native- images -crop-picker
- react-native-image-picker
- react-native-image-picker
- react-native-image-picker
- react-native-image-picker在Android上闪退的解决办法(上传头像base64,压缩上传图片)
- React Native 的Image 保存、Picker、上传等一系列问题
- react-native-image-picker配置
- react native Picker 使用详解
- react-native-image-picker上传头像 + modal浮层 +AsyncStorage.setItem-getItem
- React Native Image使用网络图片
- Android集成百度地图(第一节)
- HTML1.1.z
- Server【SVN环境搭建】关于toroiseSVN Checkout 卡死现象
- [My SQL] 使用存储过程
- 中序表达式转后序的代码
- 使用react-native-image-crop-picker上传图片
- deepin系统下部署Python3.5的开发及运行环境
- error RC1015: cannot open include file 'afxres.h'
- cxGrid.OptionsView
- Longest Continuous Increasing Subsequence 问题及解法
- TensorFlow(gpu版本)安装教程 Ubuntu16.04
- CentOS7 安装RocketMQ并使用
- 列表单选效果
- stm32串口发送数据,丢失字节问题分析