- 装置图片抉择插件
react-native-syan-image-picker 或 react-native-image-crop-picker,0.6以上版本无需手动link,具体插件配置参考GitHub链接 - 本次需要有多选性能 选取应用react-native-syan-image-picker
示例代码:
const [imageList, setImageList] = useState<UploadFileResItem[]>([]); // 插件配置参数 具体参见插件配置文档 const options = { imageCount: 6, isCrop: false, }; // 用户点击按钮选取图片 const selectImage = () => { SyanImagePicker.asyncShowImagePicker(options) .then((photos: SelectedPhoto[]) => { // 解决选取后果 后果蕴含本地文件门路 // 因为后端 不反对多文件同时上传应用promise all实现屡次上传申请 const fetchList = photos.map((item) => upload(item)); Promise.all(fetchList).then((res) => { setImageList((v) => [...v, ...res]); }); }) .catch((err) => { console.log('err', err); // 勾销抉择,err.message为"勾销" }); }; const upload = (data: SelectedPhoto) => { const formData = new FormData(); formData.append('file', { uri: data.uri, // 本地文件门路 type: 'multipart/form-data', name: 'xxxx.jpg', // 图片名称 }); return uploadImage(formData).then((res) => res.data); };
注意事项
上传过程中不要应用react-native-debugger调试,react-native-debugger会将formdata内容转换为string,造成上传失败,倡议应用flipper察看申请