wangEditor 上传附件

创建 wangEditor

创建一个index.js文件

import React, { Component } from 'react'
import Wangeditor from 'wangeditor'
export default class RcWangEdite extends Component {
  constructor(props) {
    super(props)
    this.containerRef = React.createRef()
  }

  componentDidMount = () => {
    const div = this.containerRef.current;
    const editor = new Wangeditor(div);
    this.editor = editor;
    this.setCustomConfig();
    editor.create();
  };
  onChange = html => {
    this.props.onChange(html);
  };

  setCustomConfig = () => {
    const { customConfig } = this.props;
    this.editor.customConfig = {
      // 关闭粘贴内容中的样式
      pasteFilterStyle: false,
      // 忽略粘贴内容中的图片
      pasteIgnoreImg: true,
      // 使用 base64 保存图片
      uploadImgShowBase64: true
      ...customConfig,
    };
  };
  render() {
    return <div  ref={this.containerRef} />>;
  }
}

添加上传图片

修改setCustomConfig这个方法

setCustomConfig = () => {
  const { customConfig } = this.props
  this.editor.customConfig = {
    // 关闭粘贴内容中的样式
    pasteFilterStyle: false,
    // 忽略粘贴内容中的图片
    pasteIgnoreImg: true,
    // 上传图片到服务器
    uploadFileName: 'image', //设置文件上传的参数名称
    uploadImgServer: commonApi.imgUploadApi, //设置上传文件的服务器路径
    uploadImgMaxSize: 10 * 1024 * 1024, // 将图片大小限制为 10M
    uploadImgHooks: {
      before: function(xhr, editor, files) {
        before && before(xhr, editor, files)
      },
      fail: function(xhr, editor, result) {
        fail && fail(xhr, editor, result)
      },
      error: function(xhr, editor) {
        error && error(xhr, editor)
      },
      timeout: function(xhr, editor) {
        timeout && timeout(xhr, editor)
      },
      customInsert: (insertImg, result) => {
        const { code, data, msg } = result
        if (code == 0) {
          insertImg('/CMMS' + data.image_url)
        } else {
          message.error(msg)
        }
      },
    },
    ...customConfig,
  }
}

上传附件

首先我们写一个fileMenu.js的文件

/**
  editor: wangEdit的实例
  editorSelector: wangEdit挂载点的节点
  options: 一些配置
*/
export default (editor, editorSelector, options) => {
  editor.fileMenu = {
    init: function(editor, editorSelector) {
      const div = document.createElement('div')
      div.className = 'w-e-menu'
      div.style.zIndex = 10001
      const rdn = new Date().getTime()
      div.onclick = function() {
        document.getElementById(`up-${rdn}`).click()
      }

      const input = document.createElement('input')
      input.type = 'file'
      input.name = 'file'
      input.id = `up-${rdn}`
      input.className = 'upload-file-input'

      div.innerHTML = `<span class="upload-file-span">上传附件</span>`
      div.appendChild(input)
      editorSelector.getElementsByClassName('w-e-toolbar')[0].append(div)
    },
  }

  // 创建完之后立即实例化
  editor.fileMenu.init(editor, editorSelector)
}

在index.js中引入fileMenu.js

import fileMenu from './fileMenu';
...
...
// 修改componentDidMount
componentDidMount = () => {
    const div = this.containerRef.current;

    const editor = new Wangeditor(div);
    this.editor = editor;
    this.setCustomConfig();
    editor.create();
    // 要放在editor实例化之后创建上传菜单
    fileMenu(editor, this.containerRef.current);
  };

做完这一步之后，wangEditor 富文本的菜单栏上已经有上传附件的按钮，并且点击可以选择文件了

对选择的文件进行上传

写一个上传文件的 js，uploadFile.js

