介绍
在前端开发过程中，我们经常需要使用图片上传的功能。如果每个项目都自己写图片上传模块，既浪费时间，又容易出错。npm 包 ngx-renuo-upload 就是一个很好的解决方案，可以让我们快速搭建图片上传模块。本文将详细介绍其使用方法。
安装
在命令行中使用以下命令安装 ngx-renuo-upload：
npm install ngx-renuo-upload --save
使用方法
加载模块
在 app.module.ts 中加载 ngx-renuo-upload 模块：
import { NgxRenuoUploadModule } from 'ngx-renuo-upload';
@NgModule({
declarations: [ AppComponent ],
imports: [ NgxRenuoUploadModule ],
bootstrap: [ AppComponent ]
})
export class AppModule { }在组件中使用
在组件的 HTML 文件中添加以下代码：
<renuo-upload [(ngModel)]="image" [fields]="{ id: 1 }"></renuo-upload>其中，ngModel 绑定了选中的图片，fields 是上传图片时需要携带的参数。在组件的 ts 文件中，需要添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ----
------- ----------------- - -
---- -----------------------------------
---------- -------
--
-这里，我们定义了一个 RenuoUploadConfig 对象，其中包含了上传图片的 URL 和参数名。在组件中使用时，需要将 config 对象传给 renuo-upload 指令：
<renuo-upload [(ngModel)]="image" [config]="config"></renuo-upload>
设置默认图片
可以通过给 ngx-renuo-upload 模块传入默认图片来实现默认显示。在组件的 ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ --- - -
---- --------------------------------------
--
------- ----------------- - -
---- -----------------------------------
---------- -------
--
-此时，在组件的 HTML 文件中添加以下代码，即可实现默认显示：
<renuo-upload [(ngModel)]="image" [config]="config"> <img *ngIf="image?.url" [src]="image.url"> </renuo-upload>
自定义错误处理
如果上传图片失败，ngx-renuo-upload 会默认显示错误信息。但是有时我们需要显示自定义的错误处理信息。可以通过在组件中添加以下代码实现：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ ---------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ----
------- ----------------- - -
---- -----------------------------------
---------- -------
--
-------------- ----------------- -
-------------------
-
-这样，在组件的 HTML 文件中添加以下代码，即可自定义错误信息：
<renuo-upload [(ngModel)]="image" [config]="config" (renuoUploadError)="onError($event)">
<div *ngIf="image?.url else selectImage">
<img [src]="image.url">
</div>
<ng-template #selectImage>
<p>请选择一张图片</p>
</ng-template>
</renuo-upload>使用示例
以下是一个完整的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ ---------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ --- - -
---- --------------------------------------
--
------- ----------------- - -
---- -----------------------------------
---------- -------
--
-------------- ----------------- -
-------------------
-
-<renuo-upload [(ngModel)]="image" [config]="config" (renuoUploadError)="onError($event)">
<div *ngIf="image?.url">
<img [src]="image.url">
</div>
<ng-template #selectImage>
<p>请选择一张图片</p>
</ng-template>
</renuo-upload>总结
使用 ngx-renuo-upload，可以很方便地实现图片上传功能，提高开发效率。同时，本文介绍了一些常用的使用方法，希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d8318