文件上传
This commit is contained in:
Yuan
parent
60d2457087
commit
334a28c5ef
@ -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'; // 张赛
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<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 label="目录" required prop="directory">
|
||||
<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 label="标题" required prop="title">
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
<el-form-item label="文件名" required prop="fileName">
|
||||
<el-input v-model="formData.fileName"></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 class="wrapper">
|
||||
<label v-show="showUpload" for="file">
|
||||
<el-card shadow="hover" class="card">
|
||||
<i class="el-icon-upload"></i>
|
||||
</el-card>
|
||||
</label>
|
||||
<input ref="file" @change="onUploadChange" style="display: none;" type="file" id="file" />
|
||||
<div v-show="!showUpload" class="preview" @mouseenter="showDelete = true" @mouseleave="showDelete = false">
|
||||
<el-card shadow="hover" class="card">
|
||||
<div class="file-type">{{ fileType }}</div>
|
||||
<div class="file-name">{{ formData.fileName }}</div>
|
||||
<div class="delete" v-show="showDelete" @click="handleDelete">
|
||||
<i class="el-icon-delete-solid"></i>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.fileName }}</div>
|
||||
<footer>
|
||||
<el-button type="primary" size="small" @click="handleUpload">上传</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
@ -34,6 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const directories = ['logo', 'recognition', 'txt', 'image', 'pdf']
|
||||
import { getUploadUrl } from '@/api/projectConfig'
|
||||
import { checkIsExist } from '@/api/management/minio'
|
||||
export default {
|
||||
@ -42,14 +45,16 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
showUpload: true,
|
||||
uploadTarget: '',
|
||||
showDelete: false,
|
||||
directories,
|
||||
fileType: '',
|
||||
formData: {
|
||||
directory: '',
|
||||
title: '',
|
||||
fileName: '',
|
||||
},
|
||||
rules: {
|
||||
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.handleDelete()
|
||||
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
|
||||
this.showUpload = false
|
||||
this.formData.title = file.name.split('.')[0]
|
||||
this.formData.fileName = fileList[0].name
|
||||
this.fileType = fileList[0].type.split('/').pop()
|
||||
},
|
||||
handleUpload() {
|
||||
const form = this.$refs.form
|
||||
const file = this.$refs.upload.uploadFiles[0]
|
||||
const file = this.$refs.file.files[0]
|
||||
const params = {
|
||||
directory: this.formData.directory,
|
||||
fileName: file.name,
|
||||
fileName: this.formData.fileName,
|
||||
}
|
||||
form.validate().then(valid => {
|
||||
if (valid && file.size > 0) {
|
||||
checkIsExist(params)
|
||||
.then(resp => resp.data)
|
||||
.then(() => getUploadUrl({ ...params, method: 'PUT' }))
|
||||
.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) {
|
||||
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()
|
||||
handleDelete() {
|
||||
this.$refs.file.value = ''
|
||||
this.showUpload = true
|
||||
this.formData.title = ''
|
||||
this.formData.fileName = ''
|
||||
this.fileType = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -122,14 +124,49 @@ footer {
|
||||
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;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user