[JavaScript知识库]封装elemen t-ui 上传组件支持回显编辑删除编辑提示信息大图预览

使用方法

下载组件
链接：https://pan.baidu.com/s/1fz7_J_YdI4PmAsIIKSjWoA 
提取码：jukv
把文件下文件放在跟根目录components
1.main.js引入引入组件,全局注册(只需要注册这一个就行了)
import MyupData from "@/components/supload/upload.vue";
Vue.component("MyupData", MyupData); //注册组件`

2.代码内使用

html
   <myup-data
         :action='action'//上传图片地址(必填)
          :limit="5"//最大上传数量,达到最大值隐藏上传按钮,默认值1
          @onsuccess="onsuccessTWO"//上传成功或则删除后文件列表回调
           :viewer='true' //是否需要大图预览 (默认true)
          ref="childTWO"//父组件触发子组件方式,此方法只要用来回显图
          :multiple="true"//是否支持多选,默认false
          title="可上传3-5张,为了更好展示效果,建议图片大小300×250px"//轮播图底部提示,具体看下,默认空
        />
js
          //文件上传和删除后回调 filelist是自定义图片数组,filelist文件格式为[{url:地址}]
          onsuccessTWO(item) {this.filelist= item },
          //照片回显
          this.$refs.childTWO.sing(this.filelist) 注意:filelist文件格式为[{url:地址}]

效果展示在这里