ReactJS, Express, Multer, загрузка изображений CKEditor 5 - PullRequest
Новая
       77

ReactJS, Express, Multer, загрузка изображений CKEditor 5

0 голосов
/ 13 июля 2020

Я использую CKEditor с ReactJS, Express и multer. Я могу загрузить одно изображение, и оно сохраняется в правильном каталоге на сервере. Проблема: изображение сначала появляется, а затем исчезает в окне CKEditor после того, как изображение загружено в каталог, и я получаю всплывающее окно «Невозможно загрузить файл: [имя файла]», а на консоли отображается «POST: [URL] 500 (внутренняя ошибка сервера). Однако, как я уже сказал, изображение ДЕЙСТВИТЕЛЬНО существует в соответствующем каталоге загрузки.

Вот мой код CKEditor: 

<form onSubmit={handleSubmit}>
     <div className="App">
          <CKEditor
              onInit={editor => {
              console.log('Editor ready to use')
              // Insert the toolbar before the editable area.
                            
             editor.ui.getEditableElement().parentElement.insertBefore(
             editor.ui.view.toolbar.element,
             editor.ui.getEditableElement()
             )
             }}
            config={{
                   ckfinder: { uploadUrl: 'http://10.0.0.12:5000/uploadFile' }
            }}
            onChange={(event, editor) => {
                       const data = editor.getData()
                       setEditorData(data)
            }}
            onBlur={(event, editor) => {
                     console.log('Blur.', editor.getData())
            }}
            onFocus={(event, editor) => {
                     console.log('Focus.', editor.getData())
            }}
            editor={DecoupledEditor}
            data={editorData}

     />
</div>
</form>

... а вот мой express серверный код: 

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/uploads')
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname)
    }
})
const upload = multer({ storage })
app.post('/uploadFile', upload.single('upload'), (req, res, err) => {
    if (!req.file)
        return res.status(500).json(err)
    else
        return res.status(200).json({
            data: 'success'
        })
})
...