使用react-native-image-crop-picker上传图片

清疚 2022-06-08 01:48 230阅读 0赞

使用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 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 apiclod 上传图片_apiCloud上传图片

Hello APP height:100%; \} \wrap\{ height:100%; display:-webkit-box; display:-webki

野性酷女/ 2022年10月31日 00:57/ 0 赞/ 329 阅读

相关图片上传

1.html <div class="work\_bolck" data-id="\{$cinfo5.id|default=0\}" d

Myth丶恋晨/ 2022年09月26日 02:41/ 0 赞/ 14 阅读

相关上传图片

//servlet request.setCharacterEncoding("UTF-8"); InputStream input = null;

约定不等于承诺〃/ 2022年06月08日 05:22/ 0 赞/ 55 阅读

相关图片上传

1.页面表单  <div class="easyui-window" title="对商品进行添加或者修改" id="standardW

浅浅的花香味﹌/ 2022年05月15日 16:07/ 0 赞/ 124 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 838 阅读

相关图片上传

文件上传流程： 1、定义 <input type="file" name="file" accept="image/\" onchange="uploadimage(th

ゝ一世哀愁。/ 2022年04月02日 11:46/ 0 赞/ 404 阅读

相关上传图片

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年5月12日在做项目时，我们在完善一些个人信息、或者一些页面时，我们需要用到图片，

本是古典何须时尚/ 2022年01月31日 12:45/ 0 赞/ 360 阅读

相关上传图片

@Service public class FileServiceImpl implements FileService { privat

柔情只为你懂/ 2021年12月23日 13:47/ 0 赞/ 457 阅读

相关上传图片

<img src="~/Content/img/btn\_1.png" class="img-responsive" id="a\_pic"> <input class="

￡神魔★判官ぃ/ 2021年09月30日 09:54/ 0 赞/ 658 阅读

相关上传图片

// 允许上传的图片后缀 $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = expl

蔚落/ 2021年09月18日 22:22/ 0 赞/ 582 阅读