Angular6项目upload上传图片功能实现

迈不过友情╰ 2022-01-06 11:23 533阅读 0赞

根据angular6的特性，我们选择符合其本身的框架ng-zorro，这是一款angular的框架，详情请了解[ng-zorro官网][ng-zorro]。

上传图片功能是根据ng-zorro的upload插件进行修改参数值，从而符合我们的需要的功能，具体实现如下：

找到Upload的[插件地址][Link 1]，根据angular特性，进行引入此模块，但是在此之前首先保证引入了追个ng-zorro框架，方法如下

1、、首先在app.module.ts文件中引入ng-zorro框架插件

import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';

2、在想要使用的组建中引入upload组件

import { UploadXHRArgs } from 'ng-zorro-antd';

3、然后就可以直接在html文件中引入upload插件

4、上面就可以正常使用了，如果要把上传的图片通过接口传到后台，nzAction=\{ \{actionApi\}\}就是储存图片的后台服务器地址，然后在通过函数把上传的图片的地址传递给后台，从而形成数据交互。所需函数如下，可以在最后一个自定义上传案例中找到。

customReq = (item: UploadXHRArgs) => {
        this.fileStatus = false;
        this.responseData = [];
        // 构建一个 FormData 对象，用于存储文件或其他参数
        const formData = new FormData();
        // tslint:disable-next-line:no-any
        formData.append('file', item.file as any);
        const req = new HttpRequest('POST', item.action!, formData, {
          reportProgress: true,
          withCredentials: true
        });
        // 始终返回一个 `Subscription` 对象，nz-upload 会在适当时机自动取消订阅
        return this.http.request(req).subscribe(
          (event: HttpEvent<{}>) => {
            if (event.type === HttpEventType.UploadProgress) {
              if (event.total! > 0) {
                // tslint:disable-next-line:no-any
                (event as any).percent = (event.loaded / event.total!) * 100;
              }
              // 处理上传进度条，必须指定 `percent` 属性来表示进度
              item.onProgress!(event, item.file!);
            } else if (event instanceof HttpResponse) {
              // 处理成功
              this.fileStatus = true;
              this.responseData = event.body;
              this.filePath = this.responseData.data;
              item.onSuccess!(event.body, item.file!, event);
            }
          },
          err => {
            // 处理失败
            item.onError!(err, item.file!);
          }
        );
      };

5、处理成功下面是我们需要给后台传递的参数，this.filePath = this.responseData.data;

6、如果是通过表单提交给后台，那么可能会出现一个问题，点击上传按钮的时候表单直接提交了，这时候我们需要吧upload的html代码中的button代码添加上一个type="button"，这样点击upload按钮就不会把表单信息直接提交了。

7、如果想要对上传的图片做出相应的格式限制，并且显示出相应的提示信息，比如限制PNG格式，上传了其他格式文件我们就会进行提示，代码如下：

beforeUpload = (file: UploadFile):boolean => {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
          this.alertTitle = "图片格式仅支持JPG！";
          $('.zmalert').fadeIn().delay(1500).fadeOut();
          return false;
        }
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.alertTitle = "图片格式大小不能超过5M";
          $('.zmalert').fadeIn().delay(1500).fadeOut();
          return false;
        }
      };

在此之前要先引入提示模块NzMessageService，之后就可以愉快的试用了，又什么问题可以随时评论哦，互相学习！

[ng-zorro]: https://ng.ant.design/docs/introduce/zh
[Link 1]: https://ng.ant.design/components/upload/zh