index.vue
4.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-upload
ref="upload"
action=""
accept=".jpg,.jpeg,.png,.gif,.jfif,.pjpeg,.pjp"
:on-change="fileChange"
:auto-upload="false"
:show-file-list="false"
multiple
:file-list="file">
<el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
</el-upload>
</el-col>
<el-col :span="1.5">
<el-button size="small" type="primary" @click="file=[]">删除附件</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="small" type="primary" @click="submitForm">提交</el-button>
</el-col>
</el-row>
<el-image v-if="file.length!=0" style=""
:src="createUrl(file[0])"
:preview-src-list="[createUrl(file[0])]"
:z-index="999">
</el-image>
</div>
</template>
<script>
import {addIncorruptData, listIncorruptData} from "@/api/other/incorruptData";
export default {
name: "incorruptGovernment",
data() {
return {
file: [],
};
},
created() {
this.getList();
},
methods: {
/** 查询文件资料列表 */
getList() {
this.loading = true;
listIncorruptData("government").then(response => {
this.file = [{
url:response[0].filePath,
name:response[0].fileName,
}];
});
},
delFile(){
this.file=[];
},
/** 提交按钮 */
submitForm() {
let formData = new FormData();
let form = {
files: null,
tableName: "government",
};
this.file.forEach(item => {
if (item.raw != null) {
formData.append('files', item.raw)
} else {
//将原有的附件拼接到form中
form.files = form.files !== null ? form.files + ";" + item.url : item.url;
}
})
for (let key in form) {
formData.append(key, form[key] == null ? "" : form[key])
}
addIncorruptData(formData).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
},
/**
* 文件改变时,限制文件上传格式和大小
* 文件格式只能为docx/doc/pdf/png/jpeg/png/jpg
* 大小不超过20M
* */
fileChange(file, fileList) {
let count = 0;
if(fileList.length>1){
this.$message({
message: '只能上传一张图片！',
type: 'warning'
});
return false;
}
for (let i = 0; i < fileList.length; i++) {
// console.log(fileList.length)
// console.log(this.fileEntityList[i].name+"111"+file.name)
if (fileList[i].name == file.name) {
count++;
if (count == 2) {
this.$message({
message: '已存在此文件！',
type: 'warning'
});
for (let j = fileList.length; j > 0; j--) {
//如果存在此文件，去除新选择的重复文件
if (fileList[j - 1].name == file.name) {
fileList.splice(j - 1, 1);
i--;
return false;
}
}
}
}
}
let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
//格式符合后判断大小
if ("jpg,jpeg,png,gif,jfif,pjpeg,pjp".indexOf(fileType) != -1) {
let max5M = file.size / 1024 / 1024 < 100;
if (!max5M) {
this.$message({
message: '上传文件大小不得超过100M！',
type: 'warning'
});
fileList = fileList.splice(fileList.length - 1, 1);
} else {
//符合条件后进行添加
this.file = fileList
}
} else {
this.$message({
message: '上传文件只能是 jpg,jpeg,png,gif,jfif,pjpeg,pjp格式!',
type: 'warning'
});
fileList = fileList.splice(fileList.length - 1, 1);
}
},
createUrl(file) {
if (file.raw != null) {
return URL.createObjectURL(file.raw);
} else {
return process.env.VUE_APP_BASE_API + file.url;
}
},
}
};
</script>