vue封装组件之上传图片组件

本文实例为大家分享了vue上传图片组件的封装具体代码，供大家参考，具体内容如下

未上传状态

上传状态

其他状态(查看/删除)

自定义组件文件名称 - 这里叫UploadImg.vue

//这里修改上传前后的样式(我觉得el-upload不好看 也可以自行修改)

在页面中使用 - (因为我这边用的地方比较多,我就写全局了,你们可以根据自身项目来决定)

main.js

//图片上传组件
import UploadImg from "@/views/common/UploadImg.vue";
Vue.component('UploadImg', UploadImg)

demo.vue

 //limit 最大上传几张图片  //fileList 图片数组   //getUrl 获取上传后地址 //delUrl 删除上传后地址  // disabled 禁用处理
  


//变量声明
data:{
 fileList:[]
 }
//函数
getUrl(getUrl){
 console.log(getUrl)
 };
delUrl(getUrl){
console.log(getUrl)
};

希望此文章能帮助到你!!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。