react-quill上传图片

以下是使用react-quill上传图片的步骤：

1. 首先，你需要安装react-quill和相关的依赖包。你可以使用以下命令来安装：

npm install react-quill axios

2. 在你的React组件中引入react-quill和axios：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import axios from 'axios';

3. 在你的组件中创建一个状态来存储编辑器的内容和上传的图片URL：

const [editorHtml, setEditorHtml] = useState('');
const [imageUrl, setImageUrl] = useState('');

4. 创建一个函数来处理图片上传：

const handleImageUpload = async (file) => {
  const formData = new FormData();
  formData.append('image', file);

  try {
    const response = await axios.post('YOUR_UPLOAD_URL', formData);
    const imageUrl = response.data.imageUrl;
    setImageUrl(imageUrl);
  } catch (error) {
    console.error('Error uploading image', error);
  }
};

请将`YOUR_UPLOAD_URL`替换为你的图片上传接口的URL。

5. 在你的组件中渲染react-quill编辑器，并配置相关的属性和事件处理函数：

<ReactQuill
  value={editorHtml}
  onChange={setEditorHtml}
  modules={{
    toolbar: {
      container: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['link', 'image'],
        ['clean'],
      ],
      handlers: {
        image: () => {
          const input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/*');
          input.click();

          input.onchange = async () => {
            const file = input.files[0];
            const range = quillRef.current.getEditor().getSelection(true);
            quillRef.current.getEditor().insertEmbed(range.index, 'image', 'data:image', 'user');
            quillRef.current.getEditor().setSelection(range.index + 1);
            handleImageUpload(file);
          };
        },
      },
    },
  }}
/>

请将`YOUR_UPLOAD_URL`替换为你的图片上传接口的URL。

6. 最后，你可以在编辑器中插入图片并将其上传到服务器。上传成功后，你可以将图片的URL设置为`imageUrl`状态，并在编辑器中显示图片：

<ReactQuill
  value={editorHtml}
  onChange={setEditorHtml}
  modules={...}
  formats={...}
  style={{ height: '300px' }}
/>

{imageUrl && <img src={imageUrl} alt="Uploaded" />}