멀티 업로드 사용 방법-JS 튜토리얼-php.cn

멀티 업로드 사용 방법

php中世界最好的语言

풀어 주다： 2018-04-16 11:43:18

원래의

1392명이 탐색했습니다.

이번에는 멀티 업로드 사용법과 멀티 업로드 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

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

프레임워크는 express를 선택했어요

가장 중요한 것은 여러 책에서 언급된 미들웨어를 테스트하는 것입니다. 조금 일찍 작성되었으며 많은 API가 구식이므로 업데이트를 조금씩 찾아보았습니다.

내가 현재 유용하다고 생각하는 것은 multer와 static입니다.

후자는 페이지를 로컬에서 디버깅할 수 있으며 이는 특히 모바일 페이지에 유용합니다.

이번에는 multer에 대해서 주로 다루겠습니다. 모든 기능을 구현한 것은 아니고, 단일 이미지 업로드 기능만 살펴보고 나머지는 살펴보도록 하겠습니다.

이것은 파일의 전체 디렉터리이며 두 가지 주요 디렉터리가 있습니다. 하나는 루트 디렉터리의 main.js이고 다른 하나는 public/index.html입니다.

코드를 입력하세요:

//main.js
let express = require('express');
var multer = require('multer')
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
 })
var upload = multer({ storage: storage })
//var upload = multer({ dest: 'public/' })
 
let app = express()
app.use(express.static('public'))
app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})
app.listen(3300,'127.0.0.1')

로그인 후 복사

<!-- 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('file');
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append('myfile', file)
      xhr.open('post', '/public/index.html')
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById('result').innerHTML = this.response
          document.getElementById('img').src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>
</html>

로그인 후 복사

jquery 라이브러리를 참조하고 싶지 않아서 기본 ajax를 작성했습니다. 간단히 말하면 버튼을 클릭하여 이미지를 선택한 후 이미지 정보가 myfile 객체를 만들어 백그라운드로 전달합니다. myfile的对象中，传给后台。

express把接受到的图片存储在/public/文件下，这里有个小小的坑。可以看到我在main.js注释了这样一行代码：

var upload = multer({ dest: 'public/' })

로그인 후 복사

其实最开始的时候我用的就是这一行代码，dest的意思是选择一个路径去存储文件，但是这样写有一个小小的问题，存入进来的文件是没有后缀名的。

我在向前台返回数据的时候

res.send(req.file)

로그인 후 복사

这个问题就很严重，比如一个场景是我上传一张图片做头像，但是等我下次进入自己的个人页面，后台给我返回的数据没有办法作为图片的地址使用，这就很麻烦了。所以在网上找了一个原因，就把上面的代码注释换成了这个：

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
})
var upload = multer({ storage: storage })

로그인 후 복사

destination是文件存储的地址，filename设置的是文件的名字，那在这里如果写成这种：

filename: function (req, file, cb) {
 cb(null, file.fieldname + '.png');
}

로그인 후 복사

你会发现你传入的每一张图片的名字都是myfile.png

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

rrreee

사실 처음에 이 코드 줄을 사용했는데 dest는 파일을 저장할 경로를 선택한다는 뜻인데, 이렇게 쓰면 작은 문제가 있습니다. 접미사.

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

rrreee

이 문제는 매우 심각합니다. 예를 들어, 한 시나리오에서는 사진을 아바타로 업로드했지만 다음에 개인 페이지에 들어갈 때 배경에서 반환된 데이터를 사진의 주소로 사용할 수 없습니다. 매우 귀찮습니다. 그래서 인터넷에서 이유를 찾아 위의 코드 주석을 다음으로 대체했습니다:

rrreee destination은 파일이 저장된 주소이고, filename은 파일 이름을 설정합니다. 따라서 여기에 다음과 같이 쓰면: rrreee
전달한 각 사진의 이름은 myfile.png이고 새 사진이 이전 사진을 덮어쓴다는 것을 알 수 있습니다. 그래서 전달된 모든 사진을 저장하기 위해 각 사진마다 다른 식별자로 Date.now()를 사용하여 덮어쓰는 일이 없도록 했습니다.

지금은 여기까지입니다. 다음에 사진을 더 업로드하면 업데이트하겠습니다. 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!