vue-upload-x v1.1.0

vue的上传图片预览组件

NPM

npm install vue-upload-x --save-dev

Example

<template>
    <div>
        <UploadX
        :pictureList="pictureList"
        limit="2"
        accept="image/gif, image/jpeg, image/jpg, image/png"
        maxlength="2"
        multiple
        directory
        callbackDataType='formData'
        @upload="uploadFn"
        @delete="deletePicFn"
        ></UploadX>
    </div>
</template>
<script>
    import UploadX from "vue-upload-x";

    export default {
        name: "App",
        components: {
            UploadX
        },
        data() {
            return {
            pictureList: {
                17: "https://img.zcool.cn/community/0155f45535fea40000001e31083bfa.jpg@1280w_1l_2o_100sh.jpg"
            }
        },
        mounted() {},
        methods: {
            // 上传
            uploadFn(imgData) {
                console.log(imgData)
            },
            // 删除
            deletePicFn(id) {
                console.log(id)
            }
        }
    };
</script>

Api

参数

其他注意说明

1、组件内的错误提示使用了 vue-toast-x 组件，故需要在全局安装此组件； 2、文件夹上传会自动过滤掉不匹配 accept 内指定类型的文件； 3、文件夹上传有兼容性问题，比如IE。