文件上传模块

Raod 3 years ago
parent 7ab8f58382
commit f3536a9d45

@ -7,4 +7,4 @@ spring:
customer:
file:
dist-path: /app/disk/upload/
dist-path: D:\Workspace\AJ-Report\report-core\upload

@ -0,0 +1,58 @@
/*
* @Author: zyk
* @Date: 2021-02-23 15:13:17
* @Last Modified by: zyk
* @Last Modified time: 2021-03-15 13:28:36
*/
import request from '@/utils/request'
// 导出中心
export function download(fileId) {
return request({
url: `/file/download/${fileId}`,
responseType: 'blob',
method: 'GET',
})
}
export function fileList(params) {
return request({
url: '/file/pageList',
method: 'GET',
params,
})
}
export function fileAdd(data) {
return request({
url: '/file',
method: 'post',
data,
})
}
export function fileDel(data) {
return request({
url: `/file/delete/batch`,
method: 'POST',
data,
})
}
export function fileUpdate(data) {
return request({
url: '/file',
method: 'put',
data,
})
}
export function fileDetail(data) {
return request({
url: '/file/' + data.id,
method: 'get',
params: data,
})
}
export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail }

@ -0,0 +1,187 @@
<template>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable>
<el-upload class="el-upload" :action="uploadUrl" :headers="headers" :on-success="handleUpload" :on-error="handleUpload" :show-file-list="false" :limit="1">
<el-button type="primary" icon="el-icon" v-permission="'fileManage:upload'"></el-button>
</el-upload>
</template>
<template slot="rowButton" slot-scope="props">
<el-button type="text" @click="customButtom(props)"></el-button>
</template>
</anji-crud>
</template>
<script>
import { fileList, fileAdd, fileDel, fileUpdate, fileDetail } from '@/api/file'
import { getToken } from '@/utils/auth'
export default {
name: 'File',
components: {
anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
},
data() {
return {
selectedList: [],
uploadUrl: process.env.BASE_API + '/file/upload',
crudOption: {
// 使
title: '文件管理',
//
labelWidth: '120px',
//
queryFormFields: [
{
inputType: 'input',
label: '文件路径',
field: 'filePath',
},
],
//
buttons: {
query: {
api: fileList,
permission: 'fileManage:query',
sort: 'create_time',
order: 'DESC',
},
queryByPrimarykey: {
api: fileDetail,
permission: 'fileManage:query',
},
add: {
api: fileAdd,
permission: 'fileManage:upload',
isShow: false,
},
delete: {
api: fileDel,
permission: 'fileManage:delete',
},
edit: {
api: fileUpdate,
permission: 'fileManage:update',
isShow: false,
},
//
customButton: {
operationWidth: 100, // row
},
},
//
columns: [
{
label: '',
field: 'id',
primaryKey: true, // ,
tableHide: true, //
editHide: true, //
},
{
//
label: '图片缩略图', //
field: 'urlPath', //
columnType: 'imgPreview', // text
editHide: true, //
//
// inputType: 'input', // input anji-select
placeholder: '',
disabled: false,
},
{
label: '文件标识', //
placeholder: '',
field: 'fileId',
editField: 'fileId',
tableHide: true, //
inputType: 'input',
rules: [{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }],
disabled: false,
},
{
label: '文件类型', //
placeholder: '',
field: 'fileType',
editField: 'fileType',
inputType: 'input',
rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
disabled: false,
},
{
label: '文件路径', //
placeholder: '',
field: 'filePath',
editField: 'filePath',
inputType: 'input',
rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
disabled: false,
},
{
label: 'url路径', // url
placeholder: '',
field: 'urlPath',
editField: 'urlPath',
inputType: 'input',
rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
disabled: false,
},
{
label: '内容说明', //
placeholder: '',
field: 'fileInstruction',
editField: 'fileInstruction',
inputType: 'input',
rules: [{ min: 1, max: 1024, message: '不超过1024个字符', trigger: 'blur' }],
disabled: false,
},
{
label: '创建人',
field: 'createByView',
columnType: 'expand', //
inputType: 'input', // input
disabled: true, //
},
{
label: '创建时间',
field: 'createTime',
columnType: 'expand',
inputType: 'input',
disabled: true,
},
],
},
}
},
computed: {
headers() {
return {
Authorization: getToken(), // token
}
},
},
created() {},
methods: {
//
handleUpload(response) {
console.log(this)
//
this.$refs.listPage.handleQueryForm()
},
handleError() {},
async downloadFile(row) {
window.open(row.urlPath)
},
customButtom(val) {
this.downloadFile(val.msg)
},
},
}
</script>
<style scoped lang="scss">
.el-upload {
display: inline-block;
}
</style>
Loading…
Cancel
Save