You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.2 KiB
105 lines
2.2 KiB
1 year ago
|
<template>
|
||
|
|
<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
|
||
|
|
:show-file-list="false"
|
||
|
|
:on-change="uploadchangeFile"
|
||
|
|
:http-request="uploadSectionFile">
|
||
|
|
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
|
||
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
|
|
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||
|
|
</el-upload>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { imageUpload } from '@/api/Upload.js'
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
tip:{
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
FrontPhoto: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 上传文件 FrontPhoto
|
||
|
|
uploadSectionFile(params) {
|
||
|
|
const file = params.file,
|
||
|
|
fileType = file.type,
|
||
|
|
isImage = fileType.indexOf("image") != -1,
|
||
|
|
isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
|
console.log(params)
|
||
|
|
// 这里常规检验，看项目需求而定
|
||
|
|
if (!isImage) {
|
||
|
|
this.$message.error("只能上传图片格式png、jpg、gif!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error("只能上传图片大小小于2M");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// 根据后台需求数据格式
|
||
|
|
const form = new FormData();
|
||
|
|
console.log(form)
|
||
|
|
// 文件对象
|
||
|
|
form.append("file", file);
|
||
|
|
|
||
|
|
// 项目封装的请求方法，下面做简单介绍
|
||
|
|
imageUpload(form).then(res => {
|
||
|
|
//自行处理各种情况
|
||
|
|
console.log(res)
|
||
|
|
this.$emit('imgUrl',res.filePath)
|
||
|
|
// this.FrontPhoto = res.fullUrl
|
||
|
|
if(res.msg == '操作成功'){
|
||
|
|
this.$message({
|
||
|
|
message: '上传成功！',
|
||
|
|
type: 'success'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log(err)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
uploadchangeFile(file){
|
||
|
|
this.FrontPhoto = URL.createObjectURL(file.raw)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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: 200px;
|
||
|
|
height: 178px;
|
||
|
|
line-height: 178px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
width: 178px;
|
||
|
|
height: 178px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.el-upload__tip{
|
||
|
|
line-height: 25px;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
</style>
|