Shulou(Shulou.com)06/02 Report--

This article is to share with you about how vue implements the component of uploading pictures. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Unuploaded status

Upload statu

Other status (View / Delete)

Custom component file name-here it's called UploadImg.vue

/ / View the picture

/ / if you do not need to upload directly, but need to click the button to upload the image, please open this method / / change on-change to http-request method in the el-upload tag above / / introduce the upload image interface import {uploadImg} from "@ / api/public/api". Export default {props: {limit: Number, fileList: Array, disabled: Boolean,}, data () {return {showUpload: false, / / after controlling the maximum value of limit, close the upload button dialogVisible: false, / / View picture pop-up box imgUrl: [], / / address collection after uploading pictures} }, / / listen to the array of uploaded pictures (to deal with the problem of automatic rendering during modification, and the disappearance of the upload button); watch: {fileList (newName, oldName) {if (newName.length = = this.limit) this.showUpload = true; else this.showUpload = false },}, methods: {/ / the function handleRemove (file, fileList) {const index = this.fileList.findIndex ((item) = > item = file.uid) when the file list is removed; 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; {/ / the data structure returned here (modified according to the structure returned by yourself) if (res.data.status = 1) {this.$message.success ("upload successful"); this.imgUrl = res.data / / call the method of the parent component to pass the image parameter this.$emit ("getUrl", this.imgUrl);} else this.$message.error ("upload failed");}) }}, / / the function handleExceed (files, fileList) {this.$message.info (`upload a maximum of ${this.limit} pictures `) when the number of files exceeds the limit;},},}; / / modify the style before and after upload (I think el-upload is not good-looking and you can modify it by yourself). 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;}

Use it on the page-(because I use more space here, I will write the overall situation, you can decide according to your own project)

Main.js

/ / Image upload component import UploadImg from "@ / views/common/UploadImg.vue"; Vue.component ('UploadImg', UploadImg)

Demo.vue

/ / limit upload maximum number of pictures / / fileList image array / / getUrl obtain post-upload address / / delUrl delete post-upload address / / disabled disable processing / / variable declaration data: {fileList: []} / / function getUrl (getUrl) {console.log (getUrl)}; delUrl (getUrl) {console.log (getUrl)}; Thank you for reading! This is the end of this article on "how to upload pictures in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.