patchValue 只是不起作用！有什么作用？

Question

我的图片上传功能有问题。在其中一个组件表单上有 8 个条目、7 个文本条目和 1 个图像上传条目。表单可以很好地提交到我的节点服务器并且所有数据都存在，但是图像上传功能仅在某些时候有效。

如果我首先尝试选择图像，则会收到错误消息“无法在 'HTMLInputElement' 上设置 'value' 属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。”

<button class="btn logo" mat-stroked-button type="button"
   (click)="filePicker.click()">Pick Image
</button>
<input type="file" #filePicker formControlName="logo"
   name="logo" (change)="onImagePicked($event)" />

我明白这一点，但我看到的每个示例都有相同或相似的语法。是否有不止一种方法可以做到这一点？

如果我首先更改 3 个字段中的数据，然后选择一个图像，则该功能按预期工作，方法是将文件上传到 multer，将文件名添加到 db，然后返回结果，但我仍然设置失败值错误，即使它有效？？？？我不明白。它有效，但无效。

this.adminSettingsForm.patchValue({'logo': file,}); // doesn't work

this.adminSettingsForm.patchValue({['logo']: file,}); // doesn't work

this.adminSettingsForm.patchValue({[logo]: file,}); // doesn't work

this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false}); // doesn't work

this.adminSettingsForm.get('logo').updateValueAndValidity(); // throws an error because of the above.

这是我的服务，发送和接收正确的数据...除了图像。

updateStoreInfo(
storeName: string, logo: File, address: string,
city: string, state: string, zip: string, phone: string, email: string
) {
const formData = new FormData();
formData.append('storeName', storeName);
formData.append('logo', logo);
formData.append('address', address);
formData.append('city', city);
formData.append('state', state);
formData.append('zip', zip);
formData.append('phone', phone);
formData.append('email', email);

return this.http.post<{ message: string; settings: Settings }>(`${this.serverUrl}/admin/settings/storeInfo`, formData)
  .subscribe(result => {
    const resData = result;
    alert(resData['message']);
    const adminSettings = resData['settings'];
this.settingsChanged(adminSettings);
  });

}

这是我的节点服务器功能

router.post('/settings/storeInfo', multer({dest: imgDir, storage: 
imgStorage, fileFilter: fileFilter})
  .fields([
    { name: 'logo', maxCount: 1 },
  ]), (req, res, next) => {


  storeSettingsId = req.body.storeSettingsId
  StoreSettings.findById(storeSettingsId)
    .then(settings => {
      if (req.files.logo) {
        settings.image= req.files.logo[0].filename;
      } else {
        settings.image = settings.image;
      }

      settings.storeName = req.body.storeName,
      settings.address = req.body.address,
      settings.city = req.body.city,
      settings.state = req.body.state,
      settings.zip = req.body.zip,
      settings.phone = req.body.phone,
      settings.email = req.body.email,
      settings.save();

      return res.status(201).json({ message: 'Settings Saved!', settings });
    })
    .catch(err => {
      console.log(err);
      const error = new Error(err);
      error.httpStatusCode = 500;
      return next(error);
    });

  });

我还有 6 个类似这样的表格，每个表格上传的图片数量都不同。从 1 张图片到 20 张图片。当我提交包含多个图片的表单时，最后一张图片将被忽略。一个多星期以来，我一直试图解决这个问题，但我想我被困住了。我想不通，我没酒了！有人请给我一个我还没有用谷歌搜索过的解决方案。

更新： 我已经更新了上面的代码并重建了我的表单并尝试了以下几行： this.adminSettingsForm.patchValue({ 'logo': file }); // 不起作用 - 无法设置 'value' 属性...（控制台）

   this.adminSettingsForm.patchValue({'logo': file, });
// doesn't work with trailing comma - Failed to set the 'value' property... (console)

   this.adminSettingsForm.patchValue({['logo']: file, });
// doesn't work - Failed to set the 'value' property... (console)

   this.adminSettingsForm.patchValue({[logo]: file, });
// doesn't work - did I mean this.logo(IDE) - logo not defined(console)

   this.adminSettingsForm.controls['logo'].patchValue(file);
// refErr 'logo is not defined'

   this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false});
// dooesn't work - Failed to set the 'value' property... (console)

   this.adminSettingsForm.controls['logo'].value = file;
// Cannot assign to 'value' because it is a read-only property. Breaks build but not error in console

   this.adminSettingsForm.value['logo'].value = file; // doesn't work

除了更新输入的文件值外，此功能的每个部分都有效。有谁知道为什么会这样。我完全不知所措，我一直在循环编码。

Answer 1

试试：

this.adminSettingsForm.controls['image'].value = file;

或

this.adminSettingsForm.value['image'].value = file;