|
@@ -0,0 +1,553 @@
|
|
|
|
+<!--
|
|
|
|
+ * @Author: zhangyu <taohuzy@163.com>
|
|
|
|
+ * @Date: 2019-11-28 10:05:28
|
|
|
|
+ * @Info:
|
|
|
|
+ * @LastEditTime : 2020-01-03 15:31:04
|
|
|
|
+ -->
|
|
|
|
+<template>
|
|
|
|
+ <div id="global-uploader">
|
|
|
|
+ <!-- 上传 -->
|
|
|
|
+ <uploader
|
|
|
|
+ ref="uploader"
|
|
|
|
+ :options="options"
|
|
|
|
+ :fileStatusText="fileStatusText"
|
|
|
|
+ :autoStart="false"
|
|
|
|
+ @file-added="onFileAdded"
|
|
|
|
+ @file-success="onFileSuccess"
|
|
|
|
+ @file-progress="onFileProgress"
|
|
|
|
+ @file-error="onFileError"
|
|
|
|
+ @file-removed="onFileRemoved"
|
|
|
|
+ class="uploader-app"
|
|
|
|
+ >
|
|
|
|
+ <uploader-unsupport></uploader-unsupport>
|
|
|
|
+
|
|
|
|
+ <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">选择文件</uploader-btn>
|
|
|
|
+
|
|
|
|
+ <uploader-list v-show="panelShow">
|
|
|
|
+ <div class="file-panel" slot-scope="props" :class="{ collapse: collapse }">
|
|
|
|
+ <div class="file-title">
|
|
|
|
+ <h2>文件列表</h2>
|
|
|
|
+ <div class="operate">
|
|
|
|
+ <el-button @click="fileListShow" style="color: #999" type="text" :title="collapse ? '折叠' : '展开'">
|
|
|
|
+ <i class="iconfont" :class="collapse ? 'icon-bottom' : 'icon-top'"></i>
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button @click="close" style="color: #999" type="text" title="关闭">
|
|
|
|
+ <i class="iconfont icon-guanbi"></i>
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <ul class="file-list" v-show="collapse">
|
|
|
|
+ <el-scrollbar style="height: 100%">
|
|
|
|
+ <li v-for="file in props.fileList" :key="file.id">
|
|
|
|
+ <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true"></uploader-file>
|
|
|
|
+ </li>
|
|
|
|
+ <div class="no-file" v-if="!props.fileList.length"><i class="iconfont icon-wushuju"></i> 暂无待上传文件</div>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </uploader-list>
|
|
|
|
+ </uploader>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script lang="ts">
|
|
|
|
+/**
|
|
|
|
+ * 全局上传插件
|
|
|
|
+ * 调用方法:Bus.$emit('openUploader', {}) 打开文件选择框,参数为需要传递的额外参数
|
|
|
|
+ * 监听函数:Bus.$on('fileAdded', fn); 文件选择后的回调
|
|
|
|
+ * Bus.$on('fileSuccess', fn); 文件上传成功的回调
|
|
|
|
+ */
|
|
|
|
+
|
|
|
|
+import { Vue, Component, Ref } from "vue-property-decorator";
|
|
|
|
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
+//@ts-ignore
|
|
|
|
+import SparkMD5 from "spark-md5";
|
|
|
|
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
+//@ts-ignore
|
|
|
|
+import uploader from "vue-simple-uploader";
|
|
|
|
+import Bus from "@/utils/bus.ts";
|
|
|
|
+import { AppModule } from "@/store/modules/app";
|
|
|
|
+import { getUploadId, mergeMultipart } from "@/api/imageservice";
|
|
|
|
+
|
|
|
|
+// import request from "@/api/model/file.js";
|
|
|
|
+
|
|
|
|
+@Component({
|
|
|
|
+ name: "GlobalUploader",
|
|
|
|
+})
|
|
|
|
+export default class extends Vue {
|
|
|
|
+ @Ref("uploader") readonly uploader!: uploader;
|
|
|
|
+
|
|
|
|
+ // 中英文按钮映射
|
|
|
|
+ private fileStatusText: any = {
|
|
|
|
+ success: "成功",
|
|
|
|
+ error: "失败",
|
|
|
|
+ uploading: "上传中",
|
|
|
|
+ paused: "暂停",
|
|
|
|
+ waiting: "等待",
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ // 分片上传配置
|
|
|
|
+ private options: any = {
|
|
|
|
+ target: "/image-service/common/multipart_upload",
|
|
|
|
+ chunkSize: 1 * 1024 * 1024,
|
|
|
|
+ fileParameterName: "file",
|
|
|
|
+ allowDuplicateUploads: true, //允许重复上传
|
|
|
|
+ maxChunkRetries: 3,
|
|
|
|
+ testChunks: false, //是否开启服务器分片校验
|
|
|
|
+ // 服务器分片校验函数,秒传及断点续传基础
|
|
|
|
+ // checkChunkUploadedByResponse: function (chunk, message) {
|
|
|
|
+ // let objMessage = JSON.parse(message);
|
|
|
|
+ // if (objMessage.skipUpload) {
|
|
|
|
+ // return true;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
|
|
|
|
+ // },
|
|
|
|
+ // headers: {
|
|
|
|
+ // Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
|
|
|
|
+ // },
|
|
|
|
+ query: this.getFileQuery,
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ private attrs: any = {
|
|
|
|
+ // accept: ACCEPT_CONFIG.getAll()
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ private panelShow = false; // 选择文件后,展示上传panel
|
|
|
|
+ private collapse = false;
|
|
|
|
+
|
|
|
|
+ get uploaderList(): any[] {
|
|
|
|
+ return AppModule.uploaderList;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ mounted() {
|
|
|
|
+ // 刷新或关闭浏览器提示
|
|
|
|
+ window.addEventListener("beforeunload", (e) => {
|
|
|
|
+ if (this.uploader.isUploading()) {
|
|
|
|
+ // 判断是否有文件正在上传
|
|
|
|
+ e.preventDefault();
|
|
|
|
+ // 兼容IE8和Firefox之前的版本
|
|
|
|
+ if (e) {
|
|
|
|
+ e.returnValue = "您有文件正在上传,关闭会中断上传,是否继续?";
|
|
|
|
+ }
|
|
|
|
+ // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
|
|
|
|
+ return "您有文件正在上传,关闭会中断上传,是否继续?";
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ Bus.$on("openUploader", async (query: any, file: any) => {
|
|
|
|
+ if (query.uploadId) {
|
|
|
|
+ // this.params = query || {};
|
|
|
|
+ file.uploadId = query.uploadId;
|
|
|
|
+ file.modelId = query.modelId ? query.modelId : "";
|
|
|
|
+ this.uploader.addFile(file);
|
|
|
|
+ this.setUploaderList(
|
|
|
|
+ this.uploader.files.map((item: any) => {
|
|
|
|
+ item.modelId = item.file.modelId ? item.file.modelId : "";
|
|
|
|
+ return item;
|
|
|
|
+ })
|
|
|
|
+ );
|
|
|
|
+ } else {
|
|
|
|
+ const res = await getUploadId({
|
|
|
|
+ systemId: query.systemId ? query.systemId : "revit",
|
|
|
|
+ secret: query.secret ? query.secret : "63afbef6906c342b",
|
|
|
|
+ overwrite: query.overwrite ? query.overwrite : false,
|
|
|
|
+ key: file.name,
|
|
|
|
+ });
|
|
|
|
+ if (res.UploadId) {
|
|
|
|
+ // this.params = Object.assign(query, { uploadId: res.UploadId }) || {};
|
|
|
|
+ file = Object.assign(file, {
|
|
|
|
+ ...query,
|
|
|
|
+ uploadId: res.UploadId,
|
|
|
|
+ });
|
|
|
|
+ this.uploader.addFile(file);
|
|
|
|
+ this.setUploaderList(
|
|
|
|
+ this.uploader.files.map((item: any) => {
|
|
|
|
+ item.modelId = item.file.modelId ? item.file.modelId : "";
|
|
|
|
+ return item;
|
|
|
|
+ })
|
|
|
|
+ );
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(`请求分片上传接口失败!`);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // if (this.$refs.uploadBtn) {
|
|
|
|
+ // document.getElementById('global-uploader-btn').click();
|
|
|
|
+ // // $('#global-uploader-btn').click();
|
|
|
|
+ // }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ destroyed() {
|
|
|
|
+ Bus.$off("openUploader");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ private onFileAdded(file: any) {
|
|
|
|
+ this.panelShow = true;
|
|
|
|
+ this.collapse = true;
|
|
|
|
+ this.computeMD5(file);
|
|
|
|
+
|
|
|
|
+ Bus.$emit("fileAdded");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ private onFileProgress(rootFile: any, file: any, chunk: any) {
|
|
|
|
+ console.log(`上传中 ${file.name},chunk:${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ private onFileSuccess(rootFile: any, file: any, response: any, chunk: any) {
|
|
|
|
+ console.log(chunk);
|
|
|
|
+ let res = JSON.parse(response);
|
|
|
|
+
|
|
|
|
+ // 服务器自定义的错误(即虽返回200,但是是错误的情况),这种错误是Uploader无法拦截的
|
|
|
|
+ if (!res.Result || res.Result != "success") {
|
|
|
|
+ this.$message({ message: res.ResultMsg ? res.ResultMsg : "上传失败!", type: "error" });
|
|
|
|
+ // 文件状态设为“失败”
|
|
|
|
+ this.statusSet(file.id, "failed");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ // 如果服务端返回需要合并
|
|
|
|
+ console.log("获取分片数", file.chunks.length);
|
|
|
|
+ if (parseInt(res.TotalCount) >= file.chunks.length) {
|
|
|
|
+ // 文件状态设为“合并中”
|
|
|
|
+ this.statusSet(file.id, "merging");
|
|
|
|
+ if (file.file.modelId) {
|
|
|
|
+ //模型文件合并专用接口
|
|
|
|
+ request.mergeModelFile({ ModelId: file.file.modelId, UploadId: file.file.uploadId, Md5: file.file.md5 }, (res) => {
|
|
|
|
+ Bus.$emit("modelStatusChange");
|
|
|
|
+ // 文件合并成功
|
|
|
|
+ Bus.$emit("fileSuccess");
|
|
|
|
+ this.statusRemove(file.id);
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ mergeMultipart(
|
|
|
|
+ {
|
|
|
|
+ systemId: file.file.systemId ? file.file.systemId : "revit",
|
|
|
|
+ secret: file.file.secret ? file.file.secret : "63afbef6906c342b",
|
|
|
|
+ uploadId: file.file.uploadId,
|
|
|
|
+ },
|
|
|
|
+ (res) => {
|
|
|
|
+ // 文件合并成功
|
|
|
|
+ Bus.$emit("fileSuccess");
|
|
|
|
+ this.statusRemove(file.id);
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 不需要合并
|
|
|
|
+ } else {
|
|
|
|
+ Bus.$emit("fileSuccess");
|
|
|
|
+ console.log("上传成功");
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ onFileError(rootFile, file, response, chunk) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: response,
|
|
|
|
+ type: "error",
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ onFileRemoved(file) {
|
|
|
|
+ this.uploaderList.splice(
|
|
|
|
+ this.uploaderList.findIndex((item) => {
|
|
|
|
+ return item.id == file.id;
|
|
|
|
+ }, 1)
|
|
|
|
+ );
|
|
|
|
+ this.setUploaderList(this.uploaderList);
|
|
|
|
+ if (file.modelId && !file.isComplete()) {
|
|
|
|
+ request.deleteModelFileList({ Id: file.modelId, Force: true }, (res) => {
|
|
|
|
+ console.log("删除错误模型:", file.modelId);
|
|
|
|
+ Bus.$emit("modelStatusChange");
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 计算md5,实现断点续传及秒传
|
|
|
|
+ * @param file
|
|
|
|
+ */
|
|
|
|
+ computeMD5(file) {
|
|
|
|
+ let fileReader = new FileReader();
|
|
|
|
+ let time = new Date().getTime();
|
|
|
|
+ let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
|
|
|
|
+ let currentChunk = 0;
|
|
|
|
+ const chunkSize = 1 * 1024 * 1024;
|
|
|
|
+ let chunks = Math.floor(file.size / chunkSize);
|
|
|
|
+ let spark = new SparkMD5.ArrayBuffer();
|
|
|
|
+
|
|
|
|
+ // 文件状态设为"计算MD5"
|
|
|
|
+ this.statusSet(file.id, "md5");
|
|
|
|
+ file.pause();
|
|
|
|
+
|
|
|
|
+ loadNext();
|
|
|
|
+
|
|
|
|
+ fileReader.onload = (e) => {
|
|
|
|
+ spark.append(e.target.result);
|
|
|
|
+
|
|
|
|
+ if (currentChunk < chunks) {
|
|
|
|
+ currentChunk++;
|
|
|
|
+ loadNext();
|
|
|
|
+
|
|
|
|
+ // 实时展示MD5的计算进度
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ document.getElementsByClassName(`myStatus_${file.id}`)[0].innerText =
|
|
|
|
+ "校验MD5 " + ((currentChunk / chunks) * 100).toFixed(0) + "%";
|
|
|
|
+ // $(`.myStatus_${file.id}`).text('校验MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%')
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ let md5 = spark.end();
|
|
|
|
+ file.file.md5 = md5;
|
|
|
|
+ this.computeMD5Success(md5, file);
|
|
|
|
+ console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ fileReader.onerror = function () {
|
|
|
|
+ this.error(`文件${file.name}读取出错,请检查该文件`);
|
|
|
|
+ file.cancel();
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ function loadNext() {
|
|
|
|
+ let start = currentChunk * chunkSize;
|
|
|
|
+ let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
|
|
|
|
+
|
|
|
|
+ fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ computeMD5Success(md5, file) {
|
|
|
|
+ // 将自定义参数直接加载uploader实例的opts上
|
|
|
|
+ console.log(this.uploader);
|
|
|
|
+ // Object.assign(this.uploader.opts, {
|
|
|
|
+ // query: {
|
|
|
|
+ // uploadId: file.file.uploadId,
|
|
|
|
+ // md5
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+
|
|
|
|
+ // file.uniqueIdentifier = this.params.uploadId;
|
|
|
|
+
|
|
|
|
+ // file.resume();//继续上传文件
|
|
|
|
+ // 调用依赖中继续上传的方法达到状态刷新的目的(原生点击继续上传按钮)
|
|
|
|
+ document.querySelector(`.file_${file.id} .uploader-file-resume`).click();
|
|
|
|
+ this.statusRemove(file.id);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //获取文件参数
|
|
|
|
+ getFileQuery(file, chunk) {
|
|
|
|
+ return {
|
|
|
|
+ uploadId: file.file.uploadId,
|
|
|
|
+ md5: file.file.md5,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ fileListShow() {
|
|
|
|
+ this.collapse = this.collapse ? false : true;
|
|
|
|
+
|
|
|
|
+ // let $list = $('#global-uploader .file-list');
|
|
|
|
+ // let $list = document.querySelector('#global-uploader .file-list')
|
|
|
|
+
|
|
|
|
+ // if ($list.style.display == '' && $list.style.display == 'none') {
|
|
|
|
+ // $list.style.display == 'block';//显示
|
|
|
|
+ // this.collapse = false;
|
|
|
|
+ // // $list.slideUp();//隐藏
|
|
|
|
+ // // this.collapse = true;
|
|
|
|
+ // } else {
|
|
|
|
+ // $list.style.display == 'none';//隐藏
|
|
|
|
+ // this.collapse = true;
|
|
|
|
+ // // $list.slideDown();//显示
|
|
|
|
+ // // this.collapse = false;
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+ close() {
|
|
|
|
+ if (this.uploader.isUploading()) {
|
|
|
|
+ this.$alert("您有文件正在上传,关闭会中断上传,是否继续?", "提示", {
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
+ callback: (action) => {
|
|
|
|
+ console.log(action);
|
|
|
|
+ if (action == "confirm") {
|
|
|
|
+ this.uploader.cancel();
|
|
|
|
+ this.panelShow = false;
|
|
|
|
+ this.uploader.files = [];
|
|
|
|
+ this.setUploaderList([]);
|
|
|
|
+ Bus.$emit("modelStatusChange");
|
|
|
|
+ } else {
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.uploader.cancel();
|
|
|
|
+ this.panelShow = false;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
|
|
|
|
+ * @param id
|
|
|
|
+ * @param status
|
|
|
|
+ */
|
|
|
|
+ statusSet(id, status) {
|
|
|
|
+ let statusMap = {
|
|
|
|
+ md5: {
|
|
|
|
+ text: "校验MD5",
|
|
|
|
+ bgc: "#fff",
|
|
|
|
+ },
|
|
|
|
+ merging: {
|
|
|
|
+ text: "合并中",
|
|
|
|
+ bgc: "#e2eeff",
|
|
|
|
+ },
|
|
|
|
+ transcoding: {
|
|
|
|
+ text: "转码中",
|
|
|
|
+ bgc: "#e2eeff",
|
|
|
|
+ },
|
|
|
|
+ failed: {
|
|
|
|
+ text: "上传失败",
|
|
|
|
+ bgc: "#e2eeff",
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ let node = document.createElement("P");
|
|
|
|
+ let att = document.createAttribute("class");
|
|
|
|
+ att.value = `status_style myStatus_${id}`;
|
|
|
|
+ let text = document.createTextNode(`${statusMap[status].text}`);
|
|
|
|
+ node.appendChild(text);
|
|
|
|
+ node.setAttributeNode(att);
|
|
|
|
+ node.style.backgroundColor = `${statusMap[status].bgc}`;
|
|
|
|
+ document.querySelector(`.file_${id} .uploader-file-status`).appendChild(node);
|
|
|
|
+
|
|
|
|
+ // $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
|
|
|
|
+ // 'position': 'absolute',
|
|
|
|
+ // 'top': '0',
|
|
|
|
+ // 'left': '0',
|
|
|
|
+ // 'right': '0',
|
|
|
|
+ // 'bottom': '0',
|
|
|
|
+ // 'zIndex': '1',
|
|
|
|
+ // 'backgroundColor': statusMap[status].bgc
|
|
|
|
+ // }).text(statusMap[status].text);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ statusRemove(id) {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ let dom = document.getElementsByClassName(`myStatus_${id}`)[0];
|
|
|
|
+ dom.parentNode.removeChild(dom);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ error(msg) {
|
|
|
|
+ this.$notify({
|
|
|
|
+ title: "错误",
|
|
|
|
+ message: msg,
|
|
|
|
+ type: "error",
|
|
|
|
+ duration: 2000,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+#global-uploader {
|
|
|
|
+ position: fixed;
|
|
|
|
+ z-index: 101;
|
|
|
|
+ top: auto;
|
|
|
|
+ right: 15px;
|
|
|
|
+ bottom: 0;
|
|
|
|
+
|
|
|
|
+ .uploader-app {
|
|
|
|
+ width: 633px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .file-panel {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
|
+ border-radius: 7px 7px 0 0;
|
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
|
|
+
|
|
|
|
+ .file-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
|
+ h2 {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ cursor: text;
|
|
|
|
+ font-weight: 200;
|
|
|
|
+ color: #666;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operate {
|
|
|
|
+ flex: 1;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .file-list {
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 350px;
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ ::v-deep .el-scrollbar__wrap {
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ > li {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+ :v-deep .uploader-file-info i {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ ::v-deep .status_style {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // &.collapse {
|
|
|
|
+ // .file-title {
|
|
|
|
+ // background-color: #E7ECF2;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .no-file {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uploader-file-icon {
|
|
|
|
+ &:before {
|
|
|
|
+ content: "" !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // &[icon=image] {
|
|
|
|
+ // background: url(./images/image-icon.png);
|
|
|
|
+ // }
|
|
|
|
+ // &[icon=video] {
|
|
|
|
+ // background: url(./images/video-icon.png);
|
|
|
|
+ // }
|
|
|
|
+ // &[icon=document] {
|
|
|
|
+ // background: url(./images/text-icon.png);
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .uploader-file-actions > span {
|
|
|
|
+ margin-right: 6px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+/* 隐藏上传按钮 */
|
|
|
|
+#global-uploader-btn {
|
|
|
|
+ position: absolute;
|
|
|
|
+ clip: rect(0, 0, 0, 0);
|
|
|
|
+}
|
|
|
|
+</style>
|