React Images Uploading 开源项目教程

柯玫艺Harriet

于 2024-08-30 09:42:13 发布

阅读量246

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00902/article/details/141707957

版权

React Images Uploading 开源项目教程

react-images-uploadingThe simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.项目地址:https://gitcode.com/gh_mirrors/re/react-images-uploading

项目介绍

react-images-uploading 是一个用于在 React 应用中处理图片上传的开源库。它提供了一个简单易用的接口，允许开发者轻松地实现图片选择、预览、编辑和上传功能。该库支持多种图片格式，并且可以自定义上传行为，非常适合用于构建需要图片上传功能的 Web 应用。

项目快速启动

安装

首先，你需要在你的 React 项目中安装 react-images-uploading 库：

npm install react-images-uploading

基本使用

以下是一个简单的示例，展示如何在 React 组件中使用 react-images-uploading：

import React, { useState } from 'react';
import ImageUploading from 'react-images-uploading';

function App() {
  const [images, setImages] = useState([]);
  const maxNumber = 69;

  const onChange = (imageList, addUpdateIndex) => {
    // data for submit
    console.log(imageList, addUpdateIndex);
    setImages(imageList);
  };

  return (
    <div className="App">
      <h1>图片上传示例</h1>
      <ImageUploading
        multiple
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
      >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps,
        }) => (
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: 'red' } : undefined}
              onClick={onImageUpload}
              {...dragProps}
            >
              点击或拖拽上传图片
            </button>
            &nbsp;
            <button onClick={onImageRemoveAll}>移除所有图片</button>
            {imageList.map((image, index) => (
              <div key={index} className="image-item">
                <img src={image.data_url} alt="" width="100" />
                <div className="image-item__btn-wrapper">
                  <button onClick={() => onImageUpdate(index)}>更新</button>
                  <button onClick={() => onImageRemove(index)}>移除</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </div>
  );
}

export default App;