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)};

感谢各位的阅读！关于"vue如何实现上传图片组件"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！