介绍
vue-awesome-image-upload 是一个支持多种文件格式上传的 Vue 组件库，支持选择文件、预览、裁剪、压缩等功能，使用简单易懂，而且可以自定义上传 API。该组件库基于 Vue3 实现，支持 SSR 和后端渲染。
安装
使用 npm 安装：
npm install vue-awesome-image-upload
使用 yarn 安装：
yarn add vue-awesome-image-upload
使用
首先，需要在 Vue 组件中引入 vue-awesome-image-upload：
import ImageUpload from 'vue-awesome-image-upload'
在模板中使用组件：
-- -------------------- ---- -------
----------
-------------
----------------------
---------------------
---------------------
----------------
------------------
------------
-------------------
---------------------
-----------------------------
---------------------------------
-------------------------------
---------------------------
-----------------------------------------
------------------
--------------------
------------------------------
--------------------
-----------------------------
-----------------------------------
------------
-----------------------------------
--------------
--------------
--------------
------------------
--------------------
----------------
-----------------------------
-------------------------------
----------------
--
-----------其中，uploadAction 表示上传的 API、uploadFiles 表示当前组件选中的文件、fileList 表示上传成功的文件列表、accept 表示接受的文件类型、headers 表示上传文件所需的 headers、data 表示上传文件时附带的额外数据、maxSize 表示上传文件的最大尺寸，maxCount 表示上传文件的最大数量，beforeUpload 表示上传文件之前的验证，previewOptions 表示预览图片的参数，resizeOptions 表示图片缩放的参数，cropOptions 表示图片裁剪的参数，compressionOptions 表示图片压缩的参数，filters 表示文件过滤器，multiple 表示是否支持多文件上传，showFileList 表示是否显示上传成功的文件列表，disabled 表示组件是否禁用，showProgress 表示是否显示上传进度条，progressOptions 表示上传进度条的样式，name 表示文件字段名称，withCredentials 表示是否携带 Cookie，abort 表示取消上传，error 表示上传失败时的回调，start 表示上传开始时的回调，success 表示上传成功时的回调，progress 表示上传进度变化时的回调，remove 表示已上传文件被删除时的回调，exceededSize 表示上传的文件大小超过限制时的回调，exceededCount 表示上传的文件数量超过限制时的回调，select 表示文件被选择时的回调。
示例代码
-- -------------------- ---- -------
----------
-----
-------------
-------------
----------------------
---------------------
---------------------
----------------
------------------
------------
-------------------
---------------------
-----------------------------
---------------------------------
-------------------------------
---------------------------
-----------------------------------------
------------------
--------------------
------------------------------
--------------------
-----------------------------
-----------------------------------
------------
-----------------------------------
--------------
--------------
------------------
--------------------
----------------
----------------
-
--------- ---------
---------------------
-----------
---------------
------
-----------
--------
------ ----------- ---- --------------------------
------ ------- -
----- ------------------
----------- - ----------- --
------ -
------ -
------------- ------------------------------
------------ ---
--------- ---
------- ----------
-------- - -------------- ------- ---- --
----- - ------ ----- --
-------- - - ---- - -----
--------- --
--------------- ---
-------------- ---
------------ ---
------------------- ---
-------- ---
--------- -----
------------- -----
--------- ------
------------- -----
---------------- ---
----- -------
---------------- ------
-
--
-------- -
------------------ -
-----------------
------ ----
--
---------- ---- -
---------------- ----
--
----------- -
-----------------
--
------------ ----- -
---------------- -----
-------------------- ---- ------------- ----- --------- --
--
------------------ ----- -
--------------------- -----
--
------------ -
-----------------
----- ----- - ------------------------------ -- --------- --- ----------
-- ------ - --- -
--------------------------- --
-
--
------------- -
-------------------------------
--
--
-
---------指导意义
使用 vue-awesome-image-upload 组件库，可以方便地实现图片上传功能。在开发中，图片上传是很常见的需求，而且图片上传所涉及到的操作相对比较复杂，例如图片的预览、裁剪、压缩等。而使用 vue-awesome-image-upload ，可以简化开发过程，让开发者更加专注于页面逻辑的实现。
同时，vue-awesome-image-upload 支持多种格式，且可以自定义 API，灵活易用。因此，在开发中，也可以根据业务需求自定义 API ，满足项目需求。
总的来说，vue-awesome-image-upload 是一个非常好用的图片上传组件库，帮助开发者节省了时间与精力。在实际开发中，使用此组件库进行图片上传会让我们的代码更加优雅，易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f76238a385564ab68ec