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文章来源:https://www.toymoban.com/news/detail-609151.html
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 >= 1
this.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 运行截图
文章来源地址https://www.toymoban.com/news/detail-609151.html
到了这里,关于实现element ui上传一张图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!