feat(plan): 阿里云 OSS 集成

.env.development

@@ -17,3 +17,6 @@ VITE_APP_PUBLIC_PATH = '/'
 # 第三方服务回调地址
 VITE_APP_REDIRECT_URL = 'http://localhost:8080/'
 
+# 阿里云 OSS 外链前缀访问资源
+VITE_APP_OSS_PUBLIC_URL = 'https://link-promotion-dev.oss-cn-shanghai.aliyuncs.com/'
+

.env.production

@@ -14,3 +14,5 @@ VITE_APP_PUBLIC_PATH = './'
 # 第三方服务回调地址
 VITE_APP_REDIRECT_URL = 'http://111.198.15.68:86/link/'
 
+# 阿里云 OSS 外链前缀访问资源
+VITE_APP_OSS_PUBLIC_URL = '正式环境 OSS 外链地址'

.env.staging

@@ -13,3 +13,6 @@ VITE_APP_PUBLIC_PATH = './'
 
 # 第三方服务回调地址
 VITE_APP_REDIRECT_URL = 'http://111.198.15.68:85/link/'
+
+# 阿里云 OSS 外链前缀访问资源
+VITE_APP_OSS_PUBLIC_URL = 'https://link-promotion-dev.oss-cn-shanghai.aliyuncs.com/'
\ No newline at end of file

package.json

@@ -19,6 +19,7 @@
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
+    "ali-oss": "^6.22.0",
     "axios": "0.28.1",
     "clipboard": "2.0.11",
     "echarts": "^5.4.0",
@@ -32,6 +33,7 @@
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "splitpanes": "3.1.5",
+    "uuid": "^11.0.5",
     "vue": "^3.5.13",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "1.1.1",

src/api/common/upload.js

+import request from '@/utils/request'
+import OSS from 'ali-oss'
+const ossAuthURL = `${import.meta.env.VITE_APP_PROMOTION}/user/aliyun/signature` // 后台获取阿里云 OSS 权限信息接口
+const ossPublickURL = import.meta.env.VITE_APP_OSS_PUBLIC_URL // OSS 公共域名
+import { v4 as uuidv4 } from 'uuid';
+import store from '@/store'
+
+// OSS 上传文件
+export const uploadFileToOSSAPI = (fileName, filePath) => {
+  return new Promise(async (resolve, reject) => {
+    const authRes = await request({
+      baseURL: ossAuthURL,
+      url: ''
+    })
+    const { policy, security_token: xOssSecurityToken, signature: xOssSignature, x_oss_credential: xOssCredential, x_oss_date: xOssDate, x_oss_signature_version: xOssSignatureVersion } = authRes.data;
+
+    const client = new OSS({
+      // yourRegion填写Bucket所在地域。
+      region: 'oss-cn-shanghai',
+      // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+      accessKeyId: 'yourAccessKeyId',
+      accessKeySecret: 'yourAccessKeySecret',
+      // 从STS服务获取的安全令牌（SecurityToken）。
+      stsToken: xOssSecurityToken,
+      // 刷新临时访问凭证的时间间隔，单位为毫秒。
+      refreshSTSTokenInterval: 300000,
+      // 填写Bucket名称。
+      bucket: 'examplebucket'
+    });
+
+
+    //上传参数
+    const fd = new FormData();
+    fd.append('key', `planExcel/${store.state.name}/${uuidv4()}/` + fileName);
+    fd.append('policy', policy);
+    fd.append('x-oss-signature-version', xOssSignatureVersion);
+    fd.append('x-oss-credential', xOssCredential);
+    fd.append('x-oss-date', xOssDate);
+    fd.append('x-oss-signature', xOssSignature);
+    fd.append('x-oss-security-token', xOssSecurityToken);
+    fd.append('success_action_status', "200");
+    fd.append('file', filePath)
+
+    // 发送请求上传文件 
+    const res = await request({
+      url: `https://${authRes.data.web_js_link}`,
+      data: fd,
+      method: 'PUT',
+      header: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+
+    if (res.statusCode === 200) {
+      console.log('上传成功地址', ossPublickURL + fileName)
+      resolve(ossPublickURL + fileName) // 上传成功
+    } else {
+      reject(res) // 上传失败，返回响应
+    }
+  })
+}
\ No newline at end of file

src/api/index.js

 export * from './common/login'
 export * from './common/menu'
-export * from './common/region'
 export * from './common/openQuery'
+export * from './common/region'
+export * from './common/upload'
 export * from './bi/competitor'
 export * from './bi/finance'
 export * from './bi/livecate'

src/views/promotion/plan/index.vue

@@ -15,9 +15,21 @@
             end-placeholder="结束日期"
             :shortcuts="pickerOptions" />
         </el-form-item>
+        <el-form-item label="上传计划">
+          <el-upload v-model:file-list="fileList"
+            class="upload-demo"
+            action="#"
+            accept=".xls,.xlsx"
+            :http-request="uploadFile"
+            :show-file-list="false"
+            :limit="1">
+            <template #trigger>
+              <el-button type="primary">选择 Excel</el-button>
+            </template>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <!-- 表格列表 -->
-      <!-- 数据表格 -->
       <el-table :data="tableList"
         :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
         border
@@ -39,7 +51,7 @@
 </template>
 
 <script setup>
-import { getPlanListAPI } from '@/api'
+import { getPlanListAPI, uploadFileToOSSAPI } from '@/api'
 import { useDatePickerOptions } from '@/hooks'
 
 const { recentPickerOptions: pickerOptions, last7Date } = useDatePickerOptions(0)
@@ -123,6 +135,12 @@ getPlanList()
 const formatter = (row, col, value) => {
   return value
 }
+
+// 上传计划
+const fileList = ref([])
+const uploadFile = (file) => {
+  uploadFileToOSSAPI(file.file.name, file.file)
+}
 </script>
 
 <style scoped