媒体管理-上传压缩文件

Web/env/.env.development

@@ -1,8 +1,14 @@
 # 开发环境配置
 VITE_ENV = 'development'
 
+# # Api 地址
+# VITE_API_URL = 'http://118.195.177.247:6789'
+
+# # WebSocket 地址
+# VITE_WEBSOCKET_URL = 'ws://118.195.177.247:6789/api/v1/ws'
+
 # Api 地址
-VITE_API_URL = 'http://118.195.177.247:6789'
+VITE_API_URL = 'http://192.168.3.218:6789'
 
 # WebSocket 地址
-VITE_WEBSOCKET_URL = 'ws://118.195.177.247:6789/api/v1/ws'
+VITE_WEBSOCKET_URL = 'ws://192.168.3.218:6789/api/v1/ws'

Web/src/pages/page-web/projects/media/detail/components/Search.vue

@@ -67,9 +67,9 @@ import { ref, reactive } from 'vue';
 import { message } from 'ant-design-vue'
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 import router from '/@/router';
-import { ELocalStorageKey } from '/@/types'
 import { getWorkspaceId } from '/@/utils/index'
 import moment from 'moment';
+import { ELocalStorageKey } from '/@/types'
 
 interface Props {
   fetchList: () => Promise<any>,

Web/src/pages/page-web/projects/media/index/components/Search.vue

@@ -1,9 +1,16 @@
 <template>
   <a-row style="margin-bottom: 20px;" justify="space-between">
     <a-col>
-      <a-button type="primary" :disabled="!selectedRowKeys.length" @click="onClickDownload" v-if="mode === 'table'">
+      <a-button style="margin-right: 10px;" type="primary" :disabled="!selectedRowKeys.length" @click="onClickDownload"
+        v-if="mode === 'table'">
         压缩下载
       </a-button>
+      <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()" accept=".rar,.zip" :multiple="false"
+        :showUploadList="false" @change="handleChangeUploadFile" v-if="true">
+        <a-button type="primary">
+          上传
+        </a-button>
+      </a-upload>
     </a-col>
     <a-col>
       <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
@@ -55,11 +62,15 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
+import { message } from 'ant-design-vue'
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 import { apis } from '/@/api/custom';
+import { getWorkspaceId } from '/@/utils';
 import moment from 'moment';
+import { ELocalStorageKey } from '/@/types'
 
 interface Props {
+  fetchList: () => Promise<any>,
   mode: 'table' | 'list',
   selectedRowKeys: string[],
   onClickDownload: () => Promise<any>,
@@ -91,6 +102,15 @@ const state: State = reactive({
   payloadList: [],
 })
 
+const uploadUrl = `/api/media/api/v1/files/${getWorkspaceId()}/file/zip/upload`;
+
+const getHeaders = () => {
+  const token = localStorage.getItem(ELocalStorageKey.Token);
+  return {
+    [ELocalStorageKey.Token]: token,
+  }
+}
+
 onMounted(async () => {
   try {
     const res = await apis.fetchPayloadList();
@@ -106,6 +126,16 @@ onMounted(async () => {
   }
 })
 
+// 上传合成文件
+const handleChangeUploadFile = async (info: any) => {
+  if (info.file.status === 'done') {// 上传成功
+    await props.fetchList()
+    message.success('上传成功');
+  } else if (info.file.status === 'error') {// 上传失败
+    message.error('上传失败');
+  }
+}
+
 // 点击查询
 const handleClickSearch = async () => {
   const values = formRef.value?.getFieldsValue();

Web/src/pages/page-web/projects/media/index/index.vue

@@ -1,8 +1,8 @@
 <template>
   <a-spin :spinning="state.downloadLoading" tip="下载中...">
     <div class="mediaList">
-      <Search :mode="state.mode" :selectedRowKeys="state.selectedRowKeys" :onClickDownload="onClickBatchDownload"
-        :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
+      <Search :fetchList="fetchList" :mode="state.mode" :selectedRowKeys="state.selectedRowKeys"
+        :onClickDownload="onClickBatchDownload" :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
       <div style="background: #FFFFFF;padding: 20px;">
         <div class="mediaList-info">
           <div>
@@ -87,7 +87,7 @@
 
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue';
-import { MenuOutlined, AppstoreOutlined, DownloadOutlined, EnvironmentOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import { MenuOutlined, AppstoreOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
 import fileSrc from '/@/assets/media/file.svg';
 import { apis } from '/@/api/custom';