Express multer上传与使用详解-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Express multer上传与使用详解

小云云

Jan 20, 2018 am 10:30 AM

expressPenjelasan terperinci

本文主要介绍了Express系列之multer上传的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

这两天在看《nodejs权威指南》，这本书看了好久了，但是读的一直不细，这次才好好看了一遍。

收获还是蛮多的，主要在于wenpack使用的一些细节问题，有点茅塞顿悟的体验吧，另外在node上也不再一脸懵逼了。不过说实话，以现在的水平向直接使用node做点什么还是挺难的，今天测试了下链接mongodb和mysql数据库，虽然能使用，但还是怪怪的。所以就想先使用现有的框架，再反推学习node。

框架的话就选了这个express.

主要就是测试了几个书里提到的中间件，书写的有些早，很多api都过时了，照着官网一点一点找更新的地方看。

目前觉得对我有用的是：multer和static。

后者可以在本地调试页面，对于手机页面尤其有用。

这次主要说一下multer，我并没有实现所有的功能，只是实现单图片上传这一个功能，其他的再摸索喽。

这是文件的整个目录，主要就两个，一个是根目录下的main.js，还有一个是public/index.html。

放代码：

//main.js
let express = require(&#39;express&#39;);

var multer = require(&#39;multer&#39;)

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
 })
 
var upload = multer({ storage: storage })

//var upload = multer({ dest: &#39;public/&#39; })
 

let app = express()

app.use(express.static(&#39;public&#39;))

app.post(&#39;/public/index.html&#39;,upload.single(&#39;myfile&#39;),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})

app.listen(3300,&#39;127.0.0.1&#39;)

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file" accept="image/*">
  <p id="result"></p>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById(&#39;file&#39;);
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append(&#39;myfile&#39;, file)
      xhr.open(&#39;post&#39;, &#39;/public/index.html&#39;)
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById(&#39;result&#39;).innerHTML = this.response
          document.getElementById(&#39;img&#39;).src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>

</html>

不想引用jquery库，我就原生写的ajax，总的来说应该没什么难的，总之就是点击按钮选择完图片之后，会将图片的信息放在一个键名为myfile的对象中，传给后台。

express把接受到的图片存储在/public/文件下，这里有个小小的坑。可以看到我在main.js注释了这样一行代码：

var upload = multer({ dest: &#39;public/&#39; })

其实最开始的时候我用的就是这一行代码，dest的意思是选择一个路径去存储文件，但是这样写有一个小小的问题，存入进来的文件是没有后缀名的。

我在向前台返回数据的时候

res.send(req.file)

这个问题就很严重，比如一个场景是我上传一张图片做头像，但是等我下次进入自己的个人页面，后台给我返回的数据没有办法作为图片的地址使用，这就很麻烦了。所以在网上找了一个原因，就把上面的代码注释换成了这个：

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
})

var upload = multer({ storage: storage })

destination是文件存储的地址，filename设置的是文件的名字，那在这里如果写成这种：

filename: function (req, file, cb) {
 cb(null, file.fieldname + &#39;.png&#39;);
}

你会发现你传入的每一张图片的名字都是myfile.png，新的覆盖旧的。所以为了能保存传入的所有图片，我就使用Date.now()作为每张图片不同的识别符，这样就不会再出现覆盖的情况。

目前就这样，下次弄出来了多图片上传我再接着更新。

相关推荐：

详解Ajax 配合node.js multer 实现文件上传功能

multer定义与用法汇总

Nodejs进阶：基于express+multer的文件上传实例

Atas ialah kandungan terperinci Express multer上传与使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

See all articles