作者 小范

出勤车辆新增上传图片功能(未完善)

... ... @@ -47,9 +47,10 @@
<el-table-column
fixed="right"
label="操作"
width="120">
width="220">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
<el-button type="success" @click="centerDialogVisible = true">图片上传</el-button>
</template>
</el-table-column>
</el-table>
... ... @@ -65,6 +66,31 @@
:total="total">
</el-pagination>
</el-row>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<div>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-input v-model="description" placeholder="请输入图片描述"></el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</el-card>
</el-row>
</template>
... ... @@ -75,18 +101,39 @@
export default {
data() {
return {
centerDialogVisible: false,
queryInfo: {
lisenceNo:'',
lisenceNo: '',
// 当前页数
pageNum: 1,
// 每页几条数据
pageSize: 10,
},
total: 0,
tableData:[],
tableData: [],
formInline: {
user: '',
},
imageUrl: '',
description:''
}
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleSizeChange(val) {
this.queryInfo.pageSize = val
this.getList()
... ... @@ -133,10 +180,35 @@
})
},
},
mounted() {
this.getList();
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
... ...