文件上传
This commit is contained in:
Yuan
parent
efc2c1447b
commit
60d2457087
19
src/api/management/minio.js
Normal file
19
src/api/management/minio.js
Normal file
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
/** 获取预处理URL */
|
||||
export function getFileList(params) {
|
||||
return request({
|
||||
url: `/api/minio/file/list`,
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
/** 检查minio资源是否已存在 */
|
||||
export function checkIsExist(params) {
|
||||
return request({
|
||||
url: `/api/minio/checkIsExist`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -106,5 +106,6 @@ export default {
|
||||
iscsDeviceManage: 'ISCS Device Manage',
|
||||
iscsResourcesManage: 'ISCS Resources Manage',
|
||||
projectManage: 'Project Manage',
|
||||
frontProjectConfigManage:'Front Project Config Manage'
|
||||
frontProjectConfigManage:'Front Project Config Manage',
|
||||
exampleCaseManage: 'Example Case Manage'
|
||||
};
|
||||
|
||||
@ -110,5 +110,6 @@ export default {
|
||||
iscsDeviceManage: 'ISCS设备管理',
|
||||
iscsResourcesManage: 'ISCS资源管理',
|
||||
projectManage: '项目管理',
|
||||
frontProjectConfigManage:'前端项目配置管理'
|
||||
frontProjectConfigManage:'前端项目配置管理',
|
||||
exampleCaseManage:'案例展示管理'
|
||||
};
|
||||
|
||||
@ -210,6 +210,7 @@ const ProjectServer = () => import('@/views/system/serverManage');
|
||||
const VoiceManage = () => import('@/views/fileManage/voiceManage');
|
||||
const ProjectManage = () => import('@/views/system/projectManage');
|
||||
const FrontProjectConfigManage = () => import('@/views/system/frontProjectConfigManage');
|
||||
const ExampleCaseManage = () => import('@/views/system/exampleCaseManage');
|
||||
|
||||
const IscsDeviceManage = () => import('@/views/system/iscsDeviceManage');
|
||||
const IscsResourcesManage = () => import('@/views/system/iscsResourcesManage');
|
||||
@ -1360,6 +1361,13 @@ export const asyncRouter = [
|
||||
meta: {
|
||||
i18n: 'router.frontProjectConfigManage'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'exampleCaseManage',
|
||||
component: ExampleCaseManage,
|
||||
meta: {
|
||||
i18n: 'router.exampleCaseManage'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -25,13 +25,13 @@ export function handlerUrl(data) {
|
||||
// const data = null;
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
// BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
// BASE_API = 'http://114.116.51.125/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.90:9100'; // 周寅
|
||||
// BASE_API = 'http://192.168.3.94:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.15:9000'; // 张赛
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 夏增彬
|
||||
// BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
|
||||
BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
|
||||
// BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛
|
||||
|
||||
135
src/views/system/exampleCaseManage/create.vue
Normal file
135
src/views/system/exampleCaseManage/create.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-dialog :visible="show" center :close-on-click-modal="false" title="新增文件" :before-close="doClose" destroy-on-close>
|
||||
<el-form ref="form" :model="formData" inline :rules="rules">
|
||||
<el-form-item label="分类" required prop="directory">
|
||||
<el-input v-model="formData.directory"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" required prop="title">
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:auto-upload="false"
|
||||
:action="uploadTarget"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-change="onUploadChange"
|
||||
:http-request="httpRequset"
|
||||
>
|
||||
<i slot="default" class="el-icon-upload"></i>
|
||||
<div class="block" slot="file" slot-scope="{ file }">
|
||||
<div class="file-type">{{ file.raw.type.split('/').pop() }}</div>
|
||||
<div class="file-name">{{ file.name }}</div>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-delete" @click="handleDelete(file)"> <i class="el-icon-delete"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<footer>
|
||||
<el-button type="primary" size="small" @click="handleUpload">上传</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
</footer>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUploadUrl } from '@/api/projectConfig'
|
||||
import { checkIsExist } from '@/api/management/minio'
|
||||
export default {
|
||||
name: 'CreateFile',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
showUpload: true,
|
||||
uploadTarget: '',
|
||||
formData: {
|
||||
directory: '',
|
||||
title: '',
|
||||
},
|
||||
rules: {
|
||||
directory: [{ required: true, message: '请选择目录', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true
|
||||
},
|
||||
doClose() {
|
||||
this.show = false
|
||||
this.handleDelete()
|
||||
this.formData.directory = ''
|
||||
this.formData.title = ''
|
||||
},
|
||||
onUploadChange(file, fileList) {
|
||||
if (!fileList.length) return
|
||||
this.showUpload = false
|
||||
this.formData.title = file.name.split('.')[0]
|
||||
},
|
||||
handleUpload() {
|
||||
const form = this.$refs.form
|
||||
const file = this.$refs.upload.uploadFiles[0]
|
||||
const params = {
|
||||
directory: this.formData.directory,
|
||||
fileName: file.name,
|
||||
}
|
||||
form.validate().then(valid => {
|
||||
if (valid && file.size > 0) {
|
||||
checkIsExist(params)
|
||||
.then(resp => {
|
||||
return resp.data
|
||||
})
|
||||
.then(() => {})
|
||||
// getUploadUrl({ ...params, method: 'PUT' }).then(resp => {
|
||||
// this.uploadTarget = resp.data
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.upload.submit()
|
||||
// })
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
httpRequset(data) {
|
||||
console.log(data)
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('PUT', data.action)
|
||||
xhr.upload.onprogress = function(e) {
|
||||
console.log(e)
|
||||
}
|
||||
xhr.upload.onload = function(e) {
|
||||
console.log(e)
|
||||
}
|
||||
xhr.send(data.file)
|
||||
},
|
||||
handleDelete(file, fileList) {
|
||||
this.$refs.upload.clearFiles()
|
||||
this.showUpload = true
|
||||
this.formData.title = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.block {
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
color: #909399;
|
||||
.file-type {
|
||||
text-align: center;
|
||||
font-size: 4rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
.file-name {
|
||||
line-height: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/system/exampleCaseManage/index.vue
Normal file
88
src/views/system/exampleCaseManage/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<CreateFile ref="createFile" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUploadUrl } from '@/api/projectConfig'
|
||||
import { getFileList } from '@/api/management/minio'
|
||||
import CreateFile from './create'
|
||||
export default {
|
||||
name: 'exampleCaseManage',
|
||||
components: { CreateFile },
|
||||
data() {
|
||||
return {
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum',
|
||||
},
|
||||
queryForm: {
|
||||
queryObject: {
|
||||
title: {
|
||||
type: 'text',
|
||||
label: '名称',
|
||||
},
|
||||
directory: {
|
||||
type: 'text',
|
||||
label: '目录',
|
||||
},
|
||||
},
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFileList,
|
||||
columns: [
|
||||
{
|
||||
title: '文件名',
|
||||
prop: 'filaName',
|
||||
},
|
||||
{
|
||||
title: '目录',
|
||||
prop: 'directory',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '400',
|
||||
buttons: [
|
||||
{
|
||||
name: '删除',
|
||||
// handleClick: this.goDetail,
|
||||
type: 'danger',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
actions: [{ text: this.$t('global.add'), handler: this.createFile }],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryFileList(params) {
|
||||
return getFileList(params)
|
||||
},
|
||||
createFile() {
|
||||
this.$refs.createFile.doShow()
|
||||
},
|
||||
uploadFile(e) {
|
||||
console.log(e)
|
||||
const file = e.file
|
||||
getUploadUrl({ dirName: 'test', fileName: e.file.name, method: 'PUT' }).then(resp => {
|
||||
const url = resp.data
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('PUT', url)
|
||||
xhr.upload.onprogress = function(event) {
|
||||
console.log(event)
|
||||
}
|
||||
xhr.upload.onload = function(e) {
|
||||
console.log(e)
|
||||
}
|
||||
xhr.send(file)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Reference in New Issue
Block a user