vue 分布式上传文件vue-simple-uploader

最新推荐文章于 2024-07-01 10:49:16 发布

原创

最新推荐文章于 2024-07-01 10:49:16 发布 · 711 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #分布式

博客介绍了使用Vue进行分布式上传文件，涉及vue-simple-uploader，还提及在main.js中的相关操作，聚焦于Vue在文件上传方面的分布式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 分布式上传文件vue-simple-uploader

 "vue-simple-uploader": "^0.7.6",

main.js中

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

<template>
  <!-- 分布式上传文件列表 -->
  <div class="files-wrapper">
    <uploader ref="uploader" :options="options" :auto-start="false" :file-status-text="fileStatusText"
      class="uploader-example" @catch-all="onCatchAll" @upload-start="onUploadStart" @file-added="onFileAdded"
      @files-added="onFilesAdded" @file-complete="fileComplete" @files-submitted="filesSubmitted"
      @file-success="(rootFile, file, message) => onFileSuccess(rootFile, file, message)" @file-removed="onFileRemoved"
      @file-error="onFileError" @complete="complete">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <div class="upload-title">

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item @click.native="breadcrumb(item.path + '/')" class="breadcrumb-item"
              v-for="(item, index) in menuItem" :key="index">
              {
   
   {
   
    item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <div class="upload-btn-group">
            <uploader-btn class="uploader-upload-btn">上传文件</uploader-btn>
            <uploader-btn class="uploader-upload-btn" :directory="true">上传文件夹</uploader-btn>
            <el-tooltip effect="dark" content="下载文件缓慢时：请更换网络，或分次下载" placement="bottom">
              <el-button type="primary" size="small" @click="downloadAll">批量下载</el-button>
            </el-tooltip>
            <!-- <el-button type="primary" size="small" @click="downloadAll">批量下载</el-button> -->
            <el-button type="primary" size="small" @click="deleteAll">批量删除</el-button>
          </div>

        </div>
        <div v-show="isShowDropUploadFileLists" class="drog_list">
          <uploader-list>
            <div slot-scope="props" class="file-panel" :class="{ collapse: collapse }">
              <div class="file-title">
                <div class="title">文件列表</div>
                <div class="operate">
                  <el-button type="text" :title="collapse ? '展开' : '折叠'" @click="collapse = !collapse">
                    <i :class="collapse ? 'el-icon-full-screen' : 'el-icon-minus'" />
                  </el-button>
                  <el-button type="text" title="关闭" @click="closeFilesUploadList">
                    <i class="el-icon-close" />
                  </el-button>
                </div>
              </div>
              <ul class="file-list">

                <!-- <div> -->
                <div v-for="(file, i) in props.fileList" :key="i" class="file-info">
                  <uploader-file :list="true" :file="file">
                  </uploader-file>
                  <span>{
   
   {
   
    timeConversion(file._lastProgressCallback) }}</span>
                </div>
                <div v-if="!props.fileList.length" class="no-file">
                  <i class="iconfont icon-empty-file" /> 暂无待上传文件
                </div>
              </ul>
            </div>
          </uploader-list>
        </div>

        <ul class="file-group">
          <li v-for="(item, index) in dataList" :key="index"
            :class="[item['active'] ? 'file-item-active' : 'file-item']" @dblclick="openFolder(item)">
            <img :src="getImageUrl(item.isDir)" :class="item.isDir ? 'folderIcon' : 'fileIcon'" />
            <el-tooltip effect="dark" :content="item.fileName" placement="bottom">
              <span>{
   
   {
   
    item.fileName }}</span>
            </el-tooltip>
            <i class="el-icon-check" v-if="item['active']"></i>

            <el-tooltip effect="dark" content="下载文件缓慢时：请更换网络，或分次下载" placement="right">
              <div class="download-btn" v-if="showDownIcon" @click="handleDownload(item)" />
            </el-tooltip>
            <div v-if="item.fileName !== 'coms_01' && item.fileName !== 'coms_02'" class="remove-btn"
              @click="handleRemove(item.objectName, item.size, item)" />
            <div class="file-mask" @click="selectFiles(item, index)"></div>
          </li>
        </ul>


      </uploader-drop>

    </uploader>



  </div>
</template>

<script>
import * as api from '@/configs/api'

export default {
   
   
  name: 'files',
  data() {
   
   
    return {
   
   
      modelName: '数据',
      menuItem: [],
      dataList: [], // 文件
      folderImg: '/static/img/application/folder.png',
      fileImg: '/static/img/application/file.png',
      options: {
   
   
        // 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、
        // 当前块 Uploader.Chunk 以及是否是测试模式，默认值为 '/'
        target: function (file, chunkFile, mode) {
   
   
          // 分块上传前每次都会进入到该方法
          const key = chunkFile.offset; // 键值 用于获取分块链接URL
          return file.chunkUrlData[key];
        },
        // 为每个块向服务器发出 GET 请求，以查看它是否已经存在。如果在服务器端实现，
        // 这将允许在浏览器崩溃甚至计算机重新启动后继续上传。(默认: true)
        testChunks: false,
        // 分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小，
        // 可见这个 Issue #51，默认 1*1024*1024。
        chunkSize: 5 * 1024 * 1024,
        // 强制所有块小于或等于 chunkSize。否则，最后一个块将大于或等于chunkSize。(默认: false)
        forceChunkSize: true,
        // 服务器分片校验函数 秒传及断点续传的基础(true:不用传 false:需要传)
        // checkChunkUploadedByResponse: (chunk, message) => {
   
   
        // 这里根据实际业务来 用来判断哪些片已经上传过了 不用再重复上传了 [这里可以用来写断点续传！！！]
        //  return false
        // },

        // 包含在带有数据的多部分 POST 中的额外参数。这可以是一个对象或一个函数。如果是一个函数，
        // 它将被传递一个 Uploader.File、一个 Uploader.Chunk 对象和一个 isTest 布尔值（默认值{}：）
        query: function (file, chunkFile, mode) {
   
   
          const data = {
   
    partNumber: chunkFile.offset + 1 };
          return data;
        },
        uploadMethod: "PUT",
        //  当上传的时候所使用的是方式，可选 multipart、octet，默认 multipart，参考 multipart vs octet。
        // MiniO 的分片不能使用表单
        method: "octet",
        //  处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，
        processParams: function (params) {
   
   
          return {
   
   };
        },
        // headers: {
   
   
        //  'Content-Type': 'binary/octet-stream'
        // }
      },
      fileStatusText: {
   
   
        success: "上传成功",
        error: "上传失败",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      },
      isShowDropUploadFileLists: false,
      collapse: false,
      chunkSize: 5 * 1024 * 1024, // 切片大小(b)
      fileSetCode: null, // 修改时的数据集编码
      // fileListVisible: false, // 分布式文件上传列表是否展示
      filePath: '',
      dataSetCode: '', // 文件路径
      showDownIcon: true,
      isAllCover: -1, // 是否选择全部替换(-1:未选择 0：否 1:是)
      timeOut: null,
    }
  },
  props: {
   
   
    // 查询文件路径传参
    filePathUrl: {
   
   
      type: String,
      required: true,
      default: ''
    },
    // 存储类型：其他、论文
    fileType: {
   
   
      type: String,
      required: true,
      default: ''
    },
    metadataInfoCnId: {
   
   
      type: String,
      required: false
    }
  },
  watch: {
   
   
    fileType: {
   
   
      handler(newVal, oldVal) {
   
   
        if (this.menuItem[0]) this.breadcrumb(this.fileType + '/' + this.menuItem[0