简介
preview-uploader 是一个前端的图片上传组件，可以将图片上传到云存储、七牛等平台，并提供图片预览功能，适用于大部分前端项目。
安装
使用 npm 安装：
npm install preview-uploader
或使用 yarn 安装：
yarn add preview-uploader
使用
引入
在代码中引入：
import PreviewUploader from 'preview-uploader'
实例化
实例化一个上传组件：
-- -------------------- ---- -------
----- -------- - --- -----------------
--- ---------- -- -------------
---------- -------------- -- -------
----------- --------------- -- ---------
------ -
--- ------------------------
--- ------------------------
------- -------------------------
------- -------------------
-- -- -----------------
----------- -
---------- -----------------------------
------------- -------------------------------
-- -- ------ -------------------
------------------- -
------------------- --------- ---------
--
-------------- -
--------------------- ------- ------
-
--参数说明
PreviewUploader 实例的参数说明如下：
| 参数名 | 类型 | 描述 |
|---|---|---|
| el | string | 组件渲染的容器元素的选择器。 |
| uploadUrl | string | 上传图片的接口地址。 |
| previewUrl | string | 图片预览的接口地址。 |
| qiniu | object | 将图片上传到七牛云存储的参数，包括 ak、 sk、bucket、domain。 |
| cloudinary | object | 将图片上传到 Cloudinary 的参数，包括 cloudName、 uploadPreset。 |
| onSuccess | function | 上传成功的回调函数，函数会接收上传成功的响应。 |
| onError | function | 上传失败的回调函数，函数会接收上传失败的错误信息。 |
| accept | string | 接受的文件类型，可以是 image/*（所有图片格式）或 image/jpeg（只接受 JPEG 格式的图片），默认为所有格式。 |
| maxFileSize | number | 文件大小限制，单位为字节，默认为 10MB。 |
| progress | boolean | 是否开启上传进度显示，默认开启。 |
| progressColor | string | 上传进度条颜色，支持任何 CSS 颜色格式，默认为 #1890ff。 |
| buttonText | string | 上传按钮文字，预览模式下该参数无效。 |
| previewMode | boolean | 是否开启预览模式，默认关闭。 |
方法
PreviewUploader 实例的方法说明如下：
upload()
手动触发上传操作，没有参数。
uploader.upload()
preview(file)
预览指定的文件，参数为一个 File 对象或 dataURL。
uploader.preview(file)
clear()
清空上传队列，没有参数。
uploader.clear()
destroy()
销毁上传组件，没有参数。
uploader.destroy()
示例
以下是完整的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------
-------
------
---- --------------------
------- ------------------------------------------------------------------------------------------
--------
----- -------- - --- -----------------
--- ------------
---------- --------------
----------- ---------------
------ -
--- ------------------------
--- ------------------------
------- -------------------------
------- -------------------
--
------------------- -
------------------- --------- ---------
--
-------------- -
--------------------- ------- ------
-
--
---------
-------
-------总结
preview-uploader 是一个功能齐全、易于使用的前端图片上传组件，通过对组件的配置和实例化操作，我们可以将图片上传到不同的云存储、实现图片预览等功能。希望本文可以帮助读者更好地理解和使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb381e8991b448da1a6