From 44a3abe105e9b9b4d1a7173772fc9d18c9b59529 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期六, 18 九月 2021 16:24:02 +0800
Subject: [PATCH] 应用中心ui改动
---
src/components/subComponents/FileUpload/index.vue | 173 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 117 insertions(+), 56 deletions(-)
diff --git a/src/components/subComponents/FileUpload/index.vue b/src/components/subComponents/FileUpload/index.vue
index 796d99f..2068da8 100644
--- a/src/components/subComponents/FileUpload/index.vue
+++ b/src/components/subComponents/FileUpload/index.vue
@@ -9,12 +9,46 @@
@file-added="onFileAdded"
@complete="onComplete"
>
- <el-input :placeholder="uploadPlaceholder" size="small" :readonly="true" v-model="fileName">
+ <!-- <uploader-drop v-if="isDrag == true">
+ <div class="drag-txt">鎷栨嫿鏂囦欢鍒拌繖閲�</div>
+ <span class="icon iconfont" @click.stop="showUpload = false"
+ ></span
+ >
+ <uploader-btn>閫夋嫨鏂囦欢</uploader-btn>
+ </uploader-drop> -->
+
+ <div class="up-bar" v-if="isDrag == true">
+ <div class="name">{{ fileName || uploadPlaceholder }}</div>
<uploader-btn slot="suffix">
<el-tooltip :content="tipWords" placement="top" v-if="tip">
- <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>
+ <div class="open-file-btn">
+ <span class="icon iconfont"></span>
+ </div>
</el-tooltip>
- <i v-else class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>
+ </uploader-btn>
+ <!-- <div class="open-file-btn">
+ <span class="icon iconfont"></span>
+ </div> -->
+ </div>
+ <el-input
+ :placeholder="uploadPlaceholder"
+ v-if="isDrag == false"
+ size="small"
+ :readonly="true"
+ v-model="fileName"
+ >
+ <uploader-btn slot="suffix">
+ <el-tooltip :content="tipWords" placement="top" v-if="tip">
+ <i
+ class="el-icon-upload2"
+ style="font-size: 18px; color: #0088ff"
+ ></i>
+ </el-tooltip>
+ <i
+ v-else
+ class="el-icon-upload2"
+ style="font-size: 18px; color: #0088ff"
+ ></i>
</uploader-btn>
</el-input>
<uploader-list />
@@ -32,7 +66,7 @@
@close="closeHandle"
>
<uploader-btn ref="button" :sourceType="sourceType">
- <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>
+ <i class="el-icon-upload2" style="font-size: 18px; color: #0088ff"></i>
涓婁紶
</uploader-btn>
<uploader-list />
@@ -41,16 +75,18 @@
</template>
<script>
-import uploader from "./uploader"
-import SparkMD5 from 'spark-md5';
-import UploaderBtn from "./btn"
-import UploaderList from "./list"
+import uploader from "./uploader";
+import SparkMD5 from "spark-md5";
+import UploaderBtn from "./btn";
+import UploaderList from "./list";
+import UploaderDrop from "./drop";
export default {
components: {
uploader,
UploaderBtn,
- UploaderList
+ UploaderList,
+ UploaderDrop,
},
props: {
sourceType: {
@@ -58,48 +94,47 @@
},
tip: {
type: Boolean,
- default: false
+ default: false,
},
tipWords: {
type: String,
- default: ''
+ default: "",
},
single: {
type: Boolean,
- default: false
+ default: false,
},
uploadPlaceholder: {
type: String,
- default: ''
+ default: "",
+ },
+ isDrag: {
+ type: Boolean,
+ default: false,
},
url: {
type: String,
- default: "/data/api-f/file/upload" //"//192.168.20.10:3000/upload"
+ default: "/data/api-f/file/upload",
},
attrs: {
type: Object,
- default () {
- return {
-
- }
- }
- }
+ default() {
+ return {};
+ },
+ },
},
data() {
return {
fileName: "",
fileMd5: "",
- // attrs: {
- // accept: 'image/*'
- // },
statusText: {
- success: '涓婁紶鎴愬姛',
- error: '涓婁紶澶辫触',
- uploading: '涓婁紶涓�',
- paused: '鏆傚仠涓�',
- waiting: '绛夊緟涓�'
- }
- }
+ success: "涓婁紶鎴愬姛",
+ error: "涓婁紶澶辫触",
+ uploading: "涓婁紶涓�",
+ paused: "鏆傚仠涓�",
+ waiting: "绛夊緟涓�",
+ },
+ };
},
computed: {
uploader() {
@@ -110,32 +145,37 @@
target: this.url,
testChunks: true,
headers: {
- Authorization: sessionStorage.getItem('loginedInfo') && JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
- }
- }
- }
+ Authorization:
+ sessionStorage.getItem("loginedInfo") &&
+ JSON.parse(sessionStorage.getItem("loginedInfo")).access_token,
+ },
+ };
+ },
},
methods: {
onFileAdded(file) {
if (this.single) {
this.uploader.fileList = this.uploader.fileList.slice([-1]);
- this.$emit("file-added")
+ this.$emit("file-added");
}
this.computeMD5(file);
},
computeMD5(file) {
let fileReader = new FileReader();
let time = new Date().getTime();
- let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+ let blobSlice =
+ File.prototype.slice ||
+ File.prototype.mozSlice ||
+ File.prototype.webkitSlice;
let currentChunk = 0;
const chunkSize = 10 * 1024 * 1000;
let chunks = Math.ceil(file.size / chunkSize);
let spark = new SparkMD5.ArrayBuffer();
// 鏂囦欢鐘舵�佽涓�"璁＄畻MD5"
- this.statusText.paused = "鍑嗗涓婁紶,姝ｅ湪妫�鏌ユ枃浠�"
+ this.statusText.paused = "鍑嗗涓婁紶,姝ｅ湪妫�鏌ユ枃浠�";
file.pause();
loadNext();
- fileReader.onload = (e => {
+ fileReader.onload = (e) => {
spark.append(e.target.result);
if (currentChunk < chunks) {
currentChunk++;
@@ -145,16 +185,16 @@
this.computeMD5Success(md5, file);
this.fileName = file.name;
this.fileMd5 = md5;
- // console.log(`MD5璁＄畻瀹屾瘯锛�${file.name} \nMD5锛�${md5} \n鍒嗙墖锛�${chunks} 澶у皬:${file.size} 鐢ㄦ椂锛�${new Date().getTime() - time} ms`);
}
- });
+ };
fileReader.onerror = function () {
- this.error(`鏂囦欢${file.name}璇诲彇鍑洪敊锛岃妫�鏌ヨ鏂囦欢`)
+ this.error(`鏂囦欢${file.name}璇诲彇鍑洪敊锛岃妫�鏌ヨ鏂囦欢`);
file.cancel();
};
function loadNext() {
let start = currentChunk * chunkSize;
- let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+ let end =
+ start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
}
},
@@ -163,32 +203,33 @@
if (location.href.indexOf("dataStack") >= 0) {
Object.assign(this.uploader.opts, {
query: {
- stackId: this.DataStackPool.selectedDir.id
+ stackId: this.DataStackPool.selectedDir.id,
// ...this.params,
- }
- })
+ },
+ });
}
file.uniqueIdentifier = md5;
file.resume();
this.statusText.paused = "鏆傚仠涓�";
},
onComplete() {
- this.$emit("complete", { filename: this.fileName, identifier: this.fileMd5 });
+ this.$emit("complete", {
+ filename: this.fileName,
+ identifier: this.fileMd5,
+ });
},
- fileComplete() {
- // console.log('file complete', arguments)
- },
+ fileComplete() {},
closeHandle() {
- this.$emit("close")
- }
+ this.$emit("close");
+ },
},
mounted() {
+ this.isDrag;
this.$nextTick(() => {
- console.log(this.sourceType)
- window.uploader = this.$refs.uploader.uploader
- })
- }
-}
+ window.uploader = this.$refs.uploader.uploader;
+ });
+ },
+};
</script>
<style lang="scss">
@@ -237,6 +278,26 @@
display: none;
}
}
+
+ .up-bar {
+ height: 30px;
+ margin: 25px;
+ background: #f2f2f7;
+ border-radius: 2px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: 0 20px;
+ .iconfont {
+ font-size: 16px;
+ color: #333;
+ }
+ .name {
+ color: #bdbdbd;
+ font-size: 14px;
+ }
+ }
}
}
</style>>
--
Gitblit v1.8.0