Express Multer 업로드 및 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

Express Multer 업로드 및 사용에 대한 자세한 설명

小云云

풀어 주다： 2018-01-20 10:30:38

원래의

1743명이 탐색했습니다.

이 글은 Express 시리즈의 멀티 업로드 활용법을 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

저는 지난 이틀 동안 이 책을 읽었지만 한번도 주의깊게 읽은 적이 없습니다.

주로 wenpack 사용에 대한 몇 가지 세부 사항으로 인해 여전히 많은 이득이 있습니다. 게다가 노드에 대해 더 이상 혼란스럽지 않습니다. 그런데 솔직히 현재 수준에서는 node를 직접 사용해서 뭔가를 하기가 꽤 어렵습니다. 오늘은 mongodb와 mysql 데이터베이스에 대한 링크를 테스트해 보았지만 여전히 이상합니다. 그래서 기존 프레임워크를 먼저 사용하고, 그 다음 노드를 거꾸로 학습하고 싶습니다.

프레임워크로는 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 키 이름을 가진 개체에 넣고 배경으로 전달됩니다. 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

Express는 수신된 이미지를 /public/ 파일에 저장합니다. 여기에는 작은 함정이 있습니다. main.js에서 다음 코드 줄을 주석 처리한 것을 볼 수 있습니다.

rrreee
사실 처음에 이 코드 줄을 사용했는데 이는 dest를 의미합니다. > 파일을 저장할 경로를 선택하는 것인데, 이렇게 작성하면 저장된 파일에 접미사가 붙지 않는 문제가 있습니다.

프론트에 데이터를 반납할 때

rrreee이 문제는 매우 심각합니다. 예를 들어 한 시나리오에서는 사진을 아바타로 업로드했는데 다음에 개인 페이지에 들어가면 백엔드가 반환됩니다. 데이터를 이미지 주소로 사용할 수 있는 방법이 없어 매우 번거롭습니다. 그래서 인터넷에서 이유를 찾아 위의 코드 주석을 다음과 같이 대체했습니다.

rrreeedestination은 파일이 저장된 주소이고 filename

🎜🎜🎜rrreee🎜에 다음과 같이 작성하면 파일 이름이 The name으로 설정됩니다. 전달하는 각 사진의 이름은 myfile.png이고 새 파일은 하나는 이전 것을 덮어 씁니다. 그래서 전달된 모든 사진을 저장하기 위해 각 사진마다 다른 식별자로 Date.now()를 사용하여 덮어쓰는 일이 없도록 했습니다. 🎜🎜지금은 여기까지입니다. 다음에 사진을 더 업로드하면 업데이트하겠습니다. 🎜🎜🎜관련 권장 사항: 🎜🎜🎜🎜파일 업로드 기능을 구현하기 위한 Ajax 및 node.js multer에 대한 자세한 설명🎜🎜🎜🎜multer 정의 및 사용법 요약🎜🎜🎜🎜Nodejs 고급: express+multer를 기반으로 한 파일 업로드 예제🎜🎜

위 내용은 Express Multer 업로드 및 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!