React中使用wangEditor5上传本地图片如何配置?

2023-04-05 0 3,043
React中使用wangEditor5上传本地图片如何配置?

假设是你公司配置接口服务器存图片:这种方式需要后端提供一个上传图片的接口,并返回图片的 url。你可以参考一下这段代码的实现:

import React, { useRef } from "react";
import E from "wangeditor";

function App() {
  const editorRef = useRef(null);

  React.useEffect(() => {
    const editor = new E(editorRef.current);
    // 配置上传图片的服务器地址
    editor.config.uploadImgServer = "/upload-img";
    // 配置返回的数据格式
    editor.config.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        // result 是服务器端返回的结果
        var url = result.url;
        insertImg(url);
      },
    };
    // 创建编辑器
    editor.create();
  }, []);

  return <div ref={editorRef}></div>;
}

如果是要上传到阿里云或者其他服务器你可以参考下面的代码:

import React, { useRef } from "react";
import E from "wangeditor";
import OSS from "ali-oss";

function App() {
  const editorRef = useRef(null);

  React.useEffect(() => {
    const editor = new E(editorRef.current);
    // 配置阿里云 OSS 的参数
    const client = new OSS({
      region: "<Your region>",
      accessKeyId: "<Your AccessKeyId>",
      accessKeySecret: "<Your AccessKeySecret>",
      bucket: "<Your bucket name>",
    });
    // 配置自定义上传图片的方法
    editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
      // resultFiles 是 input 中选中的文件列表
      for (let file of resultFiles) {
        // 生成文件名
        const fileName =
          file.name.split(".")[0] +
          "-" +
          Date.now() +
          "." +
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 React中使用wangEditor5上传本地图片如何配置? https://www.jiaruvip.com/1333.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务