文件上传插件开发

src/renderer/src/api/file/index.d.ts

@@ -0,0 +1,6 @@
+declare module '@/api/file' {
+  // 定义 uploadFile 函数的类型
+  // export function uploadFile(file: File): Promise<any>;
+  export function sessionToken(): Promise<any>;
+  export function uploadSingleFileToEos(data: SingleUploadData): Promise<any>;
+}

src/renderer/src/api/file/index.js

@@ -110,3 +110,11 @@ export const sessionToken = () => {
     method: 'get'
   })
 }
+
+export const uploadSingleFileToEos = (params) => {
+  return request({
+    url: '/common/uploadSingleFileToEos',
+    method: 'post',
+    params
+  })
+}

src/renderer/src/components/FileUpload/Eos.vue

@@ -5,7 +5,8 @@
 
 <script setup>
 import {ref, onMounted} from "vue"
-import {createSignature, sessionToken} from "@/api/file";
+import {sessionToken} from "@/api/file";
+import {uploadSingleToEos} from '@/utils/fileUpload'
 
 const S3Data = {
   apiVersion: "2006-03-01",
@@ -25,30 +26,24 @@ const handleFileChange = (event)=> {
 
 const uploadMessage = ref(null)
 
+const callUploadSuccess = (e)=> {
+  console.log(e)
+}
+
+const callProgress = (e,p)=> {
+  console.log(e,p)
+}
+
 const uploadFile = ()=>{
   if (selectedFile) {
-    console.log(S3Data)
+    let res = uploadSingleToEos(selectedFile, null,{callUploadSuccess,callProgress})
-    // 创建一个 AWS.S3 实例
+    console.log(res)
-    const s3 = new AWS.S3(S3Data);
-    let params = {
-      Key: selectedFile.name,
-      Bucket: "wzyzoss",
-      ContentType: selectedFile.type,
-      Body: selectedFile
-    }
-    console.log(params)
-    console.log(s3)
-    s3.putObject(params, function (err, data) {
-      console.log(err,data)
-    });
   }
 }
 
 onMounted(()=>{
-  console.log(AWS)
   sessionToken().then(res=>{
     uploadMessage.value = res.data
-    console.log(res.data)
     S3Data.accessKeyId = res.data.accessKeyId
     // S3Data.accessKeyId = "kzOm2cc7nT12ao907Tc"
     S3Data.secretAccessKey = res.data.secretAccessKey

src/renderer/src/layout/components/Aside.vue

@@ -86,7 +86,7 @@ const defaultImg = ['/img/avatar-default.jpg','/images/img-avatar.png','/src/ass
 
 //是否是基地人员
 const isStadium = () => {
-  console.log('isStadium',userStore.roles )
+  // console.log('isStadium',userStore.roles )
   let user = userStore.user
   let roles = user.roles
   return  roles.some(item => item.roleKey === 'stadium')

src/renderer/src/utils/fileUpload.ts

@@ -0,0 +1,160 @@
+import {sessionToken, uploadSingleFileToEos} from "@/api/file";
+import CryptoJS from 'crypto-js'
+import {ElMessageBox} from "element-plus";
+
+/**
+ * @description 回调函数
+ * @param {Function} callGetToken - 获取token回调
+ * @param {Function} callUpload - 成功上传EOS回调
+ * @param {Function} callProgress - 上传进度回调
+ * @param {Function} callUploadSuccess - 完全上传成功回调
+ */
+type CallBack = {
+  callGetToken?: (e:any)=>any;
+  callUploadFile?: (e:any)=>any;
+  callProgress?: (e:any,p:number)=>any;
+  callUploadSuccess?: (e:any)=>any;
+}
+
+/**
+ * @description 简单文件上传参数
+ * @param {string} _bucket - 文件桶
+ * @param {string} id - 文件id
+ * @param {string} filePath - 文件路径
+ * @param {string} fileMd5 - 文件MD5
+ * @param {string} fileNewName - 文件新名字
+ * @param {string} fileName - 文件名
+ * @param {string} fileSize - 文件大小
+ * @param {string} fileSuffix - 文件后缀
+ * @param {string} fileType - 文件类型
+ */
+type SingleUploadData = {
+  _bucket?: string,
+  id?: string,
+  filePath?: string,
+  fileMd5?: string,
+  fileNewName?: string,
+  fileName?: string,
+  fileSize?: number,
+  fileSuffix?: string,
+  fileType?: string,
+}
+
+const S3Data = {
+  apiVersion: "2006-03-01",
+  accessKeyId: "",  // 服务端获取到的 access key ID
+  secretAccessKey: "",   // 服务端获取到的 secret access key
+  endpoint: "",
+  sessionToken: '',
+  signatureVersion: "v2",
+  sslEnabled: true // 是否启用 HTTPS 连接
+}
+
+/**
+ * @description 上传
+ * @param file 文件实体
+ * @param {SingleUploadData} uploadData 文件上传参数
+ * @param {CallBack} callBack - 回调函数
+ */
+const uploadSingleToEos = async (file:File, uploadData: SingleUploadData, callBack?: CallBack) => {
+  console.log(file)
+  //去服务端拿授权
+  let res = await sessionToken().catch((err:any)=>{
+    ElMessageBox.alert(err)
+  });
+  S3Data.accessKeyId = res.data.accessKeyId
+  S3Data.secretAccessKey = res.data.secretAccessKey
+  S3Data.endpoint = res.data.endPoint
+  S3Data.sessionToken = res.data.sessionToken
+
+  uploadData = uploadData?uploadData:{}
+  uploadData._bucket = res.data.bucket
+  //如果文件名不存在，则使用时间戳为名字
+  uploadData.id = crypto.randomUUID();
+  uploadData.fileMd5 = await getFileMD5(file);
+  uploadData.fileName = file.name?file.name:(new Date().getTime()+"");
+  if (uploadData.fileName.lastIndexOf(".") === -1) {
+    uploadData.fileSuffix = ""
+    uploadData.fileNewName = uploadData.id
+  }else {
+    uploadData.fileSuffix = uploadData.fileName.substring(uploadData.fileName.lastIndexOf(".")+1)
+    uploadData.fileNewName = uploadData.id + "." + uploadData.fileSuffix
+  }
+  uploadData.filePath = getEosFileKey(uploadData.id, uploadData.fileSuffix);
+  uploadData.fileSize = file.size
+  uploadData.fileType = file.type
+  console.log(uploadData)
+  //回调获取token
+  callBack?.callGetToken && callBack.callGetToken(res.data)
+
+  //将文件上传到EOS
+  let uploadRes = await uploadFile(file,uploadData,callBack).catch((err)=>{
+    ElMessageBox.alert(err)
+  });
+  if (!uploadRes) return
+  //回调成功上传EOS
+  callBack?.callGetToken && callBack.callGetToken(uploadRes)
+
+  //去服务端确认是否已经完成上传，并保存文件上传信息
+  let saveUploadRes = await uploadSingleFileToEos(uploadData)
+  //回调整个文件上传完成
+  callBack?.callUploadSuccess && callBack.callUploadSuccess(saveUploadRes)
+  return saveUploadRes
+}
+/**
+ * @description 上传文件
+ * @param file 文件实体
+ * @param uploadData 上传文件参数
+ * @param callBack 回调函数
+ */
+const uploadFile = (file:File, uploadData: SingleUploadData,callBack?:CallBack) =>{
+  return new Promise((resolve, reject) => {
+    const s3 = new AWS.S3(S3Data);
+    let params = {
+      Key: uploadData.filePath,
+      Bucket: uploadData._bucket,
+      ContentType: file.type,
+      Body: file
+    }
+    s3.putObject(params, function (err:any, data:any) {
+      if (err) {
+        reject(data)
+      }else {
+        resolve(data)
+      }
+    }).on('httpUploadProgress', function(evt:any) {
+      //回调上传进度
+      callBack?.callProgress && callBack.callProgress(evt,Math.round((evt.loaded / evt.total) * 100));
+    })
+  })
+}
+
+/**
+ * @description 生成EOS文件key
+ * @param uuid 文件id
+ * @param suffix 文件后缀
+ */
+const getEosFileKey = (uuid:string, suffix:string) => {
+  let date = new Date()
+  let year = date.getFullYear()
+  let month = date.getMonth() + 1
+  let day = date.getDate()
+  return year + "/" + month + "/" + day + "/" + uuid + "." + suffix;
+}
+
+/**
+ * @description 生成文件MD5
+ * @param file
+ */
+const getFileMD5 = (file:File):Promise<string> => {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader();
+    reader.readAsArrayBuffer(file);
+    reader.onload = function () {
+      let buffer = reader.result as ArrayBuffer;
+      let md5 = CryptoJS.MD5(buffer).toString();
+      resolve(md5)
+    }
+  })
+}
+export {uploadSingleToEos}