Comment express+multer implémente la fonction de téléchargement d'images-js tutoriel-php.cn

Comment express+multer implémente la fonction de téléchargement d'images

亚连

Libérer： 2018-06-08 13:43:26

original

1961 Les gens l'ont consulté

Cet article présente principalement l'utilisation d'express+multer pour implémenter la fonction de téléchargement d'image dans le nœud. Les amis qui en ont besoin peuvent s'y référer

Ce qui suit présentera l'utilisation d'express+multer pour implémenter l'image. fonction de téléchargement dans le nœud. Les détails L'introduction du contenu est la suivante :

Dans le front-end, nous utilisons ajax pour télécharger des images de manière asynchrone, utilisons file-input pour télécharger des images, utilisons des objets formdata pour traiter les données d'image, et publiez sur le serveur

Utilisez le middleware multer dans le nœud pour traiter l'interface de routage de téléchargement

document mult

package.json

partie 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>

Copier après la connexion

partie 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>

Copier après la connexion

Code logique 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;)
})

Copier après la connexion

Je me sens bien dans ma peau, mais je ne sais pas pourquoi le parc de blogs veut supprimer la page d'accueil pour moi... .

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Schéma de méthode interne de base d'Object en JavaScript (tutoriel graphique)

Comment implémenter le chat personnalisé node+express chambre?

Comment utiliser ECharts dans webpack ?

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment express+multer implémente la fonction de téléchargement d'images