1.1 功能描述

之前项目需求会使用element ui组件中的el-upload上传一张图片。因为界面只能存在一张图片，所以上传一张图片成功之后，需要隐藏上传按钮。

2.1 主要考点

2.1.1 运用组件

elment-ui组件的el-upload上传

2.2.1 基本思路

先具体叙述一下上传流程：
①上传前，先书写好上传接口地址进action，需要请求头认证的话，使用headers。
②上传时，limit会限制每次上传的最大文件数，on-success来捕获上传接口地址返回的图片url地址，前端进行保存。
③上传后，通过动态类样式，隐藏上传按钮
④删除，on-remove用来把之前保存进前端的图片url清空，同时通过动态类样式，把上传按钮显示回来。可以再进行第①步的操作。

接着我们查看一下el-upload上传图片，就需要了解一下该组件下的具体属性（elment-ui的upload组件说明），本次上传会使用到的参数如下：

:limit ：允许上传的最大文件数（限制每次上传只能选择1张图片）。
:on-exceed ：当文件上传超出数量时，执行的钩子函数（当多次操作上传1张图片，会执行的函数）
:class ：动态类样式（用来控制上传一张图片成功之后，隐藏上传按钮）
:action ：用来存放后端提供的上传图片的接口（一般来说，后端会提供一个上传图片接口，当图片数据传给后端，后端会给前端该图片的云存储地址）
:file-list ：上传的文件列表，数组形式（当上传图片时，会把图片存放在该属性所定义的列表之下）
:headers ：设置上传时的请求头，对象形式（当上传接口，需要放入token授权信息进请求头，在这边写入请求头）
list-type ：文件列表的类型
:on-success ：当图片上传成功时所执行的函数（用来捕获后端返回的图片云存储地址，以便之后提交表单时，可以把此url地址上传给后端）
:on-remove ：文件列表移除文件时的钩子（当进行删除已上传的图片事件，清空之前所捕获url图片地址）

3.1 踩到的坑

问题1：怎么使用动态类样式，把上传按钮，显示与隐藏呢？
回答1：使用的是noneBtnDealImg变量来进行判断

:class="noneBtnDealImg ? 'disUoloadSty':''"

在data中书写一个变量，noneBtnDealImg的真假来控制el-upload是否存在disUoloadSty类名

在css中书写深度选择器，当存在类名disUoloadSty，把上传按钮隐藏。

/deep/ .disUoloadSty .el-upload--picture-card{display:none;   /* 上传按钮隐藏 */
}

切入点在于，上传成功时隐藏，删除时显示。那么就：
①在on-success中，书写判断file-list文件列表长度是否为一。
为1时，noneBtnDealImg就置真，此时，el-upload存在disUoloadSty类名，执行csss中的隐藏按钮样式。

②在on-remove中，书写判断file-list文件列表长度是否为一。
不为1时，noneBtnDealImg就置假，此时，el-upload不存在disUoloadSty类名，不会执行csss中的隐藏按钮样式。

问题2：el-upload中的:headr怎么放入请求头对象？
回答2：:header中可以定义一个变量，此变量可以在data中，在data中进行请求头的对象设置。

4.1 相应框架或语言

语言：html,js,css
框架：elemnet-ui,vue 2.0

5.1 相关代码

<template><div class="stylebg"><h3>背景宣传图</h3><el-upload:limit="1":on-exceed="(files, fileList)=>handleExceed(files, fileList, 1)"class="avatar-uploader":class="noneBtnDealImg ? 'disUoloadSty':''":action="uploadfileurl":file-list="fileList":headers="headerObj"style="padding:30px 0 ;"list-type="picture-card":on-success="(res, file, fileList)=>handleAvatarSuccess(res, file, fileList,'img')"name="image":on-remove="(file,fileList)=>handleRemove(file,fileList,'img')"><i class="el-icon-plus" ></i></el-upload><el-button @click="toUpDate" type="primary">提 交</el-button></div>
</template><script>
import {getBGAPI,setBGAPI} from "@/api/homePageManage.js"
export default {data(){return{fileList:[],headerObj: {authorization: localStorage.getItem('token')},img:'',noneBtnDealImg:false,uploadfileurl:this.uploadFileURL,}},created(){this.getBG()},methods:{handleExceed(files, fileList, num) {this.$message.warning(`当前限制选择 ${num} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},// 图片上传handleAvatarSuccess(res,file,fileList,name) {this.img = res.data.path2[0]this.noneBtnDealImg = fileList.length >= 1},//图片删除handleRemove(file,fileList,name) {this.img = ''this.noneBtnDealImg = fileList.length >= 1},//获取背景宣传图getBG(){this.fileList = []getBGAPI().then(res => {console.log(res.img)this.fileList.push({'url':res.img})this.noneBtnDealImg = this.fileList.length >= 1this.img = res.img})},//提交背景宣传图toUpDate(){setBGAPI({img: this.img}).then(res => {this.$message.success('设置成功')this.getBG()})}}
}
</script><style lang="less" scoped>/deep/ .crsBanner {.el-form-item__label::after {content: '(最多1张)';display: block;font-size: 12px;color: #999;line-height: 12px;}}/deep/ .allUpload {.el-form-item__content{// flex: none !important;display: flex;}}/deep/ .el-upload-list__item{transition: none !important
}/deep/ .disUoloadSty .el-upload--picture-card{display:none;   /* 上传按钮隐藏 */
}/deep/ .el-upload-list__item{width:300px;height:300px;
}</style>

6.1 运行截图

实现element ui上传一张图片相关推荐

Element UI 上传一张图片后隐藏上传按钮
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始化: hideUpload: false, limitCoun ...
Element UI 上传组件实现文件上传并附带额外参数
1. 需求在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,效果如下图: 在上传指定 ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
vue+element上传多张图片和图片展示
前端: 文件上传使用el-upload <el-upload:http-request="uploadProductPic"accept="image/*" ...
okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
vue实现星级评价及上传多张图片等功能（类似淘宝商品评价页面）
最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页点击看大图,且可左右滑动功能需求分析默认为5颗星,为非常满意,4颗满意 ...
微信小程序实现上传多张图片，删除图片
最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图效果图: 本来用的是小程序提供的 mp-uploader 上传图片的组件,无奈次组件删除效果不是我 ...
高手教你PHP上传多张图片
高手教你PHP上传多张图片对于我们来说上传一张图片是非常简单的事情,这里教大家一个关于PHP上传多张图片的代码分析,希望对大家有帮助. 学习PHP时,你可能会遇到PHP上传多张图片问题,这里将介绍P ...
ajax请求多张图片数据库,ajax上传多文件，一次上传多张图片
ajax上传多文件,一次上传多张图片作者:PHPYuan 时间:2018-11-04 03:41:44 使用ajax上传文件,指望这个对象:let fd = new FormData(); html ...

实现element ui上传一张图片