wangEditor图片上传，vue3+nodejs

• 前端代码

我这里是自定义上传，最重要的是customUpload函数，官方文档也有

 

 

 下面是我返回的数据alt和href没管，主要是返回url

 代码:

const editorConfig = { MENU_CONF: {} }
editorConfig.MENU_CONF['uploadImage'] = {
      //自定义上传，这里server就不需要了
      // server: '/adminapi/news/uploadimg',
      timeout: 5 * 1000, // 5s

      //默认
      fieldName: 'wangeditor-uploaded-image',

      //这里的Authorization是我的token根据自己需要,自定义上传Content-Type在这写了没用
      headers: { Authorization: `Bearer ${token}`},

      //图片大小限制
      maxFileSize: 10 * 1024 * 1024, // 10M
 
      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
 
      onBeforeUpload(files) {
        console.log('onBeforeUpload', files)
      
        return files // 返回哪些文件可以上传
        // return false 会阻止上传
      },
    async customUpload(file, insertFn) {                   // JS 语法
      /* file 即选中的文件
      */
    const  newsform=new  FormData()

     newsform.append("file",file)
      const result = await axios.post(`/adminapi/news/uploadimg`, newsform, {
        headers: {
      'Content-Type': 'multipart/form-data'
    }
      })
        const url='http://127.0.0.1:3000/'+result.data.data.url
      // 最后插入图片
        insertFn(url)
    },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        alert(err.message)
        console.error('onError', file, err, res)
      },
    
    }

• 后端代码nodejs

注意的是如果图片太大，要在app.js调整初始的大小限制

 这是我的接口，multer是必须要的

 这是返回的内容

 

 代码:

const express = require("express")
const NewsRouter = express.Router()
const path = require("path")
const NewsController = require("../../controllers/admin/NewsController")
const multer = require("multer")
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/news/newsuploads/'); // 设置存储目录
    },
    filename: function (req, file, cb) {
        // 生成唯一的文件名，保留原始文件的扩展名
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        const ext = path.extname(file.originalname);

        // console.log(file.originalname)
        cb(null, file.fieldname + '-' + uniqueSuffix + ext);
        console.log(file)
    }
});
const upload = multer({ storage: storage })
NewsRouter.post("/adminapi/news/uploadimg", upload.single("file"), NewsController.uploadimg)

module.exports = NewsRouter