icve-urc 1.0.0

package/src/components/fileUpload.vue

@@ -0,0 +1,752 @@
+<template>
+  <!-- 文件上传组件容器 -->
+  <div class="dashboard-editor-container">
+    <!-- 文件上传组件 -->
+    <el-upload
+      class="upload-demo"
+      action=""
+      ref="upload"
+      :file-list="fileList"
+      multiple
+      :limit="100"
+      :show-file-list="false"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+      :auto-upload="false"
+      :data="paramsData"
+      drag
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div class="checkbox">
+      <el-checkbox v-model="checked"> </el-checkbox>
+      <span>我已阅读并同意 <i @click="open = true">《文件上传须知》</i></span>
+    </div>
+    <!-- 文件列表滚动区域 -->
+    <div class="wenjian">
+      <!-- 文件列表过渡动画 -->
+      <transition-group
+        class="upload-file-list el-upload-list el-upload-list--text"
+        name="el-fade-in-linear"
+        tag="ul"
+      >
+        <!-- 文件列表项 -->
+        <li
+          :key="index"
+          class="active1"
+          v-for="(file, index) in fileList"
+          @click="qiehuan(file, index)"
+          style="padding: 6px 0"
+        >
+          <!-- 文件信息顶部区域 -->
+          <div class="top">
+            <!-- 文件名称链接 -->
+            <el-link :underline="false">
+              <!-- 文件名称提示 -->
+              <el-tooltip
+                class="item"
+                effect="light"
+                :content="file.name"
+                placement="bottom"
+                :open-delay="1000"
+              >
+                <span class="el-icon-document">
+                  {{ index + 1 }}.{{ file.name }}</span
+                >
+              </el-tooltip>
+            </el-link>
+            <!-- 删除按钮区域 -->
+            <div class="ele-upload-list__item-content-action">
+              <!-- 删除按钮提示 -->
+              <el-tooltip
+                class="item"
+                effect="light"
+                content="删除"
+                placement="bottom"
+                :open-delay="1000"
+              >
+                <i class="el-icon-close" @click.stop="removeFile(index)"></i>
+              </el-tooltip>
+            </div>
+          </div>
+          <!-- 上传进度条 -->
+          <el-progress
+            v-show="progressShow"
+            :percentage="num == index ? percentage : num > index ? 100 : 0"
+          ></el-progress>
+        </li>
+      </transition-group>
+    </div>
+    <el-dialog
+      :visible.sync="open"
+      title="文件上传须知"
+      width="800px"
+      center
+      :modal="false"
+    >
+      <div class="main">
+        <h3>上传须知</h3>
+        <p>
+          1.根据国家《出版管理条例》《网络出版服务管理规定》及教育部《职业教育专业教学资源库建设工作手册》等相关规定，上传的资源必须符合以下要求：
+        </p>
+        <p>
+          （1）没有法律、法规禁止出版的内容，没有政治性、道德性问题和科学性错误，不泄露国家秘密。
+        </p>
+        <p>
+          （2）不含有侵犯他人著作权、肖像权、名誉权等权益的内容，资源具有原创性，引用需指明作者姓名、作品名称，使用他人作品应取得许可。
+        </p>
+        <p>
+          （3）采用法定计量单位，名词、术语、符号等符合国家统一规定，尚无统一规定的，可采用习惯用法并保持一致。
+        </p>
+        <p>
+          （4）地图具有严肃的政治性、严密的科学性和严格的法定性，使用的地图应根据《地图管理条例》的要求已送相关部门审核并标注审图号。
+        </p>
+        <p>2.本系统目前支持以下格式资源：</p>
+        <p>文本类：doc docx xls xlsx pdf txt ppt pptx</p>
+        <p>音视频：m4v mp3 mp4</p>
+        <p>图片：jpg jpeg png bmp gif</p>
+        <p>模型：fbx glb obj stl</p>
+        <p>压缩包：7z rar tar zip</p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          class="bcsc"
+          @click="
+            open = false;
+            checked = true;
+          "
+          >我已阅读并同意</el-button
+        >
+        <el-button @click="open = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getStsMessage, getUploadToken } from "@/api/resourceManagement";
+import { getToken } from "@/utils/auth";
+import axios from "axios";
+import SparkMD5 from "spark-md5"; // 引入MD5计算库
+let uuid = require("uuid"); // 引入uuid生成器
+let OSS = require("ali-oss"); // 引入阿里云OSS SDK
+const parallel = 5; // 同时上传的分片数
+const partSize = 1024 * 1024 * 10; // 每个分片大小(10MB)
+const partSizeTwo = 1024 * 1024 * 2; // 2MB分片大小
+export default {
+  name: "FileUpload",
+  // 组件属性
+  props: {
+    space: [Number], // 空间大小
+    allSpace: [Number], // 总空间大小
+    productId: {
+      type: String,
+      default: "",
+    }, // 产品ID
+    userId: {
+      type: String,
+      default: "",
+    }, // 用户ID
+    params: {
+      type: String,
+      default: "",
+    }, // 上传参数
+  },
+  watch: {
+    params: {
+      handler(newVal) {
+        this.uploadToken.params = newVal;
+        this.getOssUploadToken();
+      },
+    },
+    immediate: true,
+  },
+  // 组件数据
+  data() {
+    return {
+      localSpace: this.space, // 本地空间
+      localAllSpace: this.allSpace, // 本地总空间
+      open: false, // 打开须知
+      button_to_disable: false, // 按钮禁用状态
+      arr: [], // 文件数组
+      file_system_url: "", // 文件系统URL
+      signature: "", // 签名信息
+      paramsData: {}, // 上传参数
+      aListOfShards: [], // 分片列表
+      total: 0, // 总数
+      jzShow: false, // 加载显示
+      progressShow: false, // 进度条显示
+      dialogVisible: false, // 对话框显示
+      fileList: [], // 文件列表
+      checked: false, // 选中状态
+      qxchecked: false, // 取消选中状态
+      file: null, // 当前文件
+      tempCheckpoint: null, // 临时检查点
+      uploadId: "", // 上传ID
+      uploadStatus: null, // 上传状态
+      percentage: 0, // 上传进度
+      uploadName: "", // 上传文件名
+      isLoad: false, // 加载状态
+      partNumber: 1, // 分片序号
+      num: 0, // 当前序号
+      idx: null, // 索引
+      workType: "", // 工作类型
+      size: "", // 文件大小
+      all: 0, // 总计
+      client: null, // OSS客户端
+      CallbackUrl: "", // 回调URL
+      fileType: [
+        "fbx",
+        "glb",
+        "obj",
+        "stl",
+        "7z",
+        "rar",
+        "tar",
+        "zip",
+        "jpg",
+        "jpeg",
+        "png",
+        "ziph",
+        "bmp",
+        "gif",
+        "m4v",
+        "mp3",
+        "mp4",
+        "doc",
+        "docx",
+        "xls",
+        "xlsx",
+        "pdf",
+        "txt",
+        "ppt",
+        "pptx",
+        "html",
+      ],
+      tokenInterval: null, // token刷新定时器
+      uploadToken: {
+        product_id: this.productId,
+        user_id: this.userId,
+        params: this.params,
+      }, // 上传凭证
+      multipartUploadParams: {}, // 分片参数
+      multipartSpace: null, // 分片参数
+    };
+  },
+  // 生命周期钩子
+  created() {
+    // 初始化空间大小
+    this.total = this.localSpace;
+    this.getOssUploadToken();
+  },
+  // 组件销毁时清除定时器
+  destroyed() {
+    if (this.tokenInterval) {
+      clearInterval(this.tokenInterval);
+      this.tokenInterval = null;
+    }
+  },
+  // 组件方法
+  methods: {
+    // 获取上传凭证
+    async getOssUploadToken() {
+      // 定义获取token的函数
+      const getTokenInterval = () => {
+        // 获取上传token
+        getStsMessage(this.uploadToken).then((res) => {
+          if ((res.code = 200)) {
+            this.CallbackUrl = res.data.callbackUrl;
+            this.multipartUploadParams = res.data.callback;
+            this.multipartSpace = res.data.dir;
+            // 初始化OSS客户端
+            this.client = new OSS({
+              region: "oss-cn-hangzhou",
+              accessKeyId: res.data.accessKeyId,
+              accessKeySecret: res.data.accessKeySecret,
+              stsToken: res.data.securityToken,
+              bucket: "icve",
+            });
+          }
+        });
+
+        // 获取上传签名
+        getUploadToken(this.uploadToken).then((res) => {
+          if (res.code == 200) {
+            this.file_system_url = res.data.file_system_url;
+            this.signature = res.data.signature;
+            this.paramsData = {
+              key: this.signature.dir + "/" + this.signature.random + "/",
+              policy: this.signature.policy,
+              OSSAccessKeyId: this.signature.accessId,
+              identity: this.signature.identity,
+              success_action_status: "200",
+              callback: this.signature.callback,
+              signature: this.signature.signature,
+              agent: this.signature.agent,
+              ip: this.signature.ip,
+              "x:space": this.signature.spaceName,
+              "x:identity": this.signature.identity,
+            };
+          }
+        });
+      };
+
+      // 初始获取token
+      getTokenInterval();
+
+      // 设置定时刷新token(30分钟)
+      this.tokenInterval = setInterval(getTokenInterval, 30 * 60 * 1000);
+    },
+    // 删除文件
+    removeFile(idx) {
+      this.$confirm("确定移除该文件?", "删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.fileList.splice(idx, 1);
+      });
+    },
+
+    // 提交上传
+    submitForm() {
+      if (!this.checked) {
+        this.$message.warning("请先阅读并同意《文件上传须知》");
+        return;
+      }
+      if (this.fileList.length === 0) {
+        return this.$message.warning("请选择文件！");
+      }
+      if (this.jzShow) {
+        return this.$message.warning("文件正在上传中，请勿重复提交！");
+      }
+      // 检查空间是否足够
+      // if (this.localSpace > this.localAllSpace) {
+      //   this.fileList = []
+      //   this.localSpace = this.total
+      //   return this.$message.warning('存储空间不足请重新选择文件！')
+      // }
+      this.num = 0;
+      this.jzShow = true;
+      this.progressShow = true;
+      this.button_to_disable = true;
+      this.recursion(this.fileList);
+    },
+
+    // 递归上传文件
+    async recursion(ipArr) {
+      var str = "";
+      var flag = false;
+      // 判断是否需要分片上传
+      let imgSize = Number(ipArr[this.num].raw.size / 1024 / 1024);
+      if (imgSize > 100) {
+        // 大文件分片上传
+        await this.multipartUpload(ipArr[this.num]);
+        this.num++;
+        if (this.num < ipArr.length) {
+          this.recursion(ipArr);
+        } else {
+          if (this.arr.length > 0) {
+            for (let i = 0; i < this.arr.length; i++) {
+              str = str + this.arr[i] + ",";
+            }
+            this.arr = [];
+            flag = true;
+          } else {
+            this.$message.success("上传成功");
+          }
+          setTimeout(() => {
+            this.clear();
+            this.$emit("theUploadIsComplete", flag, str);
+          }, 200);
+        }
+      } else {
+        // 小文件普通上传
+        await this.commonUpload(ipArr[this.num]).then(() => {
+          this.num++;
+          if (this.num < ipArr.length) {
+            this.recursion(ipArr);
+          } else {
+            if (this.arr.length > 0) {
+              for (let i = 0; i < this.arr.length; i++) {
+                str = str + this.arr[i] + ",";
+              }
+              this.arr = [];
+              flag = true;
+            } else {
+              this.$message.success("上传成功");
+            }
+            setTimeout(() => {
+              this.clear();
+              this.$emit("theUploadIsComplete", flag, str);
+            }, 200);
+          }
+        });
+      }
+    },
+    // 上传成功清除数据
+    clear() {
+      this.jzShow = false;
+      this.checked = false;
+      this.num = 0;
+      this.fileList = [];
+    },
+
+    // 普通上传方法
+    async commonUpload(file, idx) {
+      const formData = new FormData();
+      const obj = JSON.parse(JSON.stringify(this.paramsData));
+      obj.key = obj.key + file.raw.name;
+      formData.append("key", obj.key);
+      formData.append("policy", obj.policy);
+      formData.append("OSSAccessKeyId", obj.OSSAccessKeyId);
+      formData.append("success_action_status", obj.success_action_status);
+      formData.append("callback", obj.callback);
+      formData.append("signature", obj.signature);
+      formData.append("x:space", obj["x:space"]);
+      formData.append("x:identity", obj["x:identity"]);
+      formData.append("x:agent", obj.agent);
+      formData.append("x:ip", obj.ip);
+      formData.append("x:product_id", this.uploadToken.product_id);
+      formData.append("x:user_id", this.uploadToken.user_id);
+      if (this.uploadToken.params !== "") {
+        let uploadToken = JSON.parse(this.uploadToken.params);
+        // 循环遍历paramsData对象的属性
+        for (let key in uploadToken) {
+          formData.append(`x:${key}`, uploadToken[key]);
+        }
+      }
+      formData.append("file", file.raw);
+      this.percentage = 0;
+      this.isLoad = true;
+
+      // 发起上传请求
+      let { data } = await axios({
+        headers: {
+          Accept: "*/*",
+          token: getToken(),
+        },
+        method: "post",
+        url: this.file_system_url,
+        data: formData,
+        onUploadProgress: (progressEvent) => {
+          if (progressEvent.lengthComputable) {
+            this.percentage =
+              parseInt((progressEvent.loaded / progressEvent.total) * 100) || 0;
+          }
+        },
+      });
+      if (data.code == 1) {
+        const result = data;
+        this.percentage = 100;
+        result.customName = file.raw.name;
+        result.size = file.raw.size;
+        await this.$emit("successUpLoad", result, file.workType, file.size);
+      } else if (data.code == -1) {
+        this.percentage = 0;
+        this.arr.push(file.name);
+      }
+      this.percentage = 0;
+      this.isLoad = false;
+    },
+    // 分片上传方法
+    async multipartUpload(file, ipArr) {
+      this.percentage = 0;
+      let params = {};
+      if (this.uploadToken.params !== "") {
+        let uploadToken = JSON.parse(this.uploadToken.params);
+        for (let key in uploadToken) {
+          params[`x:${key}`] = uploadToken[key];
+        }
+      }
+      this.uploadStatus = null;
+      this.multipartUploadParams.customValue.file_name = file.raw.name;
+      // console.log(this.multipartUploadParams, "this.multipartUploadParams");
+      try {
+        this.isLoad = true;
+        let result = await this.client.multipartUpload(
+          `${this.multipartSpace}/${uuid
+            .v1()
+            .replace(/-/g, "")}.${file.raw.name.substring(
+            file.raw.name.lastIndexOf(".") + 1
+          )}`,
+          file.raw,
+          {
+            partSize,
+            parallel,
+            progress: (p, checkpoint) => {
+              if (p == 1) {
+              }
+              if (p != 0 && p != 100) {
+                this.percentage = parseInt(Number(p * 100));
+              } else {
+                this.percentage = parseInt(p * 100);
+              }
+            },
+            callback: this.multipartUploadParams,
+          }
+        );
+        this.isLoad = false;
+        if (result.data.code == 1) {
+          this.percentage = 100;
+          result.data.customName = file.raw.name;
+          result.data.size = file.raw.size;
+          await this.$emit(
+            "successUpLoad",
+            result.data,
+            file.workType,
+            file.size
+          );
+        } else if (result.code == -1) {
+          this.percentage = 0;
+          this.arr.push(file.name);
+        }
+      } catch (e) {
+        this.arr.push(file.name);
+        this.isLoad = false;
+        this.percentage = 0;
+        if (e.code === "ConnectionTimeoutError") {
+          this.uploadStatus = "exception";
+        }
+      }
+      // await this.fileMd5Sum(file.raw)
+      //   .then(async (md5) => {})
+      //   .catch(() => {
+      //     this.percentage = 0
+      //     this.arr.push(file.raw.name)
+      //   })
+    },
+    // 计算文件MD5
+    fileMd5Sum(file) {
+      return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        const chunkSize = 1024 * 1024 * 2; //2MB分片
+        const chunks = Math.ceil(file.size / chunkSize);
+        let currentChunk = 0;
+        var spark = new SparkMD5.ArrayBuffer();
+
+        const loadFile = (e) => {
+          spark.append(e.target.result);
+          currentChunk++;
+          if (currentChunk < chunks) {
+            loadNext();
+          } else {
+            const md5 = spark.end();
+            resolve(md5);
+          }
+        };
+
+        const loadError = () => {
+          reject("compute file md5 error");
+        };
+
+        const loadNext = () => {
+          fileReader.onload = loadFile;
+          fileReader.onerror = loadError;
+          const start = currentChunk * chunkSize;
+          const end =
+            start + chunkSize >= file.size ? file.size : start + chunkSize;
+          const data = file.slice(start, end);
+          fileReader.readAsArrayBuffer(data);
+        };
+
+        loadNext();
+      });
+    },
+    // 文件选择变化处理
+    handleChange(file, fileList) {
+      this.file = file.raw;
+      let types = this.file.name;
+      let fileIndex = types.lastIndexOf(".") + 1;
+      let workType = types.substring(fileIndex);
+      // 转换为小写
+      workType = workType.toLowerCase();
+      // 检查文件类型
+      let typeFlag = this.fileType.includes(workType);
+      if (!typeFlag) {
+        this.isLoad = false;
+        this.$message.error("当前作品项请上传" + this.fileType + "格式文件。");
+        return false;
+      } else {
+        file.workType = workType;
+        file.size = this.getFileSize(this.file.size);
+        this.fileList.push(file);
+
+        // 文件列表去重
+        let map = new Map();
+        for (let item of this.fileList) {
+          if (!map.has(item.id)) {
+            map.set(item.name, item);
+          }
+        }
+        this.fileList = [...map.values()];
+
+        // 计算总空间
+        this.fileList.forEach((i) => {
+          this.localSpace = this.localSpace + i.raw.size;
+        });
+      }
+    },
+
+    // 移除文件
+    handleRemove(file, fileList) {
+      this.fileList = [];
+      this.percentage = 0;
+    },
+
+    // 文件大小格式化
+    getFileSize(val) {
+      if (!val) return "";
+      if (val < 102.4) {
+        return val + " B";
+      }
+      let num = val / 1024;
+      if (num > 1024) {
+        num = num / 1024;
+        return num.toFixed(2) + " M";
+      } else {
+        return num.toFixed(2) + " K";
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-progress-bar__outer {
+  width: 100%;
+}
+
+.el-progress-bar {
+  position: relative;
+}
+
+.el-progress__text {
+  position: absolute;
+  right: 0;
+  top: 1px;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+</style>
+<style lang="scss" scoped>
+.checkbox {
+  margin-top: 10px;
+  display: flex;
+  justify-content: end;
+}
+
+.upload-file-list {
+  .el-link {
+    width: 100%;
+    justify-content: start;
+  }
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
+
+  .active1 {
+    padding: 5px 10px !important;
+    margin-bottom: 10px;
+    ::v-deep .el-link--inner {
+      display: block;
+      width: 100%;
+    }
+    span {
+      line-height: normal;
+      width: 90%;
+      color: rgba(0, 0, 0, 1);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .top {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .progress {
+    width: 100%;
+    height: 20px;
+  }
+
+  .active {
+    background: #e72021;
+    padding: 5px 10px !important;
+    margin-bottom: 10px;
+
+    span {
+      color: #fff !important;
+      width: 180px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .ele-upload-list__item-content-action {
+      color: #fff;
+    }
+  }
+}
+.checkbox {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  span {
+    padding-left: 10px;
+    font-size: 16px;
+    color: #666666;
+    i {
+      color: #3e7bfa;
+      cursor: pointer;
+    }
+  }
+}
+.bcsc {
+  background: #3e7bfa;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+}
+.button-box {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+  .bcsc {
+    width: 112px;
+    height: 42px;
+    background: #3e7bfa;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+  }
+  .qx {
+    width: 112px;
+    height: 42px;
+    background: rgba(62, 123, 250, 0);
+    border-radius: 8px;
+    border: 1px solid #dddddd;
+  }
+}
+::v-deep .el-upload {
+  width: 100%;
+  .el-upload-dragger {
+    width: 100%;
+  }
+}
+::v-deep .el-upload-list .el-upload-list--text {
+  background-color: #f7f7f7;
+}
+
+::v-deep .el-upload-list__item-name {
+  background-color: #f7f7f7;
+}
+</style>