joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

文件上传

Browse Source
This commit is contained in:
Yuan 2022-10-11 17:20:57 +08:00
parent 60d2457087
commit 334a28c5ef
2 changed files with 99 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/baseUrl.js
View File

@ -25,13 +25,13 @@ export function handlerUrl(data) {
// const data = null; // const data = null;
// BASE_API = 'https://joylink.club/jlcloud'; // BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://test.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://114.116.51.125/jlcloud';
// BASE_API = 'http://192.168.3.90:9100'; // 周寅 // BASE_API = 'http://192.168.3.90:9100'; // 周寅
// BASE_API = 'http://192.168.3.94:9000'; // 旭强 // BASE_API = 'http://192.168.3.94:9000'; // 旭强
// BASE_API = 'http://192.168.3.15:9000'; // 张赛 // BASE_API = 'http://192.168.3.15:9000'; // 张赛
// BASE_API = 'http://192.168.3.5: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://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康 // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
// BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛 // BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛

157
src/views/system/exampleCaseManage/create.vue
View File

@ -1,31 +1,33 @@
<template> <template>
<el-dialog :visible="show" center :close-on-click-modal="false" title="新增文件" :before-close="doClose" destroy-on-close> <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 ref="form" :model="formData" inline :rules="rules">
<el-form-item label="分类" required prop="directory"> <el-form-item label="目录" required prop="directory">
<el-input v-model="formData.directory"></el-input> <el-select v-model="formData.directory">
<el-option v-for="dir in directories" :key="dir" :label="dir" :value="dir"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="标题" required prop="title"> <el-form-item label="文件名" required prop="fileName">
<el-input v-model="formData.title"></el-input> <el-input v-model="formData.fileName"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-upload <div class="wrapper">
ref="upload" <label v-show="showUpload" for="file">
:auto-upload="false" <el-card shadow="hover" class="card">
:action="uploadTarget" <i class="el-icon-upload"></i>
:limit="1" </el-card>
list-type="picture-card" </label>
:on-change="onUploadChange" <input ref="file" @change="onUploadChange" style="display: none;" type="file" id="file" />
:http-request="httpRequset" <div v-show="!showUpload" class="preview" @mouseenter="showDelete = true" @mouseleave="showDelete = false">
> <el-card shadow="hover" class="card">
<i slot="default" class="el-icon-upload"></i> <div class="file-type">{{ fileType }}</div>
<div class="block" slot="file" slot-scope="{ file }"> <div class="file-name">{{ formData.fileName }}</div>
<div class="file-type">{{ file.raw.type.split('/').pop() }}</div> <div class="delete" v-show="showDelete" @click="handleDelete">
<div class="file-name">{{ file.name }}</div> <i class="el-icon-delete-solid"></i>
<span class="el-upload-list__item-actions"> </div>
<span class="el-upload-list__item-delete" @click="handleDelete(file)"> <i class="el-icon-delete"></i></span> </el-card>
</span>
</div> </div>
</el-upload> </div>
<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.fileName }}</div>
<footer> <footer>
<el-button type="primary" size="small" @click="handleUpload">上传</el-button> <el-button type="primary" size="small" @click="handleUpload">上传</el-button>
<el-button size="small" @click="doClose">取消</el-button> <el-button size="small" @click="doClose">取消</el-button>
@ -34,6 +36,7 @@
</template> </template>
<script> <script>
const directories = ['logo', 'recognition', 'txt', 'image', 'pdf']
import { getUploadUrl } from '@/api/projectConfig' import { getUploadUrl } from '@/api/projectConfig'
import { checkIsExist } from '@/api/management/minio' import { checkIsExist } from '@/api/management/minio'
export default { export default {
@ -42,14 +45,16 @@ export default {
return { return {
show: false, show: false,
showUpload: true, showUpload: true,
uploadTarget: '', showDelete: false,
directories,
fileType: '',
formData: { formData: {
directory: '', directory: '',
title: '', fileName: '',
}, },
rules: { rules: {
directory: [{ required: true, message: '请选择目录', trigger: 'blur' }], directory: [{ required: true, message: '请选择目录', trigger: 'blur' }],
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], fileName: [{ required: true, message: '请输入标题', trigger: 'blur' }],
}, },
} }
}, },
@ -61,52 +66,49 @@ export default {
this.show = false this.show = false
this.handleDelete() this.handleDelete()
this.formData.directory = '' this.formData.directory = ''
this.formData.title = '' this.formData.fileName = ''
}, },
onUploadChange(file, fileList) { onUploadChange(e) {
const fileList = e.target.files
console.log(fileList)
if (!fileList.length) return if (!fileList.length) return
this.showUpload = false this.showUpload = false
this.formData.title = file.name.split('.')[0] this.formData.fileName = fileList[0].name
this.fileType = fileList[0].type.split('/').pop()
}, },
handleUpload() { handleUpload() {
const form = this.$refs.form const form = this.$refs.form
const file = this.$refs.upload.uploadFiles[0] const file = this.$refs.file.files[0]
const params = { const params = {
directory: this.formData.directory, directory: this.formData.directory,
fileName: file.name, fileName: this.formData.fileName,
} }
form.validate().then(valid => { form.validate().then(valid => {
if (valid && file.size > 0) { if (valid && file.size > 0) {
checkIsExist(params) checkIsExist(params)
.then(resp => resp.data)
.then(() => getUploadUrl({ ...params, method: 'PUT' }))
.then(resp => { .then(resp => {
return resp.data console.log(resp)
const url = resp.data
const xhr = new XMLHttpRequest()
xhr.open('PUT', url)
xhr.upload.onprogress = function(e) {
console.log(e)
}
xhr.upload.onload = function(e) {
console.log(e)
}
xhr.send(file)
}) })
.then(() => {})
// getUploadUrl({ ...params, method: 'PUT' }).then(resp => {
// this.uploadTarget = resp.data
// this.$nextTick(() => {
// this.$refs.upload.submit()
// })
// })
} }
}) })
}, },
httpRequset(data) { handleDelete() {
console.log(data) this.$refs.file.value = ''
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.showUpload = true
this.formData.title = '' this.formData.fileName = ''
this.fileType = ''
}, },
}, },
} }
@ -122,14 +124,49 @@ footer {
user-select: none; user-select: none;
padding: 5px; padding: 5px;
color: #909399; color: #909399;
.file-type { }
text-align: center; .wrapper {
font-size: 4rem; display: flex;
line-height: 6rem; justify-content: center;
} .card {
.file-name { display: flex;
line-height: 1.2em; justify-content: center;
text-align: center; align-items: center;
position: relative;
color: #909399;
cursor: pointer;
width: 150px;
height: 150px;
.el-icon-upload {
font-size: 4em;
}
.file-type {
text-align: center;
font-size: 4rem;
line-height: 6rem;
}
.file-name {
line-height: 1.2em;
text-align: center;
}
.delete {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0%;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
transition-duration: 1s;
transition-property: all;
font-size: 3em;
}
} }
} }
.path-display {
margin-top: 10px;
}
</style> </style>