Multer-dropzone являются мусором? - PullRequest
Новая
       87

Multer-dropzone являются мусором?

0 голосов
/ 27 апреля 2020

У меня проблема .. Я использую Multer-DropZone для загрузки изображения и его сохранения. Это нормально, я загружаю изображение успешно, но я не могу отобразить их. Мой код: 

<SERVER />
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads')
    },
    filename: (req, file, cb) => {
        cb(null, `${Date.now()}_${file.originalname}`)
    },
    fileFilter: (req, file, cb) => {
        const ext = path.extname(file.originalname)
        if (ext !== '.jpg' || ext !== '.png') {
            return cb(res.status(400).end('only jpg, png are allowed'), false);
        }
        cb(null, true)
    }
})

var upload = multer({ storage: storage }).single("file")
////////
postRouter.post("/uploadfiles", (req, res) => {

    upload(req, res, err => {
        if (err) {
            return res.json({ success: false, err })
        }
        return res.json({ success: true, image: res.req.file.path, fileName: res.req.file.
filename })
    })

});
<CLIENT />
 const onDrop = (files) => {
    let formData = new FormData();
    const config = {
        header: { 'content-type': 'multipart/form-data' }
    }
    console.log(files)
    formData.append("file", files[0])
    axios.post('post/uploadfiles', formData, config)
        .then(response => {
            console.log(response)
            if (response.data.success) {
                setpostImage(response.data.image)
            } else {
                alert('failed to save the video in server')
            }
        })
}
//after i just submit and save this state to the mongodb.
<MY DROPZONE />
<Dropzone
    onDrop={onDrop}
    multiple={false}
    maxSize={800000000}>
    {({ getRootProps, getInputProps }) => (
        <div style={{display: 'flex'}}
            {...getRootProps()}
        >
            <input {...getInputProps()} />
        </div>
    )}
</Dropzone>

имя пути примерно такое: {uploads \ example.jpg} и мой сервер работает на localhost 5000. Проблема здесь, когда я пытаюсь отобразить это изображение как 

<img src={`http://localhost:5000${p.postImage}`} alt='' />

Нет целой информации. rnet ... *** p.postImage - это путь {upload \ example.jpg}

...