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://localhost\public\uploads\a\9ac6fc4c9b4bfc4b10a1d13baf5a9a89.png"
data獲取到的是圖片地址由//和\組成,所以造成圖片上傳也從服務器拿到數據了,但圖片插入錯誤
其中req.file的屬性fieldname:上傳的字段名
originalname:上傳的文件名 例如:1.jpg
destination:存儲目錄 例如:public/uploads/a
filename:默認保存的文件名 例如:9ac6fc4c9b4bfc4b10a1d13baf5a9a89
path:保存的相對路徑名 例如path:'public\\uploads\\a\\9ac6fc4c9b4bfc4b10a1d13baf5a9a89'