react图片剪裁react-cropper

react-cropper插件文档

先上效果图

import { Upload,  Button, Modal } from 'antd';
state:
    imgList: [], // 图片
   avatarModalVisible: false,
   avatarConfirmLoading: false,
render:
   const {
      imgList,
      avatarModalVisible,
      avatarConfirmLoading,
    } = this.state;

           <>
                    {imgList.length !== 0 && (
                      <Upload
                        action=""
                        listType="picture-card"
                        fileList={imgList}
                        onRemove={this.onRemove}
                      />
                    )}

                    {imgList.length < 9 && (
                      <Button onClick={() => this.hanldeUpload()}>上传图片</Button>
                    )}
                  </>

   <Modal
          title="设备图片"
          visible={avatarModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          confirmLoading={avatarConfirmLoading}
        >
          <div>
            <Cropper
              style={{ width: 300, height: 200 }}
              orginStyle={{ width: 300, height: 200 }}
              hidePreview
              hideInput
              hideRatioBtn
              hideTailorBtn
              aspectRatio={1 / 1}
              src=""
              handleTailor={cb => {
                this.handleTailor = cb;
              }}
              autoCropArea={0.95}
              ref={el => (this.cropperRef = el)}
              isUpload
              minContainerWidth={300}
              minContainerHeight={200}
            />
          </div>
        </Modal>

方法:

  // 弹窗取消
  handleCancel = () => {
    this.setState({
      avatarModalVisible: false,
    });
  };

  // 弹窗确定
  handleOk = e => {
    const file = base64ConvertFile(this.handleTailor(), createUuid());
    const uuid = createUuid();
    const params = {
      uuid,
      file,
      type: 1,
    };
    // 调用接口
    this.queryZuulDocrepoUploadPost(params);
  };

  // 图片上传
  queryZuulDocrepoUploadPost = params => {
    const fileDocDownloadPath = 'api/download?attachmentId=';
    const { imgList } = this.state;
    this.setState(
      {
        avatarConfirmLoading: true,
      },
      async () => {
        const formData = new FormData();
        // 将得到的文件流添加到FormData对象
        formData.append('file', params.file);
        formData.append('uuid', params.uuid);
        formData.append('type', params.type);
        const res = await axios.post(`api/upload`, formData);

        this.setState(
          {
            avatarConfirmLoading: false,
            imgList: [
              ...imgList,
              {
                uid: params.uuid,
                name: res?.data?.data?.fjmc,// 文件名称
                url: fileDocDownloadPath + res?.data?.data?.bh, // 图片的src设置
              },
            ],
          },
          () => {
            this.setState({
              avatarModalVisible: false,
            });
          }
        );
      }
    );
  };

  // 打开剪裁弹窗
  hanldeUpload = () => {
    this.setState({
      avatarModalVisible: true,
    });
  };

  // 删除图片
  onRemove = file => {
    let { imgList } = this.state;
    imgList = imgList.filter(item => item.uid !== file.uid);
    this.setState({
      imgList,
    });
  };

 base64ConvertFile = function(urlData, filename) {
  if (typeof urlData !== 'string') {
    // ("urlData不是字符串")
    return;
  }
  const arr = urlData.split(',');
  const type = arr[0].match(/:(.*?);/)[1];
  const fileExt = type.split('/')[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${fileExt}`, {
    type,
  });
};

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于React Native图片多选,我们可以使用第三方库react-native-image-picker来实现。以下是具体的实现步骤: 1. 安装react-native-image-picker库 使用npm或yarn命令进行安装: ``` npm install react-native-image-picker --save ``` 或者 ``` yarn add react-native-image-picker ``` 2. 导入库 在需要使用图片选择器的组件文件中导入库: ``` import ImagePicker from 'react-native-image-picker'; ``` 3. 添加图片选择器按钮 在需要添加图片选择器的地方添加一个按钮,点击该按钮会触发图片选择器的弹出: ``` <Button title="选择图片" onPress={this.selectImage} /> ``` 4. 实现图片选择器方法 定义一个selectImage方法,该方法将调用图片选择器,并且将选择的图片传递给回调函数: ``` selectImage = () => { const options = { title: '选择图片', cancelButtonTitle: '取消', takePhotoButtonTitle: '拍照', chooseFromLibraryButtonTitle: '从相册中选择', storageOptions: { skipBackup: true, path: 'images', }, allowsMultipleSelection: true, }; ImagePicker.showImagePicker(options, (response) => { if (response.didCancel) { console.log('用户取消了图片选择'); } else if (response.error) { console.log('图片选择器出错:', response.error); } else if (response.customButton) { console.log('自定义按钮被点击:', response.customButton); } else { console.log('选择的图片信息:', response); const { uri, fileName, type, fileSize } = response; // 将选择的图片传递给其他组件处理 this.props.onImageSelected({ uri, fileName, type, fileSize }); } }); } ``` 在该方法中,我们定义了图片选择器的参数options,其中allowsMultipleSelection为true表示可以选择多张图片。 然后调用ImagePicker.showImagePicker方法弹出图片选择器,选择的结果将传递给回调函数response,我们可以从response中获取选择的图片的信息,然后将其传递给其他组件进行处理。 以上就是使用react-native-image-picker实现React Native图片多选的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值