文件上传管理 增加复制路径功能
This commit is contained in:
Yuan
parent
d00133aa55
commit
a00e7ebc03
@ -23,13 +23,13 @@ export function handlerUrl() {
|
||||
let OSS_URL;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 开发分支
|
||||
// BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// 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.15:9000'; // 张赛
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 夏增彬
|
||||
// BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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="fileName">
|
||||
<el-input v-model="formData.fileName"></el-input>
|
||||
<el-form-item label="标题" required prop="title">
|
||||
<el-input v-model="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="wrapper">
|
||||
@ -20,14 +20,14 @@
|
||||
<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="file-name">{{ formData.title }}.{{ ext }}</div>
|
||||
<div class="delete" v-show="showDelete" @click="handleDelete">
|
||||
<i class="el-icon-delete-solid"></i>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.fileName }}</div>
|
||||
<div class="path-display">文件存储路径: {{ formData.directory }}/{{ formData.title }}.{{ ext }}</div>
|
||||
<footer>
|
||||
<el-button type="primary" size="small" @click="handleUpload">上传</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
@ -49,13 +49,14 @@ export default {
|
||||
showDelete: false,
|
||||
directories,
|
||||
fileType: '',
|
||||
ext: '',
|
||||
formData: {
|
||||
directory: '',
|
||||
fileName: '',
|
||||
title: '',
|
||||
},
|
||||
rules: {
|
||||
directory: [{ required: true, message: '请选择目录', trigger: 'blur' }],
|
||||
fileName: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -67,14 +68,16 @@ export default {
|
||||
this.show = false
|
||||
this.handleDelete()
|
||||
this.formData.directory = ''
|
||||
this.formData.fileName = ''
|
||||
this.formData.title = ''
|
||||
this.$emit('close')
|
||||
},
|
||||
onUploadChange(e) {
|
||||
const fileList = e.target.files
|
||||
if (!fileList.length) return
|
||||
this.showUpload = false
|
||||
this.formData.fileName = fileList[0].name
|
||||
const devideIndex = fileList[0].name.lastIndexOf('.')
|
||||
this.formData.title = fileList[0].name.slice(0, devideIndex)
|
||||
this.ext = fileList[0].name.slice(devideIndex + 1)
|
||||
this.fileType = fileList[0].type.split('/').pop()
|
||||
},
|
||||
handleUpload() {
|
||||
@ -82,7 +85,7 @@ export default {
|
||||
const file = this.$refs.file.files[0]
|
||||
const params = {
|
||||
directory: this.formData.directory,
|
||||
fileName: this.formData.fileName,
|
||||
fileName: `${this.formData.title}.${this.ext}`,
|
||||
}
|
||||
const execUpload = () => {
|
||||
getUploadUrl({ ...params, method: 'PUT' }).then(res => {
|
||||
@ -90,7 +93,7 @@ export default {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('PUT', url)
|
||||
xhr.upload.onload = () => {
|
||||
saveFileInfo({ ...params, title: params.fileName }).then(res => {
|
||||
saveFileInfo({ ...params, title: this.formData.title }).then(res => {
|
||||
this.$message.success('上传成功')
|
||||
this.doClose()
|
||||
})
|
||||
@ -118,7 +121,7 @@ export default {
|
||||
handleDelete() {
|
||||
this.$refs.file.value = ''
|
||||
this.showUpload = true
|
||||
this.formData.fileName = ''
|
||||
this.formData.title = ''
|
||||
this.fileType = ''
|
||||
},
|
||||
},
|
||||
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
query: this.queryFileList,
|
||||
columns: [
|
||||
{
|
||||
title: '文件名',
|
||||
title: '标题',
|
||||
prop: 'title',
|
||||
},
|
||||
{
|
||||
@ -52,8 +52,13 @@ export default {
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('global.operate'),
|
||||
width: '160',
|
||||
width: '180',
|
||||
buttons: [
|
||||
{
|
||||
name: '复制路径',
|
||||
handleClick: this.copyPath,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
name: '删除',
|
||||
handleClick: this.deleteFile,
|
||||
@ -80,7 +85,7 @@ export default {
|
||||
this.$confirm(`确认删除 "/${row.directory}/${row.title}" 吗?`, this.$t('global.tips')).then(() => {
|
||||
getUploadUrl({
|
||||
directory: row.directory,
|
||||
fileName: row.title,
|
||||
fileName: row.fileName,
|
||||
method: 'DELETE',
|
||||
}).then(resp => {
|
||||
const url = resp.data
|
||||
@ -94,6 +99,13 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
copyPath(idx, row) {
|
||||
const path = `${this.$store.state.user.ossUrl}/${row.directory}/${row.fileName}`
|
||||
console.log(path)
|
||||
navigator.clipboard.writeText(path).then(() => {
|
||||
this.$message.success('文件路径已经复制到粘贴板')
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user