当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 23:58:53 vue.js

vue-upload-imgs上传组件保存了图片的base64编码,即项目地址,欢迎关注。在线演示预览模式列表模式disableddocumentfieldtypedescriptiondefaultvaluevaluetypeexampletype属性值组件显示方式0.图片预览1.图片列表2.图片预览带上传按钮0Numberdisabled属性值disabled组件falseBooleanaccess属性值组件允许上传图片类型image/*Stringfiles属性值组件图片数据[]Arrayv-model="files"files:[{url:'xxx',name:'xxx.jpg'}]label属性值uploadbutton'clicktoupload'Stringlimit属性value限制上传图片的数量,0表示不限制0Numbermax-size属性值允许上传图片的最大尺寸,单位字节nullNumbermultiple属性值允许多选falseBooleancompress属性值是否启用压缩falseBooleanquality属性值压缩质量0.8Numberbefore-read属性读取文件前的钩子函数nullFunction,如果返回值为true,则继续r读取图片,为false则不执行任何操作after-read属性值读取文件后的钩子函数nullFunction,参数为读取后的图片before-remove属性值为移除文件前的钩子函数nullFunction.参数为待预览图片的索引值和图片文件。如果返回值为true,则删除图片,如果为false,则不执行任何操作。图片尺寸超过max-sizenullFunction时触发oversize事件,参数为图片超出尺寸的exceed事件,图片数量超过限制时触发nullFunctionpreview事件。点击图片上的+号,触发预览事件。npmivue-upload-imgsimportVuefrom'vue'importVueUploadImgsfrom'vue-upload-imgs'Vue.use(VueUploadImgs)<模板>

在HTML文件中直接引用