角度2でng2ファイルをアップロードして投稿データを送信する方法は？

Question

角度2でng2-file-uploadを使用しています。ファイルアップロードアクションでフォームデータを送信する方法はありますか？

Answer 1

これは私がng2-file-uploadを使用して同じ問題を抱えていますませ答え、しかしです。彼らはonBeforeUploadItemと呼ばれるフックを持っています。私は以下を試した。

ngOnInit() { 
this.uploader.onBeforeUploadItem = (fileItem: any) => { 
    fileItem.formData.push({ someField: this.someValue }); 
    fileItem.formData.push({ someField2: this.someValue2 }); 
}; 
} 

私がfileItem.formDataの内容をログアウトすると、すべての値がそこにあります。しかし、これらのフォーム要素はサーバーに戻ってこないようです。私はChromeを使用しています.HTTPポストを見ると、次のようになります。

リクエストヘッダ

 
POST /api/upload/csv HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Content-Length: 228 
Origin: http://localhost:4200 
x-access-token: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCSUTihSBrgmwjxg1 
Accept: */* 
Referer: http://localhost:4200/main 
Accept-Encoding: gzip, deflate 
Accept-Language: en-US,en;q=0.8 
Cookie: _ga=GA1.1.941072201.1467616449; token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw 

要求ペイロード

 
------WebKitFormBoundaryCSUTihSBrgmwjxg1 
Content-Disposition: form-data; name="file"; filename="data.csv" 
Content-Type: text/csv 


------WebKitFormBoundaryCSUTihSBrgmwjxg1-- 

何が起こっているの任意のアイデア？ファイルをアップロードするときに、そのファイルで追加のフォーム値を送信する必要があります。

私はかなり近かった。ソリューションはonBuildItemFormを無効にすることでした。

ngOnInit() { 
this.uploader.onBuildItemForm = (fileItem: any, form: any) => { 
    form.append('someField': this.someValue); 
    form.append('someField2': this.someValue2); 
}; 
} 

インスタンスform型FormDataです。私のHTTPポストを見ると、私のフォームフィールドの値がサーバーに送られているのがわかり、私のサーバーは実際に値を見ています。それがあなたを助けることを願っています。

Answer 2

this.uploader.onBeforeUploadItem = (item: FileItem) => { 
    item.withCredentials = false; 
    this.uploader.authToken = 'Bearer ' + this.boxTokenResponse.userToken; 
    this.uploader.options.additionalParameter = { 
    name: item.file.name, 
    parent_id: this.parentFolderId 
    }; 
}; 

これは、file-uploader.class.jsがフォームデータをパンする方法です。サーバー内のデータにアクセスするためのよう

if (!this.options.disableMultipart) { 
     sendable = new FormData(); 
     this._onBuildItemForm(item, sendable); 
     sendable.append(item.alias, item._file, item.file.name); 
     if (this.options.additionalParameter !== undefined) { 
      Object.keys(this.options.additionalParameter).forEach(function (key) { 
       sendable.append(key, _this.options.additionalParameter[key]); 
      }); 
     } 
    } 

Answer 3

、それはMulterを使用して行うことができます。

const multer = require('multer'); 
    let DIR = './uploads/'; 

    let upload = multer({dest: DIR}).single('givenitemAlias'); 
     router.post('/upload', function (req, res, next) { 
      console.log(req.body);//empty object 
      upload(req, res, function (err) { 
       if (err) { 
        // An error occurred when uploading 
        return res.status(422).send("an Error occured") 
       } 
       // No error occured. 
       console.log(req.body);//modified req.body with out key value pairs 
       console.log(req.file);//metadata of the file 
       return res.send("Upload Completed for "+temppathOfUploadedFile); 
      });    
     });