复制上传图片

Installation

 npm install pasteimg_zxf --save

Usage

import React, { useState,memo, useMemo, useRef } from "react";
import ReactDOM from "react-dom";
import PasteImg from "../../src/index";

const App = memo(() => {
  const [list, setList] = useState([]);
  const ref = useRef();
  useMemo(()=>{
      ref.current = list
  },[list])
  const callback = (value, img) => {
    console.log(value, img,ref.current);
    if (img) {
      blobToDataURL(img, (base64url) => {
          console.log(list)
        let arr = [...ref.current];
        arr.push(base64url);
        setList(arr);
      });
    }
  };
  const blobToDataURL = (blob, cb) => {
    let reader = new FileReader();
    reader.onload = function (evt) {
      let base64 = evt.target.result;
      cb(base64);
    };
    reader.readAsDataURL(blob);
  };
  return (
    <div>
      <PasteImg callback={callback} list={list} />
      <div className="imgs">
        {list.map((item) => (
          <img key={item} src={item} style={{marginBottom:10,marginRight:10}} />
        ))}
      </div>
    </div>
  );
});

Props

1. callback:textarea的value变化或粘贴了图片的回调 必传
2. value：初始值，没有可不传
3. list：储存图片的数组，不限制图片数量可以不传
4. length：最多可以上传的图片数量，不限制图片数量可以不传
5. class_name：类名，不想更改样式或者只用一个组件的可以不传