@gaopeng123/image-upload NPM

image-upload

截图上传插件，支持点击上传、截图粘贴上传、拖拽上传

属性配置

属性	配置	说明
width	string \| number	默认100%
height	string \| number	默认200
picture-width	string \| number	默认48
picture-height	string \| number	默认48
action	string	上传接口，默认为空字符串
list-type	picture \| picture-card	list排列或者卡片排列
multiple	boolean	是否支持多选，默认单选，配置为true后支持多选
accept	支持的图片类型	默认.png,.jpg,.jpeg
file-list	string	上传列表{name: string, url: string}
max-count	number	限制数据，默认不限制
prevent-preview	boolean	默认为false，是否阻止默认的预览方式

事件接口

getFileList

当前上传的list

document.querySelector('image-upload').getFileList();
// 传递进来的数据 或者 File

onPreview

预览事件

document.querySelector('image-upload').addEventListener('onPreview', ({detail})=> {});

uploadChange

上传更新接口

document.querySelector('image-upload').addEventListener('uploadChange', ({detail})=> {});

afterUpload

上传后服务端返回的数据

document.querySelector('image-upload').addEventListener('afterUpload', ({detail})=> {});

afterDelete

document.querySelector('image-upload').addEventListener('afterDelete', ({detail})=> {});

Usage

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>screenshot-upload</title>
</head>
<body style="margin: 0px;">
<div style="display: flex;align-items: center;justify-content: center;margin-top: 100px;">
    <image-upload
            id="upload"
            list-type="picture"
            picture-width="64"
            picture-height="64"
            max-count="4"
            width="400px">
    </image-upload>
</div>
<script>
    window.onload = () => {
        // 支持的数据格式
        const fileList = [{
            name: 'tttt.png',
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }, {
            name: 'aaaa.png',
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }, {
            name: '666.png',
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }];
        const upload = document.querySelector('#upload');
        upload.setAttribute('file-list', JSON.stringify(fileList));
        upload.addEventListener('uploadChange', ({detail}) => {
            console.log(detail);
        });
        upload.addEventListener('afterUpload', ({detail}) => {
            console.log(detail);
        });
        upload.addEventListener('afterDelete', ({detail}) => {
            console.log(detail);
        });
    }
</script>
</body>
</html>

image upload

@gaopeng123/message @gaopeng123/utils.file @gaopeng123/utils.object @gaopeng123/utils.types

@infinitebrahmanuniverse/nolb-_gao @everything-registry/sub-chunk-351 @gaopeng123/rc-image-upload @gaopeng123/vue-image-upload

10 months ago

1 year ago

2 years ago

2 years ago