• Vue 图片上传组件(base64 版):vue-upload-imgs


    vue-upload-imgs 上传组件保存的是图片的 base64 码,这是项目地址,欢迎关注。

    在线 demo

    文档

    字段 类型 描述 默认值 值类型 示例
    type 属性值 组件显示模式 0.图片预览 1.图片列表 2.带有上传按钮的图片预览 0 Number
    disabled 属性值 禁用组件 false Boolean
    access 属性值 组件允许上传的图片类型 image/* String
    files 属性值 组件图片数据 [] Array v-model="files" files:[{ url: 'xxx', name: 'xxx.jpg'}]
    label 属性值 上传按钮 '点击上传' String
    limit 属性值 限制上传的图片数量,0 为不限制 0 Number
    max-size 属性值 允许上传图片的最大尺寸,单位字节 null Number
    multiple 属性值 是否允许多选 false Boolean
    compress 属性值 是否开启压缩 false Boolean
    quality 属性值 压缩质量 0.8 Number
    before-read 属性值 读取文件前的钩子函数 null Function,返回值为 true 则继续读取图片,为 false 则不进行任何操作
    after-read 属性值 读取文件后的钩子函数 null Function,参数为读取后的图片
    before-remove 属性值 移除文件前的钩子函数 null Function,参数为要预览的图片索引值 index 和图片 file,返回值为 true 则删除图片,为 false 则不进行任何操作
    oversize 事件 图片大小超过 max-size 时触发 null Function,参数为超过尺寸大小的图片
    exceed 事件 图片超出限制个数时触发 null Function
    preview 事件 点击图片上的 + 号触发预览事件 null Function,参数为要预览的图片索引值 index 和图片 file

    使用

    在单文件组件中引用

    npm i vue-upload-imgs
    
    import Vue from 'vue'
    import VueUploadImgs from 'vue-upload-imgs'
    
    Vue.use(VueUploadImgs)
    
    <template>
        <div>
            <VueUploadImgs 
                multiple
                compress
                :before-read="beforeRead"
                :after-read="afterRead"
                :before-remove="beforeRemove"
                :limit="limit"
                :type="type"
                @preview="preview"
                @exceed="exceed"
                @oversize="oversize"
                v-model="files"
            >
            </VueUploadImgs>
        </div>
    </template>
    

    在HTML文件中直接引用

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../dist/vueUploadImgs.umd.min.js"></script>
    
    <div id="app">
        <vue-upload-imgs 
            multiple
            compress
            :before-read="beforeRead"
            :after-read="afterRead"
            :before-remove="beforeRemove"
            :limit="limit"
            :type="type"
            @preview="preview"
            @exceed="exceed"
            @oversize="oversize"
            v-model="files"
        >
        </vue-upload-imgs>
    </div>
    
  • 相关阅读:
    百度生成短网址
    虚拟机开发配置
    WAMPserver配置(允许外部访问、phpmyadmin设置为输入用户名密码才可登录等)
    CSS3阴影 box-shadow的使用和技巧总结
    HTML5日期输入类型(date)
    Ubuntu18设置mysql的sql_mode
    php图片压缩-高清晰度
    微信小程序禁止下拉_解决小程序下拉出现空白的情况
    使用命令行设置MySql编码格式
    腾讯首页分辨手机端与pc端代码
  • 原文地址:https://www.cnblogs.com/woai3c/p/12734789.html
Copyright © 2020-2023  润新知