关于vue项目中文件上传，复现，模版下载常见用法（el-upload）
最新在做一个页面，涉及到文件上传及文件回显，界面如下：
直接上文件代码，这里算是较为全面的文件上传了
1 <template>2 <div class="information-wrapper">
3 <div class="content">
4 <el-form
5 ref="informationForm"
6 :model="ruleForm"
7 :rules="rules"
8 :inline="true"
9 class="information-form"
10 label-width="110px"
11 size="mini"
12 >
13 <div class="base-info">
14 <div class="title">基本信息</div>
15 </div>
16 <div class="base-content">
17 <el-row :gutter="20">
18 <el-col :span="6">
19 <el-form-item label="发起机制" prop="machine">
20 <el-input
21 :disabled="true"
22 v-model="ruleForm.machine"
23 placeholder="请填写发起机制"
24 ></el-input>
25 </el-form-item>
26 </el-col>
27 <el-col :span="6">
28 <el-form-item label="需求发起方" prop="initiator">
29 <el-input
30 :disabled="true"
31 v-model="ruleForm.initiator"
32 placeholder="请填写需求发起方"
33 ></el-input>
34 </el-form-item>
35 </el-col>
36 <el-col :span="6">
37 <el-form-item label="需求名称" prop="name">
38 <el-input
39 :disabled="disableForm"
40 :clearable="true"
41 v-model="ruleForm.name"
42 placeholder="请填写需求名称"
43 ></el-input>
44 </el-form-item>
45 </el-col>
46 <el-col :span="6">
47 <el-form-item label="需求类别" prop="type">
48 <el-select
49 :disabled="disableForm"
50 v-model="ruleForm.type"
51 placeholder="请选择需求类别"
52 >
53 <el-option
54 v-for="type in typeList"
55 :key="type.id"
56 :label="type.name"
57 :value="type.id"
58 >{{ type.name }}
59 </el-option>
60 </el-select>
61 </el-form-item>
62 </el-col>
63 </el-row>
64 <el-row :gutter="20">
65 <el-col :span="6">
66 <el-form-item label="需求业务领域" prop="appArea">
67 <el-select
68 :disabled="disableForm"
69 v-model="ruleForm.appArea"
70 placeholder="请选择需求业务领域"
71 >
72 <el-option
73 v-for="type in businessList"
74 :key="type.id"
75 :label="type.name"
76 :value="type.id"
77 ></el-option>
78 </el-select>
79 </el-form-item>
80 </el-col>
81 <el-col :span="6">
82 <el-form-item label="需求周期" prop="period">
83 <el-input
84 :disabled="disableForm"
85 :clearable="true"
86 v-model="ruleForm.period"
87 placeholder="请填写需求周期"
88 ></el-input>
89 </el-form-item>
90 </el-col>
91 <el-col :span="6">
92 <el-form-item label="交付时间" prop="deliveryTime">
93 <el-date-picker
94 :disabled="disableForm"
95 v-model="ruleForm.deliveryTime"
96 type="datetime"
97 value-format="yyyy-MM-dd HH:mm:ss"
98 placeholder="选择日期"
99 >
100 </el-date-picker>
101 </el-form-item>
102 </el-col>
103 </el-row>
104 <el-row :gutter="10">
105 <el-col :span="12">
106 <el-form-item
107 class="demand-desc"
108 label="需求描述"
109 prop="demandDesc"
110 >
111 <el-input
112 type="textarea"
113 class="demand-desc"
114 :disabled="disableForm"
115 :clearable="true"
116 :rows="5"
117 resize="none"
118 v-model="ruleForm.demandDesc"
119 placeholder="请填写需求描述"
120 ></el-input>
121 </el-form-item>
122 </el-col>
123 </el-row>
124 </div>
125 <div class="source-info">
126 <div class="title">资源要素</div>
127 </div>
128 <el-row :gutter="20">
129 <el-col :span="24">
130 <el-form-item label="示范场站" prop="factorsSub">
131 <el-input
132 :disabled="disableForm"
133 :clearable="true"
134 v-model="ruleForm.factorsSub"
135 placeholder="请填写示范场站"
136 ></el-input>
137 </el-form-item>
138 </el-col>
139 </el-row>
140 <el-row :gutter="20">
141 <el-col :span="24">
142 <el-form-item
143 v-if="!disableForm"
144 class="upload-down-btn"
145 label="基础数据"
146 prop="factorsData"
147 >
148 <el-upload
149 ref="factorsData"
150 :file-list="ruleForm.factorsData"
151 multiple
152 :action="importFileUrl"
153 :on-success="fileSuccess.bind(this, 'factorsData')"
154 :on-error="handleError"
155 :on-remove="fileRemove.bind(this, 'factorsData')"
156 >
157 <el-button size="mini" round type="primary">点击上传</el-button>
158 <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件</div> -->
159 </el-upload>
160 <el-button
161 @click="downloadTemplateFile('demandFactorsData.xlsx')"
162 class="down-btn"
163 size="mini"
164 round
165 type="info"
166 >模版下载</el-button
167 >
168 </el-form-item>
169 <el-form-item v-else label="基础数据">
170 <div
171 v-for="item in ruleForm.factorsData"
172 :key="item.url"
173 :gutter="10"
174 class="down-file-list"
175 >
176 <el-button
177 size="mini"
178 round
179 type="primary"
180 @click="downloadFile(item.url)"
181 >下载</el-button
182 >
183 <span class="down-file-name">{{ item.name }}</span>
184 </div>
185 </el-form-item>
186 </el-col>
187 </el-row>
188 <el-row :gutter="20">
189 <el-col :span="24">
190 <el-form-item
191 v-if="!disableForm"
192 class="upload-down-btn"
193 label="部署资源"
194 prop="factorsParts"
195 >
196 <el-upload
197 ref="factorsParts"
198 :file-list="ruleForm.factorsParts"
199 multiple
200 :action="importFileUrl"
201 :on-success="fileSuccess.bind(this, 'factorsParts')"
202 :on-error="handleError"
203 :on-remove="fileRemove.bind(this, 'factorsParts')"
204 >
205 <el-button size="mini" round type="primary">点击上传</el-button>
206 <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件</div> -->
207 </el-upload>
208 <el-button
209 @click="downloadTemplateFile('demandFactorsParts.xlsx')"
210 class="down-btn"
211 size="mini"
212 round
213 type="info"
214 >模版下载</el-button
215 >
216 </el-form-item>
217 <el-form-item v-else label="部署资源">
218 <div
219 v-for="item in ruleForm.factorsParts"
220 :key="item.url"
221 :gutter="10"
222 class="down-file-list"
223 >
224 <el-button
225 size="mini"
226 round
227 type="primary"
228 @click="downloadFile(item.url)"
229 >下载</el-button
230 >
231 <span class="down-file-name">{{ item.name }}</span>
232 </div>
233 </el-form-item>
234 </el-col>
235 </el-row>
236 <div class="source-info">
237 <div class="title">需求资料</div>
238 </div>
239 <el-row :gutter="20">
240 <el-col :span="24">
241 <el-form-item
242 v-if="!disableForm"
243 class="upload-down-btn"
244 label="需求说明书"
245 prop="specificationFile"
246 >
247 <el-upload
248 ref="specificationFile"
249 :file-list="ruleForm.specificationFile"
250 multiple
251 :action="importFileUrl"
252 :on-success="fileSuccess.bind(this, 'specificationFile')"
253 :on-error="handleError"
254 :on-remove="fileRemove.bind(this, 'specificationFile')"
255 >
256 <el-button size="mini" round type="primary">点击上传</el-button>
257 </el-upload>
258 <el-button
259 @click="downloadTemplateFile('demandSpecificationFile.docx')"
260 class="down-btn"
261 size="mini"
262 round
263 type="info"
264 >模版下载</el-button
265 >
266 </el-form-item>
267 <el-form-item v-else label="需求说明书">
268 <div
269 v-for="item in ruleForm.specificationFile"
270 :key="item.url"
271 :gutter="10"
272 class="down-file-list"
273 >
274 <el-button
275 size="mini"
276 round
277 type="primary"
278 @click="downloadFile(item.url)"
279 >下载</el-button
280 >
281 <span class="down-file-name">{{ item.name }}</span>
282 </div>
283 </el-form-item>
284 </el-col>
285 </el-row>
286 <el-row :gutter="20">
287 <el-col :span="24">
288 <el-form-item
289 v-if="!disableForm"
290 class="upload-down-btn"
291 label="其他说明文件"
292 prop="otherFile"
293 >
294 <el-upload
295 ref="otherFile"
296 :file-list="ruleForm.otherFile"
297 multiple
298 :action="importFileUrl"
299 :on-success="fileSuccess.bind(this, 'otherFile')"
300 :on-error="handleError"
301 :on-remove="fileRemove.bind(this, 'otherFile')"
302 >
303 <el-button size="mini" round type="primary">点击上传</el-button>
304 </el-upload>
305 <el-button
306 @click="downloadTemplateFile('demandOtherFile.docx')"
307 class="down-btn"
308 size="mini"
309 round
310 type="info"
311 >模版下载</el-button
312 >
313 </el-form-item>
314 <el-form-item v-else label="其他说明文件">
315 <div
316 v-for="item in ruleForm.otherFile"
317 :key="item.url"
318 :gutter="10"
319 class="down-file-list"
320 >
321 <el-button
322 size="mini"
323 round
324 type="primary"
325 @click="downloadFile(item.url)"
326 >下载</el-button
327 >
328 <span class="down-file-name">{{ item.name }}</span>
329 </div>
330 </el-form-item>
331 </el-col>
332 </el-row>
333 </el-form>
334 </div>
335 <div class="footer" v-if="!disableForm">
336 <el-button type="primary" size="mini" round @click="changeSteps"
337 >上一步</el-button
338 >
339 <!-- <el-button
340 type="primary"
341 size="mini"
342 round
343 @click="saveSubmitFile(0)"
344 >保存</el-button
345 > -->
346 <el-button type="primary" size="mini" round @click="saveSubmitFile(1)"
347 >提交</el-button
348 >
349 </div>
350 </div>
351 </template>
352
353 <script>
354 import {
355 addCommDemandMessage,
356 getCommDemandMessageByCode,
357 } from "@/api/community/commDemandMessage";
358 import { getDicts } from "@/api/system/dict/data";
359 export default {
360 name: "DemandInformation",
361 props: {
362 machine: {
363 type: String,
364 default: "",
365 },
366 },
367 data() {
368 return {
369 disableForm: this.$route.query.auditStatus === "1",
370 typeList: [],
371 businessList: [],
372 importFileUrl: `${process.env.VUE_APP_PROTAL_API}/community/commupload/upload`,
373 ruleForm: {
374 auditStatus: 0,
375 machine: this.machine,
376 initiator: sessionStorage.getItem("firmName"),
377 createBy: sessionStorage.getItem("username"),
378 name: "",
379 type: "",
380 appArea: "",
381 demandDesc: "",
382 period: "",
383 deliveryTime: "",
384 factorsSub: "",
385 factorsData: [],
386 factorsParts: [],
387 specificationFile: [],
388 otherFile: [],
389 },
390 rules: {
391 machine: [
392 { required: true, message: "请填写发起机制", trigger: "blur" },
393 ],
394 initiator: [
395 { required: true, message: "请填写需求发起方", trigger: "blur" },
396 ],
397 name: [{ required: true, message: "请填写需求名称", trigger: "blur" }],
398 type: [
399 { required: true, message: "请选择需求类别", trigger: "change" },
400 ],
401 appArea: [
402 { required: true, message: "请选择需求业务领域", trigger: "change" },
403 ],
404 demandDesc: [
405 { required: true, message: "请填写需求描述", trigger: "blur" },
406 ],
407 period: [
408 { required: true, message: "请填写需求周期", trigger: "blur" },
409 ],
410 deliveryTime: [
411 { required: true, message: "请填写交付时间", trigger: "blur" },
412 ],
413 factorsSub: [
414 { required: true, message: "请填写示范场站", trigger: "blur" },
415 ],
416 },
417 };
418 },
419 mounted() {
420 this.getTypeList();
421 this.getBusinessList();
422 if (this.$route.query.auditStatus) {
423 this.getByCode();
424 }
425 },
426 methods: {
427 // 根据编码获取需求信息
428 getByCode() {
429 const code = this.$route.query.demandCode;
430 getCommDemandMessageByCode({ code }).then((res) => {
431 const ruleFormData = JSON.parse(JSON.stringify(res.data));
432 ruleFormData.factorsData = this.formatFileData(res.data.factorsData);
433 ruleFormData.factorsParts = this.formatFileData(res.data.factorsParts);
434 ruleFormData.specificationFile = this.formatFileData(
435 res.data.specificationFile
436 );
437 ruleFormData.otherFile = this.formatFileData(res.data.otherFile);
438 this.ruleForm = ruleFormData;
439 this.$route.query.auditStatus == 1 && (this.disableForm = true);
440 });
441 },
442
443 // 文件上传成功
444 fileSuccess(uploadBtn, res, file, fileList) {
445 fileList.forEach((item, index) => {
446 if (item.response) {
447 this.ruleForm[uploadBtn][index] = {
448 name: item.response.name,
449 url: item.response.url,
450 };
451 }
452 });
453 },
454
455 // 文件删除
456 fileRemove(uploadBtn, file, fileList) {
457 this.ruleForm[uploadBtn] = [];
458 fileList.forEach((item, index) => {
459 this.ruleForm[uploadBtn][index] = {
460 name: item.response.name,
461 url: item.response.url,
462 };
463 });
464 },
465
466 // 文件提交错误
467 handleError() {
468 this.$message({
469 message: "上传失败，请重新操作！",
470 type: "error",
471 });
472 },
473
474 // 保存提交操作
475 saveSubmitFile(num) {
476 this.$refs.informationForm.validate((valid) => {
477 if (valid) {
478 const ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
479 ruleForm.auditStatus = num;
480 ruleForm.factorsData = JSON.stringify(this.ruleForm.factorsData);
481 ruleForm.factorsParts = JSON.stringify(this.ruleForm.factorsParts);
482 ruleForm.specificationFile = JSON.stringify(
483 this.ruleForm.specificationFile
484 );
485 ruleForm.otherFile = JSON.stringify(this.ruleForm.otherFile);
486 addCommDemandMessage(ruleForm).then((res) => {
487 if (res.code === 200) {
488 if (num === 1) {
489 this.$alert(
490 "你的申请已经提交，请等待审核，审核进度请前往需求列表查看",
491 "提示消息",
492 {
493 confirmButtonText: "确定",
494 callback: (action) => {
495 this.$router.push({
496 path: "/demand/list",
497 });
498 },
499 }
500 );
501 this.disableForm = true;
502 this.resetForm();
503 } else {
504 }
505 } else {
506 this.msgError(res.msg);
507 }
508 });
509 } else {
510 return false;
511 }
512 });
513 },
514
515 // 重置表单
516 resetForm() {
517 this.$refs.informationForm.resetFields();
518 this.$refs.factorsData.clearFiles();
519 this.$refs.factorsParts.clearFiles();
520 this.$refs.specificationFile.clearFiles();
521 this.$refs.otherFile.clearFiles();
522 },
523
524 // 处理文件保存数据格式
525 formatFileData(data) {
526 if (data === "" || !Array.isArray(JSON.parse(data))) {
527 return [];
528 }
529 return JSON.parse(data);
530 },
531
532 // 获取类别列表
533 getTypeList() {
534 getDicts("comm_type").then((res) => {
535 res.data.forEach((item, index) => {
536 this.typeList.push({
537 id: item.dictValue,
538 name: item.dictLabel,
539 });
540 });
541 });
542 },
543
544 // 获取需求业务领域列表
545 getBusinessList() {
546 getDicts("comm_app_area").then((res) => {
547 res.data.forEach((item, index) => {
548 this.businessList.push({
549 id: item.dictValue,
550 name: item.dictLabel,
551 });
552 });
553 });
554 },
555
556 // 上一步
557 changeSteps() {
558 this.$emit("changeSteps", 0);
559 },
560
561 // 模板文件下载
562 downloadTemplateFile(fileName) {
563 window.open("/templateFile/" + fileName);
564 },
565
566 downloadFile(url) {
567 let downloadUrl =
568 process.env.NODE_ENV === "production" ? "/prod-api" : "/dev-api";
569 if (url) {
570 window.open(downloadUrl + "/community/commupload/download?name=" + url);
571 } else {
572 this.$message({
573 message: "暂无文件下载",
574 type: "error",
575 });
576 }
577 },
578 },
579 };
580 </script>
581
582 <style lang="scss" scoped>
583 @import "./demand.scss";
584 .information-wrapper {
585 .content {
586 .information-form .base-content {
587 /deep/ .el-form-item {
588 width: auto;
589 }
590 /deep/ .el-form-item__content {
591 width: 200px;
592 .el-select {
593 width: 200px;
594 }
595 }
596 }
597 }
598 }
599
600 .upload-down-btn {
601 position: relative;
602 .down-btn {
603 position: absolute;
604 top: 0;
605 left: 100px;
606 }
607 }
608
609 .demand-desc {
610 width: 100% !important;
611 }
612
613 .demand-desc >>> .el-form-item__content {
614 width: 80% !important;
615 }
616
617 .down-file-list {
618 margin-bottom: 10px;
619 }
620
621 .down-file-name {
622 margin-left: 10px;
623 }
624 </style>
View Code
以上是 关于vue项目中文件上传，复现，模版下载常见用法（el-upload） 的全部内容， 来源链接： utcz.com/z/378784.html
