cari

Rumah >hujung hadapan web >tutorial js >express+multer如何实现图片上传功能

express+multer如何实现图片上传功能

亚连
亚连asal
2018-06-08 13:43:262024semak imbas

这篇文章主要介绍了使用express+multer实现node中的图片上传功能,需要的朋友可以参考下

下文给大家介绍使用express+multer实现node中的图片上传功能，具体内容介绍如下所示：

在前端中，我们使用ajax来异步上传图片,使用file-input来上传图片，使用formdata对象来处理图片数据，post到服务器中

在node中使用multer中间件来对上传路由接口进行处理

multer文档

package.json

html部分

<body>
<p class="form-group">
    <label>File input:</label>
    <input type="file" name="file" id="file">
    <p id="result"></p>
    <img id="img" src="">
  </p>
  <button id="upload" class="btn btn-default">提交</button>
  </body>

js部分

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //上传图片的业务逻辑函数
    function uploadFile(){
      //上传图片的input
      var file = document.getElementById("file")
      //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
      //创建formdata对象
      var formData = new FormData();
      //给formdata对象中放入数据(键值对的方式)
      formData.append(&#39;file&#39;,file.files[0]);
      //提交请求
      $.ajax({
        url: &#39;/upload&#39;,//请求路径
        type: &#39;POST&#39;,
        data: formData,
        contentType: false,//为了让浏览器根据传入的formdata来判断contentType
        processData: false,//同上
        success: function(data){
          if(200 === data.code) {
            $(&#39;#result&#39;).html("上传成功！");
            $(&#39;#img&#39;).attr(&#39;src&#39;,data.data);
          } else {
            $(&#39;#result&#39;).html("上传失败！");
          }
          console.log(2)
        },
        error: function(){
          $("#result").html("与服务器通信发生错误");
        }
      });
      console.log(1)
    }
    //给按钮添加点击事件
    function postPage() {
        //上传按钮
        var uploada = document.getElementById(&#39;upload&#39;);
        uploada.addEventListener("click",function () {
          uploadFile();
        },false);
    }
    window.onload = function () {
      postPage();
    }
</script>

NodeJS逻辑代码

const http = require(&#39;http&#39;)
const path = require(&#39;path&#39;)
const express = require(&#39;express&#39;)
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require(&#39;multer&#39;)
const app = express()
//配置express的静态目录
app.use(express.static(path.join(__dirname, &#39;public&#39;)));
app.get(&#39;/&#39;,(req,res)=>{
  res.sendFile(__dirname+&#39;/index.html&#39;)
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    cb(null, &#39;./public/uploadImgs&#39;)
  },
![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)
  //确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
  filename: function (req, file, cb){
    cb(null, Date.now()+file.originalname)
  }
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post(&#39;/upload&#39;, upload.single(&#39;file&#39;), function (req, res, next) {
  //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
  //线上的也就是服务器中的图片的绝对地址
  var url = &#39;/uploadImgs/&#39; + req.file.filename
  res.json({
    code : 200,
    data : url
  })
});
http.createServer(app).listen(3000,()=>{
  console.log(&#39;server is listening&#39;)
})

自我感觉良好，不知道博客园为什么要给我移除首页....

再发一次，if(delete){
alert(&#39;Never publish anything again.&#39;)
}else{
alert(1)
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript中Object基础内部方法图（图文教程）

如何实现node+express个性化聊天室？

在webpack中如何使用ECharts？

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 sebelumnya：原生JS如何实现音乐播放器Artikel seterusnya：在Vue中如何实现表头和首列固定

Artikel berkaitan

Lihat lagi