<el-upload action="https://***"
:headers="upheaders" :limit="1" list-type="picture-card"
:on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange"
:on-success="handleSuccess" :on-error="handleError" :data="uplistdata"
:file-list="fileList" :class="{hide:uploadDisabled}"
:before-upload="beforeAvatarUpload" ref="upload">
<i class="el-icon-plus"></i> <br>
<span class="teacher_el_upload_btn" @click="submitUpload">点击上传照片</span>
</el-upload>
action:请求地址
headers:请求头
limit:上传图片最大数量
on-preview : 点击文件中已上传的文件执行的方法
on-remove:删除某文件执行的方法
on-change:文件状态改变时,上传成功和失败都会执行
on-success:文件上传成功执行的方法
on-error:文件上传失败时执行的方法
data:需要另外给接口传的别的值
file-list:上传的文件列表
beforeAvatarUpload:文件在上传之前执行的方法(我用来判断文件大小和文件类型)
所有方法⬇
handleChange(file, fileList){
this.uploadDisabled = fileList.length >= 1;
},
submitUpload() {
this.$refs.upload.submit()
},
handleError(err, file, fileList) {
this.$message({
message: '上传失败!',
type: 'success'
});
console.log(err);
},
handleSuccess(response, file, fileList) {
this.fileList[0] = response.result
this.uploadedFile = this.registered_form.idCardImg = response.result.url
},
handleRemove(file, fileList) {
this.fileList = [];
this.uploadedFile = '',
setTimeout(()=>{
this.uploadDisabled = false;
},1000)
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.uploadDisabled = true;
},
//判断是否大于5m
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 5;
const isJPG = file.type === "image/jpeg" || file.type === "image/png"
if (!isLt2M) {
this.$message.warning("上传图片大小不能超过 2M!")
return false
} else if (!isJPG) {
this.$message.warning("上传图片格式只能是jpg或png")
return false
}
return isLt2M;
},
用到的data
uploadedFile: '',
fileList:[],
uploadDisabled:false,
dialogImageUrl: '',
upheaders: {
Authorization: localStorage.getItem('token')
},
css
.el-upload--picture-card{
width:100px;
height:100px;
line-height:20px;
padding-top: 25px;
.teacher_el_upload_btn{
font-size: 10px ;
}
}
.hide .el-upload,.hide .el-upload--picture-card{
display: none;
// background:red;
}
.upload .registered{
text-align: left;
}
.el-upload-list--picture-card .el-upload-list__item{
width:100px;
height:100px;
}