Editor.js-Node.js和Vue.js中Editor.js的Multer错误

问题描述

我创建了一个用于测试https://editorjs.io/的新项目，其中Vue.js用于前端，Node.js用于后端，但是我不能使用图像插件。 我使用Vue的editor.js make软件包：https://www.npmjs.com/package/vue-editor-js

因此，在我的Vue代码中，我喜欢在文档中：

 <template>
  <div>
    <editor image :config="config"/>
  </div>
</template>

<script>
import ImageTool from '@editorjs/image';
import Header from '@editorjs/header';

export default {
  name: 'HelloWorld',data() {
    return {
      config: {
        tools: {
          header: Header,image: {
            class: ImageTool,config: {
              endpoints: {
                byFile: 'http://localhost:4000/api/post/image',byUrl: 'http://localhost:4000/api/post/image-by-url',},field: 'images',types: 'images/*',}
    }
  }
}
</script>

后端

路由器：

const express = require('express')
const router = express.Router()

const postController = require ('../controller/postController')

const multer = require('../middleware/multer-config')

...

router.post('/image',multer,postController.image)
router.post('/image-by-url',postController.imageByUrl)

module.exports = router

multer-config.js：

const multer = require('multer');

const MIME_TYPES = {
    'image/jpg': 'jpg','image/jpeg': 'jpg','image/png': 'png'
};

const storage = multer.diskStorage({
    destination: (req,file,callback) => {
        callback(null,'images');
    },filename: (req,callback) => {
        const name = file.originalname.split(' ').join('_');
        const extension = MIME_TYPES[file.mimetype];
        callback(null,name + Date.now() + '.' + extension);
    }
});


module.exports = multer({storage: storage}).single('image');

控制器：

...
exports.image = function (req,res,next) {
    if (req.file) {
        return res.json({
            success: 1,file: {
                url: `http://localhost:4000/api/post/image/${ req.file.filename }`
            }
        })
    } else {
        return res.json({
            success: 0
        })
    }
}

exports.imageByUrl = function (req,next) {
    const { url } = req.body
    const filename = (new Date()).toISOString() + '.jpg'
    const file = fs.createWriteStream(path.join(__dirname,'uploads',filename));
    https.get(url,function(response) {
        response.pipe(file);
        return res.json({
            success: 1,file: {
                url: `http://localhost:4000/api/post/image/${filename}`
            }
        })
    });
}

最后，当我尝试通过Editor.js导入图像时，出现此错误提示：

MulterError: Unexpected field
    at wrappedFileFilter (C:\wamp64\www\vue-editor-test\backend\node_modules\multer\index.js:40:19)
    at Busboy.<anonymous> (C:\wamp64\www\vue-editor-test\backend\node_modules\multer\lib\make-middleware.js:114:7)
    at Busboy.emit (events.js:315:20)
    at Busboy.emit (C:\wamp64\www\vue-editor-test\backend\node_modules\busboy\lib\main.js:38:33)
    at PartStream.<anonymous> (C:\wamp64\www\vue-editor-test\backend\node_modules\busboy\lib\types\multipart.js:213:13)
    at PartStream.emit (events.js:315:20)
    at HeaderParser.<anonymous> (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (events.js:315:20)
    at HeaderParser._finish (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\HeaderParser.js:68:8)
    at SBMH.<anonymous> (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\HeaderParser.js:40:12)
    at SBMH.emit (events.js:315:20)
    at SBMH._sbmh_feed (C:\wamp64\www\vue-editor-test\backend\node_modules\streamsearch\lib\sbmh.js:159:14)
    at SBMH.push (C:\wamp64\www\vue-editor-test\backend\node_modules\streamsearch\lib\sbmh.js:56:14)
    at HeaderParser.push (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\HeaderParser.js:46:19)
    at Dicer._oninfo (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\Dicer.js:197:25)
    at SBMH.<anonymous> (C:\wamp64\www\vue-editor-test\backend\node_modules\dicer\lib\Dicer.js:127:10)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）