import { message } from 'antd'
function uploadFile(files, options) {
  if (!files || !files.length) {
    return
  }
  let uploadFileServer = commonApi.imgUploadApi //上传地址
  const maxSize = 100 * 1024 * 1024 //100M
  const maxSizeM = maxSize / 1000 / 1000
  const maxLength = 1
  const uploadFileName = 'file'
  const uploadFileParams = {}
  const uploadFileParamsWithUrl = {}
  const timeout = 5 * 60 * 1000 //5 min
  // ------------------------------ 验证文件信息 ------------------------------
  const resultFiles = []
  const errInfo = []
  for (let file of files) {
    const name = file.name
    const size = file.size
    // chrome 低版本 name === undefined
    if (!name || !size) {
      return
    }
    if (maxSize < size) {
      // 上传附件过大
      errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M')
      return
    }
    // 验证通过的加入结果列表
    resultFiles.push(file)
  }
  // 抛出验证信息
  if (errInfo.length) {
    this._alert('附件验证未通过: \n' + errInfo.join('\n'))
    return
  }
  if (resultFiles.length > maxLength) {
    this._alert('一次最多上传' + maxLength + '个文件')
    return
  }
  // ------------------------------ 自定义上传 ------------------------------
  // 添加附件数据
  const formdata = new FormData()
  for (let file of resultFiles) {
    const name = uploadFileName || file.name
    formdata.append(name, file)
  }
  // ------------------------------ 上传附件 ------------------------------
  if (uploadFileServer && typeof uploadFileServer === 'string') {
    for (key in uploadFileParams) {
      val = encodeURIComponent(uploadFileParams[val])
      formdata.append(key, val)
    }
    // 定义 xhr
    const xhr = new XMLHttpRequest()
    xhr.open('POST', uploadFileServer)
    // 设置超时
    xhr.timeout = timeout
    xhr.ontimeout = function() {
      if (options.timeout && typeof options.timeout === 'function') {
        options.timeout(xhr, editor)
      }
      message.error('上传附件超时')
    }
    // 监控 progress
    if (xhr.upload) {
      xhr.upload.onprogress = function(e) {
        let percent = void 0
        // 进度条
        if (e.lengthComputable) {
          percent = e.loaded / e.total
          if (options.onProgress && typeof options.onProgress === 'function') {
            options.onProgress(percent)
          }
        }
      }
    }
    // 返回数据
    xhr.onreadystatechange = function() {
      let result = void 0
      if (xhr.readyState === 4) {
        if (xhr.status < 200 || xhr.status >= 300) {
          // hook - error
          if (options.onFail && typeof options.onFail === 'function') {
            options.onFail(xhr, editor)
          }
          return
        }
        result = xhr.responseText
        if ((typeof result === 'undefined' ? 'undefined' : typeof result) !== 'object') {
          try {
            result = JSON.parse(result)
          } catch (ex) {
            // hook - fail
            if (options.onFail && typeof options.onFail === 'function') {
              options.onFail(xhr, editor, result)
            }
            return
          }
        }
        const data = result || []
        if (data.code == 0) {
          options.onOk && options.onOk(data.data)
        }
      }
    }
    // 自定义 headers
    for (let key in uploadFileHeaders) {
      xhr.setRequestHeader(key, uploadFileHeaders[key])
    }
    // 跨域传 cookie
    xhr.withCredentials = false
    // 发送请求
    xhr.send(formdata)
  }
}
export default uploadFile

粗略的封装了一个上传文件的方法，options 主要暴露有以下几个 api

其他的需要扩展的，可以自行添加

在fileMenu.js中引入uploadFile.js

import uploadFile from './uploadFile';
...
...
// 修改`init`方法， 给`input`加上`onChange`事件
editor.fileMenu = {
  init: function(editor, editorSelector) {
    ...
    ...
    input.onchange = e => {
      // 使用uploadFile上传文件
      uploadFile(e.target.files, {
        onOk: data => {
          console.log(data)
          // 可以使用editor.txt.html(data)进行更新
        },
        onFail: err => {
          console.log(err)
        },
        onProgress: percent => {
          console.log(percent)
        },
      });
    };
  },
  ...
  ...
};

就这样子，wangEditor 实现了上传富文本的功能，wangEditor 也封装好了

开发工具与关键技术：VS软件，上传附件 
作者：陈隆
撰写时间：2019年06月05日

上传附件的这个功能其实是非常的多项目需要使用到的，因为这个功能可以帮助许多用户省去一些不必要的麻烦，因为上传附件这个功能可以上传许多种类的文件，就比如说比如图片或者文档或者视频、音频等等的文件都是可也上传的，这些都是可也集中在一个功能就可也完成的，也不用每个类型的文件就只能在对应的功能才能上传，就是这个功能就可以帮助许多的用户减少许多的麻烦，也可以为编程的人员省下了不少的代码，这样有东西需要上传的项目都会使用到这个附件的上传的这个功能，其实上传附件这一个功能需要的代码也不少的，主要就是需要的判断比较多一些，因为兼容许多的文件类型，就是这样就相当于把多个功能集合到了一块，不过呢先对单一的功能可以说真的是省下了不少的代码的，那么下面就开始写一下这个上传附件的功能的代码，代码可以说分为三部分，第一部分呢就是HTML的页面布局代码，这里的HTML代码是最简单的一部分，随随便便就可以设计出你想要的心仪页面，HTML部分的代码我这里就不讲了，那么接下来就开始写视图部分的代码，具体的代码看下面截图，由于代码比较多，所以就分为两张截图。（视图代码截图一）

