Express 및 Multer는 노드에서 이미지 업로드 기능을 구현합니다.

프런트 엔드에서는 ajax를 사용하여 이미지를 비동기적으로 업로드하고, 파일 입력을 사용하여 이미지를 업로드하고, formdata 객체를 사용하여 이미지 데이터를 처리하고, 서버에 게시하고, 노드에서 multer 미들웨어를 사용하여 업로드 라우팅 인터페이스를 처리합니다. 이 글은 주로 node에서 이미지 업로드 기능을 구현하기 위한 express+multer의 사용을 소개합니다. 필요한 친구들이 참고하면 좋겠습니다.

multer document

package.json

html part

<p>
    <label>File input:</label>
    <input>
    </p><p></p>
    <img  src="/static/imghwm/default1.png" data-src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" class="lazy" alt="Express 및 Multer는 노드에서 이미지 업로드 기능을 구현합니다." >
  
  <button>提交</button>
  

js part

<script></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 logic code

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')
})

제 자신이 좋아요. 블로그 공원이 왜 저를 위해 홈페이지를 제거했는지 모르겠어요 ....

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

관련 추천:

Kindeditor 편집기에 이미지 업로드 워터마크 구현 방법 추가

ThinkPHP5.0 이미지 업로드 플러그인 공유 예시 구현

WeChat 애플릿 이미지 업로드 예시의 PHP 구현 코드 공유

위 내용은 Express 및 Multer는 노드에서 이미지 업로드 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!