elementUI的Upload的手动上传及限制数量后隐藏上传样式

<template><div><el-uploadclass="upload-demo"ref="upload":limit="limitNum" //最大允许上传个数:class="{hide:hideUploadEdit}" //加类名为了隐藏上传样式:on-remove="handleRemove" //文件列表移除文件时的钩子:on-change="handleEditChange" //文件状态改变时的钩子(可以限制文件数量和文件大小):http-request="ImgUploadSectionFile" //覆盖默认的上传行为，实现手动上传:before-upload="beforeAvatarUpload" //上传文件之前的钩子:with-credentials="true" //支持发送 cookie 凭证信息:auto-upload="true" //是否在选取文件后立即进行上传(不知什么原因false没效果)accept=".png, .jpg" //接受上传的文件类型action="" //手动上传不需要填写urllist-type="picture-card" //设置文件列表的样式:file-list="fileList" //上传的文件列表><i slot="trigger" class="el-icon-plus"></i><!-- <el-button slot="trigger" type="primary">选取图片</el-button> --></el-upload><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button></div>
</template><script>
import axios from "axios";
export default {data() {return {hideUploadEdit: false, // 隐藏'上传按钮'limitNum: 1, // 图片数量fileList: [] // 图片列表};},methods: {// on-change添加文件、上传成功和上传失败时都会被调用handleEditChange(file, fileList) {this.hideUploadEdit = fileList.length >= this.limitNum;console.log("this.fileList:", this.fileList);console.log("this.hideUploadEdit:", this.hideUploadEdit);},// on-remove文件列表移除文件时的钩子handleRemove(file, fileList) {if (fileList.length === 0) {this.fileList = [];} else {let dl = this.fileList.indexOf(file);this.fileList.splice(dl, 1);}this.hideUploadEdit = fileList.length >= this.limitNum;},// 上传到服务器submitUpload() {console.log(this.param);if (!this.param) {this.$message("请选择图片");} else {let formData = new FormData(); //formdata格式formData.append("fileName", this.param.file);axios({method: "post",url: '', //这里填写上传图片的接口,data: {} //这里可以填写上传时携带的数据,不需要可以不写}).then(result => {console.log("上传成功:", result);}).catch(err => {console.log(err);});}},// before-upload上传文件之前的钩子 -- 限制文件大小beforeAvatarUpload(file) {const isJPG = file.type === "image/jpeg" || file.type === "image/png";const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error("上传图片只能是 JPG 或 PNG 格式!");}if (!isLt2M) {this.$message.error("上传图片大小不能超过 2MB!");}return isJPG && isLt2M;},// http-request自定义上传ImgUploadSectionFile(param) {this.param = param;//   //下面代码放在这里的作用是:选中图片后立即上传,但我需要选中图片后再点击按钮上传,所以移到按钮的点击事件里//   let formData = new FormData(); //formdata格式//   console.log('param.file:  ',param.file)//   console.log('param:  ',param.file)//   formData.append("fileName", param.file);//   formData.append("userid", '15832919197225');//   formData.append("uuid", '7658798679');//   axios({//       method:'post',//       url:'http://139.155.91.117:8082/base/gps/fileUpload',//       data:formData//   }).then(result=>{//       console.log('上传成功:',result)//   }).catch(err=>{//       console.log(err)//   })}}
};
</script>
<style lang='less'>
// 隐藏上传按钮
.hide .el-upload--picture-card {display: none;
}
// 添加/删除文件时去掉动画过渡
.el-upload-list__item {transition: none !important;
}
</style>

elementUI的Upload的手动上传及限制数量后隐藏上传样式相关推荐

element el-upload上传图片完成后隐藏上传
这里就直接上代码了,亲测可以. 这里只弄了上传一张照片后隐藏上传按钮,如需上传多张,自行修改limit属性即可. <template><el-card class="car ...
element ui 图片控件排序_Element-ui上传图片后隐藏上存控件
在使用Element-ui el-upload组件的时候,发现我只想上存一张图片,比如头像的上存,然而上存一张后,控件还可以继续上存. 一下的方法是Element-ui上传图片后隐藏上存控件. 在el ...
解决手机连上笔记本wifi几分钟后就上不了网
我的电脑是win10,不过修改地方大致应该差不多具体情况:一开始使用猎豹开启wifi,总是连上两三分钟后就上不了网了,但是还是连着的,猜想要不就是驱动有问题(后来升级了还是不行),要不就是如下方法修 ...
Element UI 上传一张图片后隐藏上传按钮
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始化: hideUpload: false, limitCoun ...
使用element-ui的upload组件上传代码包时遇到的问题及总结
1.在工作中使用element-ui的upload组件时,遇到一个问题就是这个upload会自动发送一个http请求,即使你使用了http-request自定义上传覆盖默认上传函数,也会导致在控制台里 ...
阿里云OSS 服务端签名后直传之分片上传（结合element-ui的upload组件）
分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){let data = await this.getOssToken(); // ...
关于element-ui的upload文件上传组件的使用技巧总结
关于element-ui的upload文件上传组件的技巧总结简单说几点: uploader组件使用中的几个常见问题和解答 upload文件类型.大小的筛选: 多文件上传的配置: 3.文件列表的相关操 ...
antd upload手动上传_基于MVVCTP5的文件上传
现如今在市面上常见的web开发理念一般是两种,一种是MVC格式的,比较传统,而项目较大的开发,一般由团队完成,而MVC格式就显得有些不够合理 .于是 ,在这种情况下诞生了另外一种开发理念,我们叫MVV ...
基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
element-ui upload 上传组件附带额外参数进行上传（表单形式，多个参数）
之前一直使用upload组件单个上传文件,最近遇到需要上传表单字段,表单中有多个参数下图是接口要求: 官网上传组件中提供了响应的功能实现,但是demo中未演示,不注意看文档参数的话,可能会不知道这个 ...

elementUI的Upload的手动上传及限制数量后隐藏上传样式

elementUI的Upload的手动上传及限制数量后隐藏上传样式相关推荐

最新文章

热门文章