这篇文章给大家分享的是有关vue如何实现上传图片组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
未上传状态
上传状态
其他状态(查看/删除)
自定义组件文件名称 - 这里叫UploadImg.vue
<template> <div> <el-form> <!-- :on-change="uploadFile" --> <el-upload :limit="limit" //最大允许上传个数 action accept="image/*" //接受上传的 :on-change="uploadFile" //文件状态改变时的函数 list-type="picture-card" //文件列表的类型 :auto-upload="false" //是否在选取文件后立即进行上传 :file-list="fileList" //虚拟文件数组 :on-exceed="handleExceed" //文件超出个数限制时的函数 :on-preview="handlePictureCardPreview" //点击文件列表中已上传的文件时的函数 :on-remove="handleRemove" //文件列表移除文件时的函数 ref="upload" class="avatar-uploader" :class="{hide:showUpload}" //用来隐藏到达limit最大值之后 关闭上传按钮 :disabled="disabled" //为查看不能上传进行处理 > <i class="el-icon-plus"></i> </el-upload> //查看图片 <el-dialog width="30%" :visible.sync="dialogVisible"> <img width="100%" :src="imgUrl.url" alt /> </el-dialog> //如果不是需要直接上传的,而是需要按钮点击再进行图片上传请打开此方法 //上面的el-upload标签里on-change换成http-request方法 <!-- <Button text="上 传" type="add_u" @click.native="submitUpload"></Button> --> </el-form> </div></template><script>//引入上传图片接口import { uploadImg } from "@/api/public/api";export default { props: { limit: Number, fileList: Array, disabled: Boolean, }, data() { return { showUpload: false, //控制limit最大值之后 关闭上传按钮 dialogVisible: false, //查看图片弹出框 imgUrl: [], //上传图片后地址合集 }; }, //监听上传图片的数组(为了处理修改时,自动渲染问题,和上传按钮消失问题); watch: { fileList(newName, oldName) { if (newName.length == this.limit) this.showUpload = true; else this.showUpload = false; }, }, methods: { //文件列表移除文件时的函数 handleRemove(file, fileList) { const index = this.fileList.findIndex((item) => item === file.uid); this.imgUrl.splice(index, 1); this.$emit("delUrl", this.imgUrl); if (fileList.length < this.limit) this.showUpload = false; }, //点击文件列表中已上传的文件时的函数 handlePictureCardPreview(file) { this.imgUrl.url = file.url; this.dialogVisible = true; }, //这里是不需要直接上传而是通过按钮上传的方法 submitUpload() { this.$refs.upload.submit(); }, //文件状态改变时的函数(主要逻辑函数) uploadFile(e, fileList) { //判断用户上传最大数量限制,来让上传按钮消失 if (fileList.length >= this.limit) this.showUpload = true; // const file = e.file; <- 这里是不需要直接上传而是通过按钮上传的 const file = e.raw; // <- 这里是直接上传的 //大小 const size = file.size / 1024 / 1024 / 2; if ( !( file.type === "image/png" || file.type === "image/gif" || file.type === "image/jpg" || file.type === "image/jpeg" ) ) { this.$notify.warning({ title: "警告", message: "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片", }); } else if (size > 2) { this.$notify.warning({ title: "警告", message: "图片大小必须小于2M", }); } else { if (this.limit == 1) this.imgUrl = []; //此处判断为一张的时候需要清空数组 const params = new FormData(); params.append("source", file); uploadImg(params).then((res) => { //这里返回的数据结构(根据自己返回结构进行修改) if (res.data.status === 1) { this.$message.success("上传成功"); this.imgUrl = res.data; //调用父组件的方法来传递图片参数 this.$emit("getUrl", this.imgUrl); } else this.$message.error("上传失败"); }); } }, //文件超出个数限制时的函数 handleExceed(files, fileList) { this.$message.info(`最多只允许上传${this.limit}张图片`); }, },};</script>//这里修改上传前后的样式(我觉得el-upload不好看 也可以自行修改)<style scope>.hide .el-upload--picture-card { display: none !important;}.avatar-uploader > .el-upload { width: 200px; height: 200px; line-height: 200px; border-radius: 0px; background: #fff; border: 1px dashed #ccc;}.avatar-uploader > .el-upload > i { font-size: 28px; color: #ccc;}.avatar-uploader > .el-upload-list { display: block;}.avatar-uploader > .el-upload-list > .el-upload-list__item { width: 200px; height: 200px; display: block;}.avatar-uploader > .el-upload-list > .el-upload-list__item > img { width: 200px; height: 200px; border-radius: 0px;}</style>
在页面中使用 - (因为我这边用的地方比较多,我就写全局了,你们可以根据自身项目来决定)
main.js
//图片上传组件import UploadImg from "@/views/common/UploadImg.vue";Vue.component('UploadImg', UploadImg)
demo.vue
<el-form-item label="上传图片"> //limit 最大上传几张图片 //fileList 图片数组 //getUrl 获取上传后地址 //delUrl 删除上传后地址 // disabled 禁用处理 <UploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event,'自己需要携带的参数')" @delUrl="delUrl($event,'自己需要携带的参数')" :disabled="true" /></el-form-item>//变量声明data:{ fileList:[] }//函数getUrl(getUrl){ console.log(getUrl) };delUrl(getUrl){console.log(getUrl)};
感谢各位的阅读!关于“vue如何实现上传图片组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!