视图这里的代码就是写一个表单中的改变事件，首相声明提交的文件的类型和用prop方式提交的，然后判断一下是否已经上传了文件，这里就判断是否大于零就可以知道是否有文件了，如果没有上传文件就给用户一个提示就可以了，如果已经上传了文件就判断上传的文件大小，设置文件的大小限制，设置文件的限制是为了上传的成功性，如果上传的文件过大就会出现上传失败的，如果上传的文件大于限制的大小就给用户提示一个文件不能超过限制的大小就可以了，判断成功后就开始使用XMLHttpRequest方式上传文件，然后new一个对象，然后就是把上传的文件放入到刚刚所new的对象中，设置为0坐标，因为计算机的坐标都是从0开始的，然后需要new一个XMLHttpRequest对象，然后就是注册监听事件和向控制器发送上传的文件是否符合，这里就需要控制器写一个查询了，然后写一个function，一般情况都会有一个提交中显示的加载层的，然后这里就需要关闭这个家载层，然后var声明一个参数，然后就是判断内容是否等于true，如果是就是代表上传已经成功了，成功就需要刷新一下表格，如果不刷新呢，所上传的文件是不会显示到内容框中的，所以这里就需要判断符合就要刷新一下表格显示文件就可以了，然后给控制器发送一个请求，发完请求后就给用户提示一个上传成功就可以了，如果判断文件不等于true的呢就是不符合条件的文件，不符合的就不能成功的上传了，给用户提示一个上传失败就可以了。
（视图第二部分代码截图）

接着就是到了上传的部分，这里上传会有一个上传进度的，这个进度会不断的调用的，只要有文件上传就会调用这个上传进度的，如果文件过小，那么这个进度是不容易看见他在的进度的，因为速度太快，根本就看不出变化的，然后就是到了调用完上传进度后就开始上传文件了，这里的上传方式一定要用post方式提交，否则会出问题的，提交后就打开加载层提示一下已经是上传中了，上传完之后还需要发送一下数据，如果不清掉目前的值就有可能无法连续上传相同的文件，因为是上面的代码中使用了onchange事件的原因造成的，那么到了这里视图这部分的代码就完成了。
然后就是到了写控制器部分的代码了，控制器的代码比视图中的代码更加多，控制器一共需要写两个方法，一个是查询上传的附件，还有一个是上传附件，所以控制器的代码需要分成几次截图了，那么下面就开始写控制器部分的代码，这里查询的代码是很简单的一部分，所以我这里里就不在截图了，查询这里的代码就是要先获取到session中的文件表，然后判断文件是否不等于空，不等于空就存在session中的文件表中，然后还需要做数据分页，然后return返回数据到视图页面就可以了。查询的代码也不多的。那么下面直接写上传附件的代码了，具体代码看下面的截图（上传附件控制器代码一）

这里首先需要写一个try、catch来捕获异常，然后就是获取上传文件的大小，如果大于0就判断上传的文件不能设置限制的大小，如果大于了设置的限制大小就给用户一个提示就可以了，然后就是活期session中的文件表，因为文件都是存在session表中的，然后就是检查目录是否存在，如果不存在就创建，这里指的是上传的文件需要保存到的文件夹，就是判断一下是否已经存在了某个文件夹，如果不存在就写一句代码自动创建就可以了，然后需要确定一下文件的类型，然后就是创建不包含文件扩展名的名称，还有原始名称，然后就是给文件名称添加上时间的字符串，防止上传的文件名相同，如果文件相同就会有冲突的，所以加上时间字符串就不会有什么问题了，时间字符串就是在文件夹后面加上年、月、日、是、分、秒、毫秒就是这些了，加上这些就可以避免文件名重复了，然后就是保存文件的路径了，这里的路径就是需要把上传的文件保存到什么文件夹中，就写什么文件夹的路径就可以了，但是必须是上面所创建的文件夹，然后就是保存文件了。（控制器代码二）
//文件格式
int fileTypeId; string fileTypeName; fileExtension = fileExtension.ToLower();
if("(.mp4)|(.avi)|(.flv)|(.rmvb|(.rm)|(.3gp)|(.mkv)|(.dvd)|(.mpg)|(.mov)".Contains(fileExtension))
{ fileTypeId = 1;//视频
fileTypeName = “视频”; }
else if ("(.mp3)|(.wav)|(.cd)|(.ogg)|(.ape)|(.au)".Contains(fileExtension))
{ fileTypeId = 2;//音频
fileTypeName = “音频”;}
FilesVo filesVo = new FilesVo
{FileTypeID = fileTypeId,
FileTypeName = fileTypeName,
FileName = fileName,
FileGuid = Guid.NewGuid().ToString(“N”),
Files = “<a href=”/SystemManagement/IssuanceNotice/DownloadAttachment?fileName=" + fileName + “” target="_blank">" + oldFileName + “”};
//更新session
if (sessionFiles != null)
{ sessionFiles.Add(filesVo);
Session[“sessionFiles”] = sessionFiles;
return Json(true, JsonRequestBehavior.AllowGet);
}
}
}
catch (Exception e)
{ Console.WriteLine(e); }
return Json(false, JsonRequestBehavior.AllowGet);
}
接着就是文件的格式，需要判断一下格式的后缀来确定是上面文件的，我这里就写连个做示例了，不多写了，判断完之后就需要new一个实体类来处理这些数据，拼接上所有需要的东西就可以了，然后到了需要更新一下session，这里友需要创建一个判断，判断一下session中的文件是否不等于空，null就是代表空，如果不等于空就更新，然后获取到里面的数据，最后return返回数据到视图页面就可以了。这样就完成了这个功能了。