时间戳

首页 > 解决方案 > react fetch javascript 上传视频 nodejs multer

javascript - react fetch javascript 上传视频 nodejs multer

问题描述

我正在使用 fetch 上传视频

    const formData  = new FormData();
    formData.append('name', asset.name);
    formData.append('file', asset.file);

    fetch(generateUrl(`/asset/video?token=${getState().server.token}`), {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) return response.json().then(error => { throw new Error(error.message) });
        return response.json()
    })
    .catch(err => console.error(err))

我从 react ref 获取文件this.fileInput = React.createRef()，文件值是this.fileInput.current.files[0]如此asset.file === this.fileInput.current.files[0]

然后我将它上传到我的服务器

const multer  = require('multer');
const upload = multer({})

const router = express.Router();

router.post('/video', upload.single('file'), dataProvider.security.middleware('post_asset'), (req, res, next) => {
    fs.writeFileSync('test.mp4', req.file.buffer);
})

但是我在转移的某个地方遇到了问题，我可以识别它。

创建的文件test.mp4已损坏，原始文件为 540KB 和test.mp4750KB

使用 const upload = multer({ dest: '/Users/ajouve/Downloads/' }) 我还有一个 750KB 的文件并且已损坏

标Content-Length头是540240所以发送的内容应该没问题

标签： javascriptnode.jsreactjsfetchmulter

解决方案

Multer 应该为你写文件，所以这一行

fs.writeFileSync('test.mp4', req.file.buffer);

不应该在那里。也许这就是为什么你得到更大的尺寸，因为双写。

所以把目的地放回去

const upload = multer({dest:"/Users/ajouve/Downloads/"})

使帖子返回一些“好的”响应。

我这里的设置几乎相同，其余的都很好。

dataProvider.security.middleware('post_asset')

我也不会用，不知道有什么作用。

推荐阅读