2017-09-18 6 views
0

프론트 엔드에서 Plupload를 사용하여 파일 업로드를 구현하고 멀티 파트/폼 업로드를 위해 멀더 미들웨어로 백엔드에서 nodej를 표현합니다. 이 가능한 예는 현재 없다, 그래서 이것은 내가 지금까지 무엇을 가지고 있습니다 :청크와 함께 묵터를 사용하여 익스프레스에서 plupload를 처리하는 방법은 무엇입니까?

HTML 프론트 엔드 : 그것은 기본적으로 단지 plupload 빠른 시작 가이드

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 
</head> 

    <ul id="filelist"></ul> 
    <br /> 

    <div id="container"> 
     <a id="browse" href="javascript:;">[Browse...]</a> 
     <a id="start-upload" href="javascript:;">[Start Upload]</a> 
     <br /> 
     <pre id="console"></pre> 
    </div> 
    <script src="/plupload/js/plupload.full.min.js"></script> 
    <script type="text/javascript"> 
     var uploader = new plupload.Uploader({ 
      browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself 
      url: '/upload' 
     }); 
     uploader.init(); 

     uploader.bind('FilesAdded', function(up, files) { 
      var html = ''; 
      plupload.each(files, function(file) { 
       html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>'; 
      }); 
      document.getElementById('filelist').innerHTML += html; 
     }); 
     uploader.bind('UploadProgress', function(up, file) { 
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
     }); 
     uploader.bind('Error', function(up, err) { 
      document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; 
     }); 
     document.getElementById('start-upload').onclick = function() { 
      uploader.start(); 
     }; 
    </script> 
</html> 

: http://www.plupload.com/docs/v2/Getting-Started

백엔드 사용하여 노드 표현한다. 그래서 여기에 사용하기위한 최소 작업 버전까지 내 코드를 손질 :

const path = require('path'); 
const express = require('express'); 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 

// Create express 
const app = express(); 
app.use(express.static('public')); 
app.post('/upload', upload.array('file'), function(req, res){ 
    console.log(req.files); 
}) 
app.listen(3000, function() { 
    console.log('App running...'); 
}); 

기본적으로, multer 패키지와 정적 파일을 봉사와 단지 일반 고속 응용 프로그램.

질문 : 프런트 엔드 및 NodeJS에 Plupload를 사용하여 파일을 업로드하려면 어떻게

백엔드에 (명시 적, multer 사용)? 또한 청킹을 지원해야합니다.

답변

0

파일을 업로드하기 전에 fileFilter 함수를 사용하여 파일의 유효성을 검사 할 수 있습니다.이 함수를 사용하면 파일 이름, 확장자 및 업로드 할 파일과 건너 뛸 파일의 유효성을 검사 할 수 있습니다.

예를 들어,이 같은 필터를 쓸 수의 당신이 사용자는 "PDF"파일을 업로드한다고 가정하자를 들어

,

multer({ 
    fileFilter: function (req, file, cb) { 
     if (file.mimetype !== 'application/pdf') { 
      req.fileValidationError = 'Only PDF files can be uploaded'; 
      return cb(null, false, new Error('Only PDF files can be uploaded')); 
     } 
     cb(null, true); 
    } 
}); 

그냥 업로드 사용자를 제한하려는 경우 경우 특정 MB 내의 파일, 당신은,

limits: { fileSize: the_file_size_which_you_want_to_allow } 

과 같이 설정할 수있는 limits 재산의 사용을 만들 수 있습니다 마지막으로 당신이 (파일이 업로드됩니다) 대상 디렉토리에 패턴을 명명 공통 파일을 가지고 할 것인지를를 사용할 수 있습니다.은 다음과 같이 작동합니다 (아래 예제에서는 하이픈과 타임 스탬프를 파일 이름에 추가합니다).

filename: function (req, file, cb) { 
    cb(null, file.fieldname + '-' + Date.now()) 
} 

UPDATE

당신이 분류하려는 명시-plupload 통신 담당하게 될 것 plupload 노드 모듈을 사용 할 수 있습니다.

희망이 도움이됩니다.

+0

안녕 데이비드, 어떤 생각을 표현하는 방법을 "말하기"를 plupload로 지정 하시겠습니까? – kosinix

+0

@kosinix 네, 쉽게 할 수 있습니다. 업데이트 된 답변 확인 (** 업데이트 ** 제목 아래) –