vue element 文件上传（单文件、多文件手动上传） 、 文件下载
一、文件上传
记一次文件上传和文件下载，写的比较仓促，就记录了代码过程，其他没有详细解释，只为记录自己知识积累的过程。
1、单文件上传
HTML部分：
<el-row v-for="(item,index) in DebugfileList">
<el-col :span="10"><span>{{item.name}}</span></el-col>
<el-col :span="14">
<el-upload
class="upload-demo"
action="#"
:data="{name:item.businessType}"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="item.fileList"
:http-request="handelUploadDebugfile"
style="display:flex;flex-direction:row;">
<el-button size="small" type="primary" icon="el-icon-document-add">选取文件</el-button>
</el-upload>
</el-col>
</el-upload>
</el-row>
JS部分：
// 单文件调试附件上传
handelUploadDebugfile(e) {
let file = e.file;
let form = new FormData()
let maxType = '1';
let businessType = e.data.name;
form.append('files', e.file);
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.getDeFilesTableData()
})
},//这里传了四个参数，files，orderId,maxType,businessType
2、多文件上传
HTML部分：
<el-dialog title="上传文件" :visible.sync="dialogFile" width="50%">
<div class="item list">
<div>
<el-row>
<el-col :span="3"><span> 文件类型选择:</span>
</el-col>
<el-col :span="5">
<el-select v-model="fileTypevalue" placeholder="请选择文件类型">
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
<el-row>
<el-col :span="3"><span> 上传文件:</span></el-col>
<el-col :span="5">
<el-upload
action="#"
ref="upload"
:before-upload="beforeupload"
:on-preview="handlePreview"
:on-remove="handleRemove"
multiple
:file-list="mutiFileList"
:auto-upload="false"
:http-request="mutiFilesUpload">
<el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">上传附件</el-button>
</el-upload>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFile = false">取 消</el-button>
<el-button type="primary" icon="el-icon-upload" @click="submitFiles">上传到服务器</el-button>
</span>
</el-dialog>
JS部分：
// 多文件附件上传到服务器
mutiFilesUpload(e) {
this.Filesform.append('files', e.file)
},
// 多文件附件上传到服务器
submitFiles() {
this.Filesform = new FormData()
this.$refs.upload.submit()
let maxType = '2';
let businessType = this.fileTypevalue;
let form = this.Filesform
if (this.fileTypevalue != '' && this.flag) {
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.dialogFile = false
this.fileTypevalue = ''
this.$refs.upload.clearFiles()
this.flag=false
this.getFilesTableData()
})
} else {
this.$notify({
title: '警告',
message: '请选择文件类型或文件',
type: 'warning'
});
}
},
一、文件下载
HTML部分：
<el-button size="mini" type="warning" icon="el-icon-download" @click="download(row)">下载</el-button>
JS部分：
download(row) {
let id = row.id
var elemIF = document.createElement('iframe');
elemIF.src = '/api/produce/workFileInfo/downloadFile?id=' + id;
elemIF.style.display = 'none';
document.body.appendChild(elemIF);
},
附：整个页面代码
<template>
<div class="main">
<!-- 单文件调试附件 -->
<div class="item">
<el-row v-for="(item,index) in DebugfileList">
<el-col :span="10"><span>{{item.name}}</span></el-col>
<el-col :span="14">
<el-upload
class="upload-demo"
action="#"
:data="{name:item.businessType}"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="item.fileList"
:http-request="handelUploadDebugfile"
style="display:flex;flex-direction:row;">
<el-button size="small" type="primary" icon="el-icon-document-add">选取文件</el-button>
</el-upload>
</el-col>
</el-upload>
</el-row>
<el-button type="primary" icon="el-icon-folder-add" @click="dialogdebugFile=true">点击上传文件</el-button>
<!-- 调试附件表格-->
<el-table :data="DeFilesTableData" border fit highlight-current-row style="width: 100%;">
<el-table-column label="文件名称" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.fileName }}</span>
</template>
</el-table-column>
<el-table-column label="类型" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.businessType }}</span>
</template>
</el-table-column>
<el-table-column label="时间" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.createTime }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="230" class-name="small-padding " fixed="right">
<template slot-scope="{row}">
<el-button type="danger" size="mini" icon="el-icon-delete" @click="Delete(row)">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-download" @click="download(row)">下载</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:pageSizes="pageSizes"
v-show="detotal>0"
:total="detotal"
:auto-scroll="false"
:page.sync="listDeFileQuery.page"
:limit.sync="listDeFileQuery.limit"
@pagination="getDeFilesTableData" />
</div>
<div style="border-bottom:1px solid #ccc;height:5px;"></div>
<!-- 单文件附件 -->
<div class="item">
<el-row v-for="(item,index) in fileList">
<el-col :span="12"><span>{{item.name}}</span></el-col>
<el-col :span="12">
<el-upload
action="#"
class="upload-demo"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:data="{name:item.businessType}"
:http-request="handelUploadfile"
:on-exceed="handleExceed"
:file-list="item.fileList"
style="display:flex;flex-direction:row;">
<el-button size="small" type="primary" icon="el-icon-document-add">选取文件</el-button>
</el-upload>
</el-col>
</el-upload>
</el-row>
<el-button type="primary" icon="el-icon-folder-add" @click="dialogFile=true">点击上传文件</el-button>
<!-- 附件表格 -->
<el-table :data="filesTableData" border fit highlight-current-row style="width: 100%;">
<el-table-column label="文件名称" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.fileName }}</span>
</template>
</el-table-column>
<el-table-column label="类型" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.businessType }}</span>
</template>
</el-table-column>
<el-table-column label="时间" min-width="150px" align="center">
<template slot-scope="{row}">
<span>{{ row.createTime }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="230" class-name="small-padding " fixed="right">
<template slot-scope="{row}">
<el-button type="danger" size="mini" icon="el-icon-delete" @click="Delete(row)">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-download" @click="download(row)">下载</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:pageSizes="pageSizes"
v-show="filetotal>0"
:total="filetotal"
:auto-scroll="false"
:page.sync="listFileQuery.page"
:limit.sync="listFileQuery.limit"
@pagination="getFilesTableData" />
</div>
<!-- 调试附件上传弹出框 -->
<el-dialog title="上传文件" :visible.sync="dialogdebugFile" width="50%">
<div class="item list">
<div>
<el-row>
<el-col :span="3"><span> 文件类型选择:</span>
</el-col>
<el-col :span="5">
<el-select v-model="deTypevalue" placeholder="请选择文件类型">
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
<el-row>
<el-col :span="3"><span> 上传文件:</span></el-col>
<el-col :span="5">
<el-upload
action="#"
ref="deupload"
:before-upload="beforedeupload"
:on-preview="handlePreview"
:on-remove="handleRemove"
multiple
:file-list="mutiDeFileList"
:auto-upload="false"
:http-request="mutiDefilesUpload">
<el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">上传附件</el-button>
</el-upload>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogdebugFile = false">取 消</el-button>
<el-button type="primary" icon="el-icon-upload" @click="submitDeFiles">上传到服务器</el-button>
</span>
</el-dialog>
<!-- 附件上传弹出框 -->
<el-dialog title="上传文件" :visible.sync="dialogFile" width="50%">
<div class="item list">
<div>
<el-row>
<el-col :span="3"><span> 文件类型选择:</span>
</el-col>
<el-col :span="5">
<el-select v-model="fileTypevalue" placeholder="请选择文件类型">
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
<el-row>
<el-col :span="3"><span> 上传文件:</span></el-col>
<el-col :span="5">
<el-upload
action="#"
ref="upload"
:before-upload="beforeupload"
:on-preview="handlePreview"
:on-remove="handleRemove"
multiple
:file-list="mutiFileList"
:auto-upload="false"
:http-request="mutiFilesUpload">
<el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">上传附件</el-button>
</el-upload>
</el-col>
<el-col :span="8" />
<el-col :span="8" />
</el-row>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFile = false">取 消</el-button>
<el-button type="primary" icon="el-icon-upload" @click="submitFiles">上传到服务器</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
import Pagination from '@/components/Pagination' // 引入分页组件
import {uploadfile,workFilePage,workFileType,deleteFile} from '@/api/produce/taskInfo/index'
export default {
components: {Pagination}, //注册分页组件
data() {
return {
pageSizes: [5, 10, 15, 20], //控制每页的数量
DeFilesTableData: [], //调试附件表格
filesTableData: [], //调试附件表格
listLoading: true,
dialogdebugFile: false, //调试附件上传弹出框控制
dialogFile: false, //附件上传弹出框控制
deTypevalue: '', //调试附件类型选择值
fileTypevalue: '', //调试附件类型选择值
detotal: 0, //调试附件表格数据总数
filetotal: 0, //附件表格数据总数
// 7a124e3e-24e3-b681-280e-01722ab1623e
orderId: '11111',
// 类型数组
options: [],
//单文件调试附件数据
DebugfileList: [{
name: '系统配置文件',
businessType: 'CONFIGURATION',
fileList: []
},
{
name: 'newpreprocess',
businessType: 'NEWPREPROCESS',
fileList: []
},
{
name:'newpreprocess-机型',
businessType: 'MODEL',
fileList: []
},
{
name:'cfile',
businessType: 'CFILE',
fileList: []
}
],
//单文件附件数据
fileList: [{
name: '穿透力',
businessType: 'PENETRATION',
fileList: []
},
{
name: '丝分辨力',
businessType: 'SILKRESOLUTION',
fileList: []
},
{
name: '空间分辨力',
businessType: 'SPATIALRESOLUTION',
fileList: []
},
{
name: '物质分辨',
businessType: 'MATTERRESOLUTION',
fileList: []
},
{
name: '未出束曲线',
businessType: 'UNBENDCURVE',
fileList: []
},
{
name: '出束曲线',
businessType: 'EXITCURVE',
fileList: []
}
],
mutiDeFileList: [], //多文件调试附件
mutiFileList: [], //多文件附件
DeFilesform: '', //调试附件文件流
Filesform: '', //附件文件流
// 分页1
listDeFileQuery: {
page: 1,
limit: 5
},
// 分页2
listFileQuery: {
page: 1,
limit: 5
},
flag:false,
flag2:false,
}
},
mounted() {
this.getDeFilesTableData()
this.getFilesTableData()
this.getType()
},
methods: {
//获取select下拉框内容
getType() {
workFileType().then(res => {
this.options = res.data.rows
})
},
// 获取调试附件表格数据
getDeFilesTableData() {
workFilePage(Object.assign(this.listDeFileQuery, {
orderId: this.orderId,
fileMaxType: 1
})).then(res => {
this.DeFilesTableData = res.data.rows
this.detotal = res.data.total
})
},
// 获取附件表格数据
getFilesTableData() {
workFilePage(Object.assign(this.listFileQuery, {
orderId: this.orderId,
fileMaxType: 2
})).then(res => {
this.filesTableData = res.data.rows
this.filetotal = res.data.total
})
},
// 单文件调试附件上传
handelUploadDebugfile(e) {
let file = e.file;
let form = new FormData()
let maxType = '1';
let businessType = e.data.name;
form.append('files', e.file);
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.getDeFilesTableData()
})
},
// 单文件附件上传
handelUploadfile(e) {
let file = e.file;
let form = new FormData()
let maxType = '2';
let businessType = e.data.name;
form.append('files', e.file);
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.getFilesTableData()
})
},
// 多文件调试附件上传1
mutiDefilesUpload(e) {
this.DeFilesform.append('files', e.file)
},
// 多文件调试附件上传到服务器
submitDeFiles() {
this.DeFilesform = new FormData()
this.$refs.deupload.submit()
let maxType = '1';
let businessType = this.deTypevalue;
let form = this.DeFilesform
if (this.deTypevalue != '' && this.flag2) {
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.dialogdebugFile = false
this.deTypevalue = ''
this.$refs.deupload.clearFiles()
this.flag2=false
this.getDeFilesTableData()
})
} else {
this.$notify({
title: '警告',
message: '请选择文件或者文件类型',
type: 'warning'
});
}
},
//文件上传之前的钩子函数
beforedeupload(file){
if(file){
this.flag2=true
}
},
beforeupload(file){
if(file){
this.flag=true
}
},
// 多文件附件上传到服务器
mutiFilesUpload(e) {
this.Filesform.append('files', e.file)
},
// 多文件附件上传到服务器
submitFiles() {
this.Filesform = new FormData()
this.$refs.upload.submit()
let maxType = '2';
let businessType = this.fileTypevalue;
let form = this.Filesform
if (this.fileTypevalue != '' && this.flag) {
uploadfile(form, this.orderId, maxType, businessType).then(data => {
this.dialogFile = false
this.fileTypevalue = ''
this.$refs.upload.clearFiles()
this.flag=false
this.getFilesTableData()
})
} else {
this.$notify({
title: '警告',
message: '请选择文件类型或文件',
type: 'warning'
});
}
},
// 删除表格文件
Delete(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(row.id)
deleteFile({
id: row.id
}).then(() => {
this.getDeFilesTableData()
this.$notify({
title: '提示',
message: '删除成功',
type: 'success'
})
}).catch()
})
},
// 下载表格文件
download(row) {
let id = row.id
var elemIF = document.createElement('iframe');
elemIF.src = '/api/produce/workFileInfo/downloadFile?id=' + id;
elemIF.style.display = 'none';
document.body.appendChild(elemIF);
},
// 移除
handleRemove(file, fileList) {
// console.log(file, fileList);
},
handlePreview(file) {
// console.log(file);
},
// 单文件超出提示
handleExceed(files, fileList) {
this.$message.warning(`只能选择 1 个文件，请先删除当前文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
}
</script>
<style scoped>
.el-upload-list__item{
z-index: 9999;
display: none;
}
.el-pagination{
z-index: 99999;
padding: 0 0 20px 5px;
}
.pagination-container[data-v-72233bcd]{
z-index: 99999;
padding: 0px 16px;
}
.el-col[data-v-431029e7]{
border-radius: 4px;
height: 40px;
line-height: 40px;
text-align: justify;
}
.list{
padding-bottom: 15px;
}
.main {
width: 80%;
margin: 0 auto;
}
.item{
margin-top: 20px;
margin-bottom: 20px;
}
.el-button--small{
margin-right: 160px;
}
.el-row{
margin-bottom: 20px;
&:last-child{
margin-bottom:0;
}
}
.el-col{
border-radius: 4px;
height: 40px;
line-height: 40px;
text-align: center;
}
.bg-purple-dark{
background:#99a9bf;
}
.bg-purple{
background:#d3dce6;
}
.bg-purple-ligh{
background:#e5e9f2;
}
.grid-content{
border-radius: 4px;
min-height: 36px;
}
.row-bg{
padding: 10px 0;
background-color:#f9fafc;
}
</style>