<div class="upload">
<el-upload
:class="{ disabled: fileComputed }"
action="/platform/recognitionController/yyzzRecognition" // 上传地址
list-type="picture-card" // 卡片 类型
:before-upload="beforeUpload" // 上传 检查
:on-remove="handleRemove" // 删除图片
:headers="uploadHeaders" // 自定义请求头
:on-change="changeFile" // 文件 发生 改变
:file-list="fileList" // 文件数组
:on-success="handleAvatarSuccess" // 上传成功
:on-preview="handlePictureCardPreview" // 图片预览
>
<!-- :http-request="UploadImg" -->
<!-- -->
<i class="el-icon-plus"></i>
<!-- <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress> -->
</el-upload>
<el-dialog :title="titleName" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
export default {
components: {
Title // 自定义组件
},
data() {
return {
titleName:'', // 弹层信息
fileList: [], // 图片地址设置为数组
remsgShow: "", // 记录上传id 判断 隐藏或者显示
flieUser: {}, // 储存上传信息
dialogImageUrl: "", // 图片地址
file: "",
uploadHeaders: {
Authorization: sessionStorage.getItem("token")
},
dialogVisible: false // 控制 弹层 显示
};
},
methods: {
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
changeFile(file, fileList) {
this.fileList = fileList.map(item => item);
},
handleRemove(file) {
// 将原来的文件给排除掉了 剩下的就是最新的数组了
this.fileList = this.fileList.filter(item => item.uid !== file.uid);
this.remsgShow = "";
},
handleAvatarSuccess(res,file) {
console.log(file);
if (res.recode == 200) {
this.titleName = res.redata.businessName
this.flieUser = res.redata;
this.remsgShow = res.remsg;
} else {
this.$message.error(res.remsg);
}
console.log(res);
},
beforeUpload(file) {
this.file = file;
console.log(file);
// 文件类型
const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
if (!types.includes(file.type)) {
this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
return false;
}
// 检查大小
const maxSize = 5 * 1024 * 1024;
if (maxSize < file.size) {
this.$message.error("图片大小最大不能超过5M");
return false;
}
// 已经确定当前上传的就是当前的这个file了
this.currentFileUid = file.uid;
return true;
},
// 实现自定义上传
UploadImg() {
// console.log(file.file.name);
const Dates = new FormData();
Dates.append("file", this.file);
console.log(Dates);
// yyzzRecognition(formData).then(res => {
// console.log(res);
// });
}
},
computed: {
// 设定一个计算属性 判断是否已经上传完了一张
fileComputed() {
return this.fileList.length === 1;
}
}
};
/deep/.disabled .el-upload--picture-card {
display: none; // 计算隐藏显示 dom元素 需要 请用
}