Cet article présente principalement la fonction simple de téléchargement de fichiers utilisant nodejs+express. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
1. Créer un projet express
express -e nodejs-uploadfile
2. Télécharger le middleware Multer
npm i multer or yarn multer
3. Référencez multer dans routes/index.js Puisque les opérations sur les fichiers sont également utilisées, vous devez également référencer le module fs et spécifier le répertoire de téléchargement de fichiers< 🎜. >
const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads'
<form action="/upload" method="post" enctype="multipart/form-data"> <input name="fileUpload" type="file" /> <img src="" alt=""> <button type="submit">上传</button> </form>
router.post('/upload', upload.single('fileUpload'), function (req, res, next) { const { file } = req; fs.readFile(file.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) { if (err) res.json({ err }) res.json({ msg: '上传成功' }); }); }) })
(function($){ $('input').on('change', function(event) { var files = event.target.files, reader = new FileReader(); if(files && files[0]){ reader.onload = function (ev) { $('img').attr('src', ev.target.result); } reader.readAsDataURL(files[0]); } }) }(jQuery))
router.post('/upload', upload.array('fileUpload'), function (req, res, next) { const files = req.files; const response = []; const result = new Promise((resolve, reject) => { files.map((v) => { fs.readFile(v.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) { const result = { file: v, } if (err) reject(err); resolve('成功'); }) }) }) }) result.then(r => { res.json({ msg: '上传成功', }) }).catch(err => { res.json({ err }) }); })
Explication détaillée d'Ajax et de node.js multer pour implémenter la fonction de téléchargement de fichiers
Un exemple de fichier thinkjs fonction de téléchargement
jQuery pour implémenter la fonction d'aperçu du fichier image avant le téléchargement
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!