文件上传管理 增加复制路径功能

src/utils/baseUrl.js

@@ -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';

src/views/system/fileUploadManage/create.vue

@@ -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-form-item label="标题" required prop="title">
-				<el-input v-model="formData.fileName"></el-input>
+				<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 = ''
 		},
 	},

src/views/system/fileUploadManage/index.vue

@@ -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>