JSPM – vue-upload-x@1.1.0

Package Exports

vue-upload-x

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-upload-x) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

参数

Name	Type	Default	Description
pictureList	`Object`	{}	初始化传入的图片数据，格式：{id: url}
limit	`String`	5	限制大小限制，单位（M）
accept	`String`	image/gif, image/jpeg, image/jpg, image/png	上传文件类型限制
maxlength	`String`	1000	上传图片张数限制
multiple	`Boolean`	false	是否允许多图上传
directory	`Boolean`	false	支持上传文件夹
callbackDataType	`String`	base64	本地拿到图片数据的回调参数，支持 'formData' 或 'base64'
upload	`Function`		本地拿到图片数据的回调回调函数
delete	`Function`		触发删除的回调函数

其他注意说明

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