<template>
<el-tabs v-model="activeName" @tab-click="findPage">
<el-tab-pane label="文件列表" name="first" >
<!--表格内容栏-->
<qy-table ref="QyTable" :height="220" :width="width" permsEdit="sys:role:edit" permsDelete="sys:role:delete" :highlightCurrentRow="true" :stripe="false"
:data="pageResult" :columns="columns"
@findPage="findPage" @handleEdit="handleEdit" @handleShow="handleShow" >
</qy-table>
</el-tab-pane>
<el-tab-pane label="上传" name="second">
<div style="margin: 0 auto;width: 360px;text-align: center;">
<el-upload
style="text-align: left"
class='image-uploader'
:multiple='true'
:auto-upload='false'
ref="upload"
list-type='text'
:show-file-list='true'
:before-upload="beforeUpload"
:drag='true'
:action="global.baseUrl+'/api/upload/uploadFile'"
:limit="10"
name="file"
:on-exceed="handleExceed"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:file-list="fileList"
:headers="importHeaders"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip" style="text-align: center">只能上传10个文件，仅限text格式</div>
</el-upload>
<el-button style="margin-top: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import axios from 'axios';
import QyTable from "@/views/Core/QyTable"
import QyButton from "@/views/Core/QyButton"
import TableTreeColumn from "@/views/Core/TableTreeColumn"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
export default {
name: "UploadFile",
props:{
selectId:{
type:String,
default:0
}
},
components:{
QyTable,
QyButton,
TableTreeColumn,
TableColumnFilterDialog
},
data() {
return {
activeName: 'first',
uploadResData:[],
visible : false,
loading : false,
menuStyle:{
isUserInfo:false,
isImageSetting:true,
isActivendicator:false,
},
src: '',
mark: false,
fileList:[],
limitNum: 1,
fileName: '',
param:'',//表单要提交的参数
importHeaders: {token: sessionStorage.getItem('token')},
width:185,
filters: {
name: ''
},
columns: [],
pageRequest: { pageNum: 1, pageSize: 10 },
pageResult: {},
baseUrl: this.global.backupBaseUrl,
}
},
methods: {
// 处理表格列过滤显示
initColumns: function () {
this.columns = [
{prop:"filename", label:"文件名称", minWidth:120,sortable:'custom'},
{prop:"remark", label:"备注", minWidth:120},
{prop:"lasttime", label:"上传时间", minWidth:120,sortable:'custom', formatter:this.dateFormat}
// {prop:"lastUpdateBy", label:"更新人", minWidth:100},
// {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
]
this.filterColumns = this.columns;
},
submitUpload() {
this.$refs.upload.submit();
},
uploadSuccess(response, file, fileList) {
if (response.code != '0000') {
this.$message.warning(response.message)
} else {
this.uploadResData.push(response.data)
this.fileListUpload(response, file, fileList)
}
},
handleRemove(file, fileList) {
console.log(JSON.stringify(this.uploadResData))
var deleteFilePath;
try {
deleteFilePath = file.response.data.file.result;
} catch (e) {
if (e.message.indexOf('file.response is undefined') > -1) {
deleteFilePath = file.file.result;
}
}
this.$api.uploadfile.fileload("deleteFilePath="+deleteFilePath).then((res) => {
this.editLoading = false
if (res.code == '0000') {
this.$message({message: '删除成功', type: 'success'})
} else {
this.$message({message: res.msg+",已删除选中文件", type: 'warning'})
}
})
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`, '提示', {type: 'warning'});
},
// 上传文件之前的钩子
beforeUpload(file) {
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
return (isText | isTextComputer)
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 10 个文件，请删除后继续上传`)
},
// 文件输出到磁盘之后上传到表里
fileListUpload(response, file, fileList){
const form = new FormData()
// 文件对象
form.append('originalfilename', response.data.file.originalfilename)
form.append('result', response.data.file.result)
form.append('totalSize', response.data.file.totalSize)
form.append('selectId', this.selectId)
this.$api.uploadfile.sysUploadFile(form).then((res)=>{
this.editLoading = false
if (res.code == '0000') {
this.$message.success("上传成功！")
} else {
this.$message({message: res.msg, type: 'warning'})
}
},err=>{
})
},
// 上传文件
uploadFile(item) {
const fileObj = item.file
// FormData 对象
const form = new FormData()
// 文件对象
form.append('file', fileObj)
// form.append('comId', this.comId)
this.$api.uploadfile.uploadFile(form).then((res) => {
if (res.code == 200) {
this.$message.success('文件：' + fileObj.name + '上传成功')
res.data.uid = fileObj.uid
this.uploadResData.push(res.data)
} else {
this.$message.warning(res.message)
}
}, err => {
})
},
// 获取分页数据
findPage: function (data) {
if(data !== null) {
this.pageRequest = data.pageRequest
}
const form = new FormData()
form.append('selectId', this.selectId)
this.$api.uploadfile.findUploadFileList(form).then((res) => {
this.pageResult = res.data
//this.findTreeData()
}).then(data!=null?data.callback:'')
},
// 行按钮—— ——显示编辑界面
handleEdit: function (params) {
var roleId = params.row.roleId;
this.footerDiv = true;
this.titleName = "编辑角色信息";
this.dialogVisible = true; //开启弹出框
this.operation = true;
this.dataForm = Object.assign({}, params.row);
this.modelSrc="RoleEdit";
var params = new URLSearchParams();
params.append('roleId', roleId);
setTimeout(()=>{
this.$refs.roleedit.findrolelist(params);
},10);
},
handleShow: function (params) {
var fileid = params.row.fileid;
let token = sessionStorage.getItem('token');
/* window.location.href = this.baseUrl+'/api/upload/downloadFile?fileid'+fileid*/
const form = new FormData()
form.append('fileid', fileid)
axios.get(
`${this.baseUrl+'/api/upload/downloadFile'}`,
{
data: {form},
responseType: 'blob',
headers:{token},
onDownloadProgress: function (progressEvent) {
console.log(progressEvent)
// 在此处处理进度
}
}
)
.then(res => {
const content = res
const blob = new Blob([content])
const fileName = '导出信息.xlsx'
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
/* axios({
method: 'post',
url: this.baseUrl+'/api/upload/downloadFile',
data: {
form
},
headers:{token},
responseType: 'blob'
}).then(response => {
this.download(response)
}).catch((error) => {
})*/
},
// 处理表格列过滤显示
displayFilterColumnsDialog: function () {
this.$refs.tableColumnFilterDialog.setDialogVisible(true)
},
// 处理表格列过滤显示
handleFilterColumns: function (data) {
this.filterColumns = data.filterColumns
this.$refs.tableColumnFilterDialog.setDialogVisible(false)
},
},
mounted() {
this.initColumns()
}
}
</script>
vue+element+axios实现文件文件上传，与本博主下的springboot文件上传代码配套使用。
猜你喜欢
转载自blog.csdn.net/qq_41992943/article/details/104650812
今日推荐
周排行