Express+multer implémente les étapes spécifiques pour télécharger des images de nœuds-js tutoriel-php.cn

Express+multer implémente les étapes spécifiques pour télécharger des images de nœuds

php中世界最好的语言

Libérer： 2018-04-12 17:31:43

original

2105 Les gens l'ont consulté

Cette fois, je vais vous présenter les étapes spécifiques d'express+multer pour implémenter le téléchargement d'images de nœud. Quelles sont les précautions pour qu'express+multer implémente le téléchargement d'images de nœud. cas. Jetons un coup d'oeil.

Ce qui suit explique comment utiliser express+multer pour implémenter la fonction de téléchargement d'image dans le nœud. Le contenu spécifique est le suivant :

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 publions sur le serveur

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

documentation multer

package.jsonpartie 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('file',file.files[0]);
      //提交请求
      $.ajax({
        url: '/upload',//请求路径
        type: 'POST',
        data: formData,
        contentType: false,//为了让浏览器根据传入的formdata来判断contentType
        processData: false,//同上
        success: function(data){
          if(200 === data.code) {
            $('#result').html("上传成功！");
            $('#img').attr('src',data.data);
          } else {
            $('#result').html("上传失败！");
          }
          console.log(2)
        },
        error: function(){
          $("#result").html("与服务器通信发生错误");
        }
      });
      console.log(1)
    }
    //给按钮添加点击事件
    function postPage() {
        //上传按钮
        var uploada = document.getElementById('upload');
        uploada.addEventListener("click",function () {
          uploadFile();
        },false);
    }
    window.onload = function () {
      postPage();
    }
</script>

Copier après la connexion

Code logique NodeJS

const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(dirname, 'public')));
app.get('/',(req,res)=>{
  res.sendFile(dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    cb(null, './public/uploadImgs')
  },
![](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('/upload', upload.single('file'), function (req, res, next) {
  //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
  //线上的也就是服务器中的图片的绝对地址
  var url = '/uploadImgs/' + req.file.filename
  res.json({
    code : 200,
    data : url
  })
});
http.createServer(app).listen(3000,()=>{
  console.log('server is listening')
})

Copier après la connexion

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

再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des cookies dans Django

Comment remplacer les paramètres d'URL par du JS standard

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!