1.1 Functional description
Previous project requirements would use el-upload in the element ui component to upload a picture. Because only one picture can exist in the interface, after a picture is successfully uploaded, the upload button needs to be hidden.
2.1 Main test points
2.1.1 Using components
el-upload upload of elment-ui component
2.2.1 Basic idea
Let’s describe the uploading process in detail:
① Before uploading, first write the upload interface address and enter the action. If you need to request header authentication, use headers.
②When uploading, limit will limit the maximum number of files uploaded each time, and on-success will capture the image url address returned by the upload interface address, and the front end will save it.
③After uploading, use the dynamic class style to hide the upload button
④Delete, on-remove is used to clear the image url previously saved in the front end, and at the same time display the upload button back through the dynamic class style. Step ① can be performed again.
Then we look at the uploaded pictures by el-upload, and we need to know the specific attributes under the component ( the description of the upload component of elment-ui ). The parameters used in this upload are as follows:
- :limit : The maximum number of files allowed to be uploaded (only one image can be selected for each upload).
- :on-exceed : The hook function to be executed when the number of uploaded files exceeds the limit (a function that will be executed when one image is uploaded by multiple operations)
- :class : dynamic class style (used to control the upload button after uploading a picture successfully)
- :action : Used to store the interface for uploading pictures provided by the backend (generally speaking, the backend will provide an interface for uploading pictures. When the picture data is transmitted to the backend, the backend will give the frontend the cloud storage address of the picture)
- :file-list : list of uploaded files, in array form (when uploading a picture, the picture will be stored under the list defined by this attribute)
- :headers : Set the request header when uploading, object form (when uploading the interface, you need to put token authorization information into the request header, write the request header here)
- list-type : the type of file list
- :on-success : The function executed when the image is uploaded successfully (used to capture the cloud storage address of the image returned by the backend, so that this url address can be uploaded to the backend when submitting the form later)
- :on-remove : Hook for removing files from the file list (when the uploaded image event is deleted, the previously captured url image address will be cleared)
3.1 The pit you stepped on
- Question 1: How to use the dynamic class style to show and hide the upload button?
- Answer 1: The noneBtnDealImg variable is used for judgment
:class="noneBtnDealImg ? 'disUoloadSty':''"
Write a variable in data, noneBtnDealImg is true or false to control whether el-upload exists disUoloadSty class name
Write the depth selector in css, when there is a class name disUoloadSty, hide the upload button.
/deep/ .disUoloadSty .el-upload--picture-card{
display:none; /* 上传按钮隐藏 */
}
The entry point is that it is hidden when the upload is successful and displayed when it is deleted. Then:
①In on-success, write to judge whether the length of the file-list file list is one.
When it is 1, noneBtnDealImg is set to true. At this time, el-upload has the class name disUoloadSty, and executes the hidden button style in csss.
②In on-remove, write to determine whether the length of the file-list file list is one.
When it is not 1, noneBtnDealImg is set to false. At this time, el-upload does not have the disUoloadSty class name, and the hidden button style in csss will not be executed.
- Question 2: How to put the :headr in el-upload into the request header object?
- Answer 2: A variable can be defined in the :header, and this variable can be set in the data, and the object of the request header can be set in the data.
4.1 Corresponding framework or language
Language: html, js, css
Framework: elemnet-ui, vue 2.0
5.1 Related codes
<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 Run screenshot
