zoukankan      html  css  js  c++  java
  • 富文本编辑器中的本地图片上传功能

    editor的使用可以在https://www.kancloud.cn/wangfupeng/wangeditor3/335782

    在body中

    <div id="editor"></div>

    在js中

    //富文本编辑器的创建
    var E = window.wangEditor;
    var editor = new E("#editor");
    editor.customConfig.uploadImgServer = '/goods_upload' // 上传图片到服务器的地址
    editor.customConfig.uploadFileName = 'img';//这处写什么名字multer的single中也要写相同的名字


    editor.create();

    在node中

      //写一个模块

      module.exports = function( app , multer ,fs ){
        app.post("/goods_upload" ,function( req , res ){
        var upload = multer({"dest":"public/upload/"}).single('img');
        upload( req , res , function( err ){

          //图片改名

          fs.renameSync( req.file.path , req.file.destination+req.file.originalname );
          console.log(req.file);
        res.send('{"errno":0,"data":["http://10.9.26.248:8080'+(req.file.destination+req.file.originalname).replace('public','')+'"]}');
          })
        })
      }

    在cmd运行的js文件中调用 该模块 require("./goods_upload.js")( app , multer ,fs );

    遇到的问题:

      刚开始使用 

        var arrFilename = req.file.originalname.split(".");
        var kzm = arrFilename[arrFilename.length-1];
        var filename = req.file.path+"."+kzm;
        fs.renameSync(req.file.path, filename);
        res.send('{"errno": 0,"data": ["'+filename.replace('public','')+'"]}')  // data获取到例如: "http://localhostpublicuploadsa9ac6fc4c9b4bfc4b10a1d13baf5a9a89.png"

      data获取到的是图片地址由//和组成,所以造成图片上传也从服务器拿到数据了,但图片插入错误

    其中req.file的属性fieldname:上传的字段名

            originalname:上传的文件名 例如:1.jpg

            destination:存储目录 例如:public/uploads/a

              filename:默认保存的文件名 例如:9ac6fc4c9b4bfc4b10a1d13baf5a9a89

            path:保存的相对路径名 例如path:'public\uploads\a\9ac6fc4c9b4bfc4b10a1d13baf5a9a89'

  • 相关阅读:
    10055
    国外程序员推荐:每个程序员都应该读的非编程书
    Volume 0. Getting Started
    如何成为一名 Google 软件工程师?【Google招聘信息】作者: 丁鑫哲
    毕设-家校通
    如何快速创建数据库连接字符串
    LeetCode day13
    LeetCode day12
    LeetCode day11
    LeetCode day10 Called it
  • 原文地址:https://www.cnblogs.com/guanpingping/p/10150397.html
Copyright © 2011-2022 走看看