मुझे यह समझने में मदद की ज़रूरत है कि एंगुलर 7 के साथ मल्टर (नोडजेएस) को कैसे संभालना है। मैंने अलग-अलग परिस्थितियों का एक गुच्छा करने की कोशिश की, लेकिन किसी भी फाइल को अपलोड नहीं कर सकता ... मेरी फाइलें एक रिएक्टिवफॉर्म से आती हैं:

<mat-tab
        label="Documents"
        formGroupName="docs">
          <mat-list>
              <mat-nav-list>
                <a mat-list-item
                (click)="fsPicker.click()">
                Upload financial statements
                </a><input type="file" #fsPicker (change)="onDocPicked($event, 'fs')">

                <a mat-list-item
                (click)="cdPicker.click()">
                Upload the constitutional documents
                </a><input type="file" #cdPicker (change)="onDocPicked($event, 'cd')">

                <a mat-list-item
                (click)="idPicker.click()">
                Upload the ID
                </a><input type="file" #idPicker (change)="onDocPicked($event, 'id')">

                <a mat-list-item
                (click)="adPicker.click()">
                Upload the bank account details
                </a><input type="file" #adPicker (change)="onDocPicked($event, 'ad')">

              </mat-nav-list>
          </mat-list>
        </mat-tab>

जिसे एक माइम वैलिडेटर द्वारा नियंत्रित किया जाता है:

// INSIDE NGONINIT: 
    this.customerForm = new FormGroup({
          info: new FormGroup({
            name: new FormControl(null, {validators: Validators.required}),
            vat: new FormControl(null, {validators: Validators.required}),
          }),
          docs: new FormGroup({
            fs: new FormControl(null, {asyncValidators: mimeType}),
            cd: new FormControl(null, {asyncValidators: mimeType}),
            id: new FormControl(null, {asyncValidators: mimeType}),
            ad: new FormControl(null, {asyncValidators: mimeType})
          })
        });

// IN THE REST OF THE CLASS

  onDocPicked(event: Event, type: string) {
    const file = (event.target as HTMLInputElement).files[0];
    this.customerForm.get('docs').patchValue({
      [type]: file
    });
    this.customerForm.get('docs').get(type).updateValueAndValidity();
    this.customerForm.get('docs').get(type).markAsDirty();
    setTimeout(() => {
      if (!this.customerForm.get('docs').get(type).valid) {
      this.openAlert();
      this.customerForm.get('docs').patchValue({
          [type]: null
        });
      }
    }, 100);
  }

फिर सबमिट किया गया और एक समर्पित सेवा को भेजा गया:

onSubmit() {
    if (!this.customerForm.valid) {
      return;
    }
    this.isLoading = true;
    if (!this.editMode) {

      this.customerService.addCustomer(this.customerForm.get('info').value, this.customerForm.get('docs').value);
      this.customerForm.reset();
    } else {
      const updatedCustomer: Customer = {
        id: this.id,
        name: this.customerForm.get('info').value.name,
        vat: this.customerForm.get('info').value.vat
      };
      this.customerService.updateCustomer(this.id, updatedCustomer);
    }
    this.router.navigate(['/customers']);
  }

सेवा के अंदर, बैकएंड को संभाला और भेजा गया:

addCustomer(info, docsData) {
    const customerData = new FormData();
    customerData.append('name', info.name);
    customerData.append('vat', info.vat);
    customerData.append('docs', docsData);
    console.log(docsData);
    this.http.post<{message: string, customerId: string}>(
      'http://localhost:3000/api/customers',
      customerData
      )
      .subscribe((res) => {
        const customer: Customer = {
          id: res.customerId,
          name: info.name,
          vat: info.vat
        };
        this.customers.push(customer);
        this.customersUpdated.next([...this.customers]);
      });
  }

और अंतिम लेकिन कम से कम एक्सप्रेस और मल्टर द्वारा प्राप्त और संभाला नहीं गया:

  const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const isValid = MIME_TYPE_MAP[file.mimetype];
    let err = new Error('invalid mime type!');
    if (isValid) {
      err = null;
    }
    cb(err, 'backend/docs');
  },
  filename: (req, file, cb) => {
    const name = file.originalname.toLowerCase().split('').join('-');
    const ext = MIME_TYPE_MAP[file.mimetype];
    cb(null, name + '-' + Date.now() + '.' + ext);
  }
});

const upload = multer({storage: storage});

router.post('', upload.any(),
// .fields([
//   {name: 'fs'},
//   {name: 'cd'},
//   {name: 'id'},
//   {name: 'ad'},
//   ]),
  (req, res, next) => {
  const customer = new Customer({
    name: req.body.name,
    vat: req.body.vat,
  });
  customer.save().then(result => {
    res.status(201).json({
      message: 'Customer added successfully!',
      customerId: result.id
    });
  });
});

मेरा मानना ​​​​है कि समस्या उस वस्तु से आती है जिसे मैं सर्वर पर भेजने की कोशिश कर रहा हूं... लेकिन मुझे यकीन नहीं है कि इसे ठीक से कैसे संभालना है। यहां तक ​​कि मुल्टर के any कमांड को कॉल करने से भी कुछ नहीं बचता।

स्टैकब्लिट्ज पर पूरी परियोजना का लिंक यहां दिया गया है:

https://stackblitz.com/github/ardzii/test

0
Ardzii 13 मई 2019, 13:45

1 उत्तर

सबसे बढ़िया उत्तर

मैं गलत प्रकार का डेटा भेज रहा था। सही करने के लिए (और यह अब काम करता प्रतीत होता है) मुझे फॉर्मडाटा में सटीक होना था कि मैं फ़ाइलें जोड़ रहा था:

const customerData = new FormData();
    customerData.append('name', info.name);
    customerData.append('vat', info.vat);
    customerData.append('fs', docsData.fs as File, info.vat + 'fs');
    customerData.append('cd', docsData.cd as File, info.vat + 'cd');
    customerData.append('id', docsData.id as File, info.vat + 'id');
    customerData.append('ad', docsData.ad as File, info.vat + 'ad');

एक बार हो जाने के बाद, मैं कॉल करके आसानी से फाइलों को मल्टर से संभाल सकता था:

upload.
fields([
  {name: 'fs', maxCount: 1},
  {name: 'cd', maxCount: 1},
  {name: 'id', maxCount: 1},
  {name: 'ad', maxCount: 1},
  ]),

upload चर पैरामीटर के साथ एक मल्टर का उदाहरण है (प्रश्न में देखें)।

0
Ardzii 14 मई 2019, 09:45