示例

基础用法

<script setup lang="ts">
import minioPlusHelper from 'minio-plus-helper'
import { ref } from 'vue'

import type { UploadProps } from 'element-plus'
import type { FileState } from 'minio-plus-helper'

type fileListType = {
  name: string
  url: string
  key: string
}
const fileList = ref<fileListType[]>([])
const beforeUploadHandle: UploadProps['beforeUpload'] = async (uploadFile) => {
  const file: Partial<FileState> = await minioPlusHelper.uploadFile(uploadFile)
  fileList.value.push({
    name: file.fileName,
    key: file.fileKey,
  })
  return false
}

const handleDownload: UploadProps['onPreview'] = async (file) => {
  await minioPlusHelper.downloadFile({ fileName: file.name, fileKey: file.key })
}
</script>

<template>
  <el-upload v-model:file-list="fileList" :before-upload="beforeUploadHandle" :on-preview="handleDownload">
    <el-button type="primary">
      Click to upload
    </el-button>
  </el-upload>
</template>

<style scoped lang="scss"></style>

文件权限

通过传递 authorization 和 isPrivate 控制文件上传、下载的权限。

入参

登录用户

文件权限

私有 公用

<script setup lang="ts">
import minioPlusHelper from 'minio-plus-helper'
import { reactive, ref } from 'vue'

import type { UploadProps } from 'element-plus'
import type { FileState } from 'minio-plus-helper'

type fileListType = {
  name: string
  key: string
}
const fileList = ref<fileListType[]>([])

const state = reactive({
  loginUser: 'mockUser01',
  permision: false,
})
const beforeUploadHandle: UploadProps['beforeUpload'] = async (uploadFile) => {
  const file: Partial<FileState> = await minioPlusHelper.uploadFile(uploadFile, {
    authorization: state.loginUser,
    isPrivate: state.permision,
  })
  fileList.value.push({
    name: file.fileName,
    key: file.fileKey,
  })
  return false
}

const handleDownload: UploadProps['onPreview'] = async (file) => {
  await minioPlusHelper.downloadFile({ fileName: file.name, fileKey: file.key }, {
    authorization: state.loginUser,
    isPrivate: state.permision,
  })
}
</script>

<template>
  <el-card style="height: 203px;margin-bottom: 16px;">
    <template #header>
      入参
    </template>
    <el-form :model="state" label-width="auto" style="max-width: 600px">
      <el-form-item label="登录用户">
        <el-input v-model="state.loginUser" />
      </el-form-item>
      <el-form-item label="文件权限">
        <el-radio-group v-model="state.permision">
          <el-radio :value="true">
            私有
          </el-radio>
          <el-radio :value="false">
            公用
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-card>
  <el-upload v-model:file-list="fileList" :before-upload="beforeUploadHandle" :on-preview="handleDownload">
    <el-button type="primary">
      Click to upload
    </el-button>
  </el-upload>
</template>

<style scoped lang="scss"></style>

监听文件上传过程

文件上传过程中，通过回调函数，可以监听文件上传过程。

上传日志

<script setup lang="ts">
import minioPlusHelper from 'minio-plus-helper'
import { ref } from 'vue'

import type { UploadProps } from 'element-plus'
import type { FileState, FileType } from 'minio-plus-helper'

type fileListType = {
  name: string
  url: string
}
type LogItem = {
  time: string
  title: string
  msg?: any
  content?: any
}
const fileList = ref<fileListType[]>([])
const logList = ref<LogItem[]>([])
const beforeUploadHandle: UploadProps['beforeUpload'] = async (uploadFile) => {
  const file: Partial<FileState> = await minioPlusHelper.uploadFile(uploadFile, {}, {
    beforeInitFile,
    afterInitFile,
    beforeUploadPartList,
    afterUploadPartList,
    beforeCompleteFile,
    afterCompleteFile,
    fileUploadFinish,
  })
  fileList.value.push({
    name: file.fileName,
    url: `/api/storage/download/${file.fileKey}`,
  })
  return false
}

const handleDownload: UploadProps['onPreview'] = (file) => {
  if (file.url) {
    fetch(file.url)
      .then(response => response.blob())
      .then((blob) => {
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = file.name
        link.click()
        window.URL.revokeObjectURL(url)
      })
  }
}

function beforeInitFile(file: Partial<FileType>) {
  insertLog('文件初始化', file.fileName, file)
}
function afterInitFile(file: Partial<FileType>, fileState: Partial<FileState>) {
  insertLog('文件初始化结果', file.fileName, fileState)
}
function beforeUploadPartList(file: Partial<FileType>, fileState: Partial<FileState>, index: number, chunkFile: Blob) {
  insertLog('文件分片', file.fileName, chunkFile)
}
function afterUploadPartList(file: Partial<FileType>, fileState: Partial<FileState>, index: number, chunkFile: Blob) {
  insertLog(`第${index}分片上传完成`, file.fileName, chunkFile)
}

function beforeCompleteFile(file: Partial<FileType>, fileState: Partial<FileState>, partMd5List: string[]) {
  insertLog('文件合并前', file.fileName, partMd5List)
}
function afterCompleteFile(file: Partial<FileType>, fileState: Partial<FileState>, partMd5List: string[]) {
  insertLog('文件合并完成', file.fileName, partMd5List)
}
function fileUploadFinish(file: Partial<FileType>, fileState: Partial<FileState>) {
  insertLog('文件上传完成', file.fileName, fileState)
}

function insertLog(title: string, msg: any, content?: any) {
  const date = new Date()

  logList.value.push({
    time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
    title,
    msg,
    content,
  })
}
</script>

<template>
  <el-upload v-model:file-list="fileList" :before-upload="beforeUploadHandle" :on-preview="handleDownload">
    <el-button type="primary">
      Click to upload
    </el-button>
  </el-upload>
  <el-card style="flex:1;overflow-y: auto;">
    <template #header>
      上传日志
    </template>
    <el-collapse>
      <el-collapse-item v-for="(item, index) in logList " :key="index" :name="index">
        <template #title>
          <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">
            {{ `${item.time} =>${item.title}:${item.msg}` }}
          </div>
        </template>
        {{ JSON.stringify(item.content) }}
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<style scoped lang="scss"></style>