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;

patchValue根本不起作用！什么事

1 个答案: