hapijs에서 프로필 사진 업로드 17.0

Question

hapijs 버전 17.0.1을 사용하고 있습니다. hapijs 경로에서 아약스 요청을 사용하여 이미지를 업로드하려고합니다.

var uploadUserPic = { 
     method: 'POST', 
     path: '/v1/Module/uploadUserPic', 
     config: { 
      description: 'Update Image For User', 
      tags: ['api', 'User'], 
      auth: 'session', 
      payload: { 
       output: 'stream', 
       parse: true, 
       allow: 'multipart/form-data' 
      }, 
      validate: { 
       payload: { 
        userId : Joi.string().regex(/^[a-f\d]{24}$/i).required(), 
        memberId: Joi.string().required(), 
        image_file: Joi.object().required(), 
       }, 
       failAction: FailCallBack 
      } 
     }, 
     handler: function (request, reply) { 
      var resultData = null; 
      var error = null; 
      return new Promise(function (resolve) { 
       var multiparty = require('multiparty'); 
       var fs = require('fs'); 
       var form = new multiparty.Form(); 
       form.parse(request.payload, function (err, fields, files) { 
        if(err) 
        { 
         error = err; 
         resolve(); 
        } 
        else 
        { 
         var mkdirp = require('mkdirp'); 
         var img_dir = "./files/users/"; 
         mkdirp(img_dir, function (err) { 
          if (err) 
          { 
           error = err; 
           console.error(err); 
           resolve(); 
          } 
          else 
          { 
           var oldpath = files.image_file.path; 
           var newpath = "./files/users/"+requestPayload.userId+".png"; 
           fs.rename(oldpath, newpath, function (err) { 
            if(err) 
            { 
             error = err; 
            } 
            resolve(); 
           }); 
          } 
         }); 
        } 
       }); 
      }).then(function (err, result) { 
       if(err) return sendError(err); 
       if(error) return sendError(error) 
       return { 
        "statusCode": 200, 
        "success": true 
       }; 
      }); 
     } 
    } 

위의 코드는 내게 줄에 오류 cannot read property 'content-length' of undefined에 따라 제공 form.parse(request.payload, function (err, fields, files) {});

나를 주시기 바랍니다 : 내 Hapijs 경로 코드가 여기에

var image_file_input = document.getElementById("user_profile_upload"); 

image_file_input.onchange = function() { 
    if(this.files != undefined) 
    { 
     if(this.files[0] != undefined) 
     { 
      var formData = tests.formdata ? new FormData() : null; 
      if (tests.formdata) 
      { 
       //alert(file) 
       formData.append('image_file', this.files[0]); 
       formData.append('userId', user_id); 
       formData.append('memberId', member_id); 
      } 
      $.ajax({ 
       url: "/v1/User/uploadUserPic", 
       data: formData, 
       type: "POST", 
       dataType: "json", 
       contentType: false, 
       processData: false, 
       contentType: "multipart/form-data", 
       success: function(data){ 
        console.log(data); 
        var errMsg = null; 
        var resData = null; 
        if(data.statusCode == 200) 
        { 
         resData = data.result; 
        } 
        else 
        { 
         alert(data.message) 
        } 
       }, 
       error: function(error){ 
        alert(error); 
       } 
      }); 
     } 
    } 
} 

: 그리고 여기 내 AJAX 코드는 프로필 그림을 업로드하는 것입니다 만약 내가 뭔가 잘못하고있다. 만약 내가 PHP로 작성한 anohter URL로 아약스 요청의 URL을 대체하면 완벽하게 작동합니다. 이는 내 hapijs/nodejs 코드에 문제가 있음을 의미합니다.

Answer 1

Hapi.js에 파일 업로드를 처리하는 방법에 대한 좋은 포스트 (버전 16로 작성) https://scotch.io/bar-talk/handling-file-uploads-with-hapi-js

당신이 payload.parse = true을 사용하고 있기 때문에, 당신이 multiparty를 사용하는 이유 특정 이유를보고 있지 않다가있다. 나는 (더 위생이 수행되지 않습니다으로 생산에 직접 사용하지 마십시오) 서버에 업로드 디렉토리에 클라이언트에서 업로드 (모든 종류의) 파일을 저장 할 다음 작업 코드

 { 
      path: '/upload', 
      method: 'POST', 
      config: { 
       payload: { 
        output: 'stream', 
        parse: true, 
        allow: 'multipart/form-data' 
       }, 
       validate: { 
        payload: { 
         files: Joi.array().single() 
        } 
       } 
      }, 
      handler: function(request) { 
       const p = request.payload, files = p.files 
       if(files) { 
        console.log(`${files.length} files`) 
        files.forEach(async file => { 
         const filename= file.hapi.filename 
         console.log(`Saving ${filename} to ./uploads`) 
         const out = fs.createWriteStream(`./uploads/${filename}`) 
         await file.pipe(out) 
        }) 
       } 
       return {result: 'ok'} 
      } 
     } 

당신은 다음을 사용할 수 있습니다 curl 명령으로 테스트하기

curl http://localhost:8080/upload -F 'files=@/path/to/a/note.txt' -F 'files=@/path/to/test.png' -vvv 

코드에 몇 가지 문제가 있습니다. $.ajax 호출에서 먼저 contentType을 두 번 지정했습니다. 구문 오류는 아니지만 그렇게 코딩하는 것은 부주의합니다. 둘째 .then() 블록 내부의 함수 서명이 올바르지 않습니다. Promise와 콜백이라는 아이디어를 혼합하고 있습니다. 난 당신이 핸들러 함수의 서명을 기반으로

handler: function (request, reply) { 
... 

당신이 완전히 내장하지 않은 것 같다 게요! 17 사용되지만 말했다, 다음 줄은

 if(err) return sendError(err); 

마지막으로 사소한 일을 트리거 할 것이라고 생각하지 않는다 Hapi17에 새로운 서명이

handler: function (request, h) { 

이며 h-reply 단지 이름 변경이 아니다한다.