简介
preview-uploader
是一个前端的图片上传组件,可以将图片上传到云存储、七牛等平台,并提供图片预览功能,适用于大部分前端项目。
安装
使用 npm 安装:
--- ------- ----------------
或使用 yarn 安装:
---- --- ----------------
使用
引入
在代码中引入:
------ --------------- ---- ------------------
实例化
实例化一个上传组件:
----- -------- - --- ----------------- --- ---------- -- ------------- ---------- -------------- -- ------- ----------- --------------- -- --------- ------ - --- ------------------------ --- ------------------------ ------- ------------------------- ------- ------------------- -- -- ----------------- ----------- - ---------- ----------------------------- ------------- ------------------------------- -- -- ------ ------------------- ------------------- - ------------------- --------- --------- -- -------------- - --------------------- ------- ------ - --
参数说明
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()
手动触发上传操作,没有参数。
-----------------
preview(file)
预览指定的文件,参数为一个 File
对象或 dataURL
。
----------------------
clear()
清空上传队列,没有参数。
----------------
destroy()
销毁上传组件,没有参数。
------------------
示例
以下是完整的使用示例:
--------- ----- ------ ------ ----- ---------------- --------------- ------- ------ ---- -------------------- ------- ------------------------------------------------------------------------------------------ -------- ----- -------- - --- ----------------- --- ------------ ---------- -------------- ----------- --------------- ------ - --- ------------------------ --- ------------------------ ------- ------------------------- ------- ------------------- -- ------------------- - ------------------- --------- --------- -- -------------- - --------------------- ------- ------ - -- --------- ------- -------
总结
preview-uploader
是一个功能齐全、易于使用的前端图片上传组件,通过对组件的配置和实例化操作,我们可以将图片上传到不同的云存储、实现图片预览等功能。希望本文可以帮助读者更好地理解和使用该组件。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055cb381e8991b448da1a6