From c5dfaf2d4f16988f7be7f9d65df04c0c0d96b6ce Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 16:35:33 +0800
Subject: [PATCH] 暂存
---
src/components/subComponents/FileUpload/index.vue | 194 ++++++++++++++++++++++++++++++++----------------
1 files changed, 129 insertions(+), 65 deletions(-)
diff --git a/src/components/subComponents/FileUpload/index.vue b/src/components/subComponents/FileUpload/index.vue
index 685fd8e..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-btn slot="suffix" >
+ <!-- <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 />
@@ -31,8 +65,8 @@
@complete="onComplete"
@close="closeHandle"
>
- <uploader-btn ref="button">
- <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i>
+ <uploader-btn ref="button" :sourceType="sourceType">
+ <i class="el-icon-upload2" style="font-size: 18px; color: #0088ff"></i>
涓婁紶
</uploader-btn>
<uploader-list />
@@ -41,54 +75,66 @@
</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: {
+ type: Number,
+ },
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 {};
+ },
},
},
data() {
return {
fileName: "",
fileMd5: "",
- attrs: {
- accept: 'image/*'
- },
statusText: {
- success: '涓婁紶鎴愬姛',
- error: '涓婁紶澶辫触',
- uploading: '涓婁紶涓�',
- paused: '鏆傚仠涓�',
- waiting: '绛夊緟涓�'
- }
- }
+ success: "涓婁紶鎴愬姛",
+ error: "涓婁紶澶辫触",
+ uploading: "涓婁紶涓�",
+ paused: "鏆傚仠涓�",
+ waiting: "绛夊緟涓�",
+ },
+ };
},
computed: {
uploader() {
@@ -99,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++;
@@ -134,67 +185,60 @@
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));
}
},
computeMD5Success(md5, file) {
- // 灏嗚嚜瀹氫箟鍙傛暟鐩存帴鍔犺浇uploader瀹炰緥鐨刼pts涓�
- // if (this.$route.path.indexOf("VideoManage") >= 0) {
- // Object.assign(this.uploader.opts, {
- // query: {
- // stackId: this.DataStackPool.selectedDir.id
- // // ...this.params,
- // }
- // })
- // }
//灏嗚嚜瀹氫箟鍙傛暟鐩存帴鍔犺浇uploader瀹炰緥鐨刼pts涓�
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() {
- debugger
- 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(() => {
- window.uploader = this.$refs.uploader.uploader
- })
- }
-}
+ window.uploader = this.$refs.uploader.uploader;
+ });
+ },
+};
</script>
<style lang="scss">
.file-uploader {
- .el-input__suffix,.el-input__suffix-inner{
- outline: none!important;
+ .el-input__suffix,
+ .el-input__suffix-inner {
+ outline: none !important;
}
- .el-tooltip.focusing{
+ .el-tooltip.focusing {
outline: none;
}
.uploader-example {
@@ -223,7 +267,7 @@
display: none;
}
.uploader-btn {
- border: 0px;
+ border: 0px;
}
.uploader-file {
height: 2px;
@@ -234,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