文件上传插件开发
This commit is contained in:
parent
95d2059b9b
commit
5d7dc6fc80
|
|
@ -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>;
|
||||
}
|
||||
|
|
@ -110,3 +110,11 @@ export const sessionToken = () => {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const uploadSingleFileToEos = (params) => {
|
||||
return request({
|
||||
url: '/common/uploadSingleFileToEos',
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// 创建一个 AWS.S3 实例
|
||||
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)
|
||||
});
|
||||
let res = uploadSingleToEos(selectedFile, null,{callUploadSuccess,callProgress})
|
||||
console.log(res)
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
Loading…
Reference in New Issue