Question

我是Angular新手，因此，如果看到任何明显的错误，请原谅。随时为我指出正确的方向：）

我有一个调用控制器方法的Angular服务。它曾经像这样被调用，并且返回了一个对象，该对象包含用于在浏览器中显示图像的数据

      return (this.http.post(`/api/vehicles/${vehicleId}/photos`, formData)
         .map(res => res);

在上载图像时，我被要求实现一个进度条，因此我在http调用中添加了reportProgress选项。我的服务现在具有一个名为uploadProgress的属性，可以绑定到进度条并显示上传进度。

@Injectable()
export class PhotoService {

   uploadProgress: any;

...
   upload(vehicleId, photo) {

      let formData = new FormData();
      formData.append('file', photo);

      const uploadReq = new HttpRequest('POST', `/api/vehicles/${vehicleId}/photos`, formData, {
         reportProgress: true
      });

      return (this.http.request(uploadReq)
         .map((event) => {
            if (event.type === HttpEventType.UploadProgress) {
               this.uploadProgress = this.createProgress(event);
            } else if (event.type === HttpEventType.Response) {
               return event.body;
            }
         }));

   }

   private createProgress(event) {
      return {
         total: event.total,
         percentage: Math.round(event.loaded / event.total * 100)
      };
   }

我表单上的方法现在看起来像这样

   uploadPhoto() {
      var nElem: HTMLInputElement = this.fileInput.nativeElement;

      var file = nElem.files[0];
      nElem.value = '';

      this.photoSvc.upload(this.vehicleId, file)
         .subscribe(photo => {
            this.progress = this.photoSvc.uploadProgress;
            console.log('this.progress: ', this.progress);
            if (photo !== undefined) {
               console.log('Photo result:', photo);
               this.photos.push(photo);
            }
         },
            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.text(),
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         },
         () => { this.progress = null; });
   }

subscribe块被触发了很多次，我用它来更新绑定到进度条的“ this.progress”变量。它有效，我不确定这是否是正确的方法，但是可以。如果方法不正确，请随时进行详细说明。

我现在无法确定的问题是，如果行使了我在控制器中的边缘情况（文件大小，文件类型，空文件等），它们将返回BadRequest错误，如下面的示例，但我的err阻止了订阅未捕获到它们，因此不会显示Toast消息。而是转到我的全局错误处理程序。我想在此上传中显示更多有意义的消息，而不是系统现在发布的通用Toast消息。

if (file == null) { return BadRequest("Null file"); }
if (file.Length == 0) { return BadRequest("Empty file"); }

对于这里发生的事情的任何帮助，我们深表感谢。预先感谢！

Answer 1

好，所以将此归咎于复制和粘贴。当我的sentry.io代码发布错误“ err.text不是函数”时，我意识到我的err块不正确。我用

            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.text(),
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         }

代替

            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.error,
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         }

，一旦修复，代码就可以正常工作。对不起，麻烦了，来晚了...

处理从订阅调用到Angular服务中的错误的正确方法

1 个答案: