xheditor图片上传

MrZWJ 2020-03-27 原文

xheditor图片上传

前端步骤:分为三部,这三部做完之后就能正确显示富文本了

1、下载xheditor文件,并按照如下要求进行引入:

  <!– xheditor富文本的文件引入 –>
  <script type=”text/javascript” src=”/xheditor/xheditor-1.2.2/jquery/jquery-1.4.4.min.js”></script>
  <script type=”text/javascript” src=”/xheditor/xheditor-1.2.2/xheditor-1.2.2.min.js”></script>
  <script type=”text/javascript” src=”/xheditor/xheditor-1.2.2/xheditor_lang/zh-cn.js”></script>

 

2、对富文本进行配置:

<script>
  $(‘.xheditor’).xheditor({
    tools:’full’,
    skin:’default’,
    upImgUrl:’/article/upload’, //这一步尤其重要,添加了之后才会显示本地图片上传按钮,并确认了提交路径为‘/article/upload’
    html5Upload: false,
    upMultiple:1
  });
</script>

 

3、html文件中加入文本域textArea,并将其class设置为xheditor,如下:

<textArea name=”content” class=”xheditor”> <%- item.content %> </textArea>

 

后台node处理程序:

var multiparty = require(‘multiparty’);  //multiparty对图片进行处理

var fs = require(‘fs’)  //文件读写

 

router.post(‘/upload’, function(req, res, next) {
  var form = new multiparty.Form();  //获取form实例
  form.parse(req, function(err, fields, files) { //格式化
    if (err) {
      console.log(“上传失败”, err)
    } else {
      console.log(‘files’, files)
      var file = files.filedata[0] //获取图片文件对象
      var rs = fs.createReadStream(file.path)  //读图片文件对象
      var newPath = ‘/upload/’ + file.originalFilename 
      var ws = fs.createWriteStream(‘./public/’ + newPath)  //写图片文件对象
      rs.pipe(ws)  //管道读写
      ws.on(‘close’, function() {  //监听写完成事件
        console.log(‘文件上传成功’)
        res.send({  //向前端返回图片上传成功之后的路径msg
          err: ”,
          msg: newPath  
        })
      })
    }
  });
})

发表于
2020-03-27 13:36 
MrZWJ 
阅读(
评论(
编辑 
收藏

 

版权声明:本文为MrZWJ原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/MrZWJ/p/12580839.html

xheditor图片上传的更多相关文章

随机推荐

  1. Mysql 52条SQL语句性能优化策略汇总

    1、对查询进行优化,应尽量避免全表扫描,首先应考虑在where及order by涉及的列上建立索引。   2、 […]...

  2. SQL Server数据库还原. bak文件

    步骤: 1、点击数据库(Databases),选择恢复数据库(Restore Database)   2、选择 […]...

  3. 机器学习分类

    本文参考了北京大学王文敏教授的《人工智能原理》课程 https://www.icourse163.org/co […]...

  4. 怎么找回苹果CMSv10管理员密码?

      忘记了苹果cms后台管理员密码。许多小伙伴都可能遇到这个问题,那我就来简单分享一下苹果CMS V10如何找 […]...

  5. MySql和Oracle数据库区别

    Oracle与mysql区别: 1.Oracle有表空间,mysql没有表空间。 2.mysql的char类型 […]...

  6. AXURE动态面板内部显示隐藏对动态面板的影响关系

    动态面板   1、动态面板的概述:动态面板是一个嵌套在当前页面的可活动模块(元件),一般用来设置动作比如滑动旋 […]...

  7. MySQL拼接字符串,GROUP_CONCAT 值得拥有

    上一篇文章 跨表更新,看到自己写的SQL像个憨憨写了关于跨表个更新的内容。一年过的很快,文中后来的两位员工 馮 […]...

  8. 基因芯片与NGS区别[转载]

    转自:http://blog.sina.com.cn/s/blog_40d4ae110101fjzy.html […]...

展开目录

目录导航