From 8e40a69fcfe8bc799fee141fec953a2b0892dbd4 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期一, 09 十月 2023 15:54:26 +0800
Subject: [PATCH] 修改wifi扫描的交互
---
src/pages/ai/FileUpload/index.vue | 608 +++++++++++++++++++++++++++---------------------------
1 files changed, 306 insertions(+), 302 deletions(-)
diff --git a/src/pages/ai/FileUpload/index.vue b/src/pages/ai/FileUpload/index.vue
index 2a8ccf2..a7b8311 100644
--- a/src/pages/ai/FileUpload/index.vue
+++ b/src/pages/ai/FileUpload/index.vue
@@ -1,302 +1,306 @@
-<template>
- <div class="file-uploader">
- <uploader
- v-if="single"
- ref="uploader"
- :options="options"
- :file-status-text="statusText"
- class="uploader-single"
- @file-added="onFileAdded"
- @complete="onComplete"
- >
- <!-- <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">
- <div class="open-file-btn">
- <span class="icon iconfont"></span>
- </div>
- </el-tooltip>
- </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 />
- </uploader>
-
- <uploader
- v-else
- ref="uploader"
- :options="options"
- :file-status-text="statusText"
- class="uploader-example"
- @file-added="onFileAdded"
- @file-complete="fileComplete"
- @complete="onComplete"
- @close="closeHandle"
- >
- <uploader-btn ref="button" :sourceType="sourceType">
- <i class="el-icon-upload2" style="font-size: 18px; color: #0088ff"></i>
- 涓婁紶
- </uploader-btn>
- <uploader-list />
- </uploader>
- </div>
-</template>
-
-<script>
-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,
- UploaderDrop,
- },
- props: {
- sourceType: {
- type: Number,
- },
- tip: {
- type: Boolean,
- default: false,
- },
- tipWords: {
- type: String,
- default: "",
- },
- single: {
- type: Boolean,
- default: false,
- },
- uploadPlaceholder: {
- type: String,
- default: "",
- },
- isDrag: {
- type: Boolean,
- default: false,
- },
- url: {
- type: String,
- default: "/data/api-f/file/upload",
- },
- attrs: {
- type: Object,
- default() {
- return {};
- },
- },
- },
- data() {
- return {
- fileName: "",
- fileMd5: "",
- statusText: {
- success: "涓婁紶鎴愬姛",
- error: "涓婁紶澶辫触",
- uploading: "涓婁紶涓�",
- paused: "鏆傚仠涓�",
- waiting: "绛夊緟涓�",
- },
- };
- },
- computed: {
- uploader() {
- return this.$refs.uploader.uploader;
- },
- options() {
- return {
- target: this.url,
- testChunks: true,
- headers: {
- 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.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 currentChunk = 0;
- const chunkSize = 10 * 1024 * 1000;
- let chunks = Math.ceil(file.size / chunkSize);
- let spark = new SparkMD5.ArrayBuffer();
- // 鏂囦欢鐘舵�佽涓�"璁＄畻MD5"
- this.statusText.paused = "鍑嗗涓婁紶,姝ｅ湪妫�鏌ユ枃浠�";
- file.pause();
- loadNext();
- fileReader.onload = (e) => {
- spark.append(e.target.result);
- if (currentChunk < chunks) {
- currentChunk++;
- loadNext();
- } else {
- let md5 = spark.end();
- this.computeMD5Success(md5, file);
- this.fileName = file.name;
- this.fileMd5 = md5;
- }
- };
- 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瀹炰緥鐨刼pts涓�
- if (location.href.indexOf("dataStack") >= 0) {
- Object.assign(this.uploader.opts, {
- query: {
- 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,
- });
- },
- fileComplete() {},
- closeHandle() {
- this.$emit("close");
- },
- },
- mounted() {
- this.isDrag;
- this.$nextTick(() => {
- window.uploader = this.$refs.uploader.uploader;
- });
- },
-};
-</script>
-
-<style lang="scss">
-.file-uploader {
- .el-input__suffix,
- .el-input__suffix-inner {
- outline: none !important;
- }
- .el-tooltip.focusing {
- outline: none;
- }
- .uploader-example {
- width: 99%;
- // padding: 15px;
- // margin: 40px auto 0;
- font-size: 12px;
- // box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
- background-color: #fff;
- }
- .uploader-example .uploader-btn {
- position: relative;
- display: none;
- // float: right;
- // top: -45px;
- }
- .uploader-example .uploader-list {
- max-height: 440px;
- overflow: auto;
- overflow-x: hidden;
- overflow-y: auto;
- }
- .uploader-single {
- position: unset;
- .close {
- display: none;
- }
- .uploader-btn {
- border: 0px;
- }
- .uploader-file {
- // height: 2px;
- .uploader-file-progress {
- // background: #3d68e1;
- }
- .uploader-file-info {
- // display: none;
- }
- }
-
- .up-bar {
- height: 30px;
- 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>>
+<template>
+ <div class="file-uploader">
+ <uploader
+ v-if="single"
+ ref="uploader"
+ :options="options"
+ :file-status-text="statusText"
+ class="uploader-single"
+ :sourceType="sourceType"
+ @file-added="onFileAdded"
+ @complete="onComplete"
+ >
+ <div class="up-bar" v-if="isDrag == true">
+ <div class="name">{{ fileName || uploadPlaceholder }}</div>
+ <uploader-btn slot="suffix" :attrs="attrs">
+ <el-tooltip :content="tipWords" placement="top" v-if="tip">
+ <div class="open-file-btn">
+ <span class="icon iconfont"></span>
+ </div>
+ </el-tooltip>
+ </uploader-btn>
+ </div>
+ <el-input
+ :placeholder="uploadPlaceholder"
+ v-if="isDrag == false"
+ size="small"
+ :readonly="true"
+ v-model="fileName"
+ >
+ <uploader-btn slot="suffix" :attrs="attrs">
+ <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 />
+ </uploader>
+
+ <uploader
+ v-else
+ ref="uploader"
+ :options="options"
+ :file-status-text="statusText"
+ class="uploader-example"
+ @file-added="onFileAdded"
+ @file-complete="fileComplete"
+ @complete="onComplete"
+ @close="closeHandle"
+ >
+ <uploader-btn ref="button" :sourceType="sourceType">
+ <i class="el-icon-upload2" style="font-size: 18px; color: #0088ff"></i>
+ 涓婁紶
+ </uploader-btn>
+ <uploader-list />
+ </uploader>
+ </div>
+</template>
+
+<script>
+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,
+ UploaderDrop,
+ },
+ props: {
+ sourceType: {
+ type: Number,
+ },
+ tip: {
+ type: Boolean,
+ default: false,
+ },
+ tipWords: {
+ type: String,
+ default: "",
+ },
+ single: {
+ type: Boolean,
+ default: false,
+ },
+ uploadPlaceholder: {
+ type: String,
+ default: "",
+ },
+ isDrag: {
+ type: Boolean,
+ default: false,
+ },
+ url: {
+ type: String,
+ default: "/data/api-f/file/upload",
+ },
+ attrs: {
+ type: Object,
+ default() {
+ return {};
+ },
+ },
+ },
+ data() {
+ return {
+ fileName: "",shouldStop:false,
+ fileMd5: "",
+ statusText: {
+ success: "涓婁紶鎴愬姛",
+ error: "涓婁紶澶辫触",
+ uploading: "涓婁紶涓�",
+ paused: "鏆傚仠涓�",
+ waiting: "绛夊緟涓�",
+ },
+ };
+ },
+ computed: {
+ uploader() {
+ return this.$refs.uploader.uploader;
+ },
+ options() {
+ return {
+ target: this.url,
+ testChunks: true,
+ headers: {
+ Authorization:
+ sessionStorage.getItem("loginedInfo") &&
+ JSON.parse(sessionStorage.getItem("loginedInfo")).access_token,
+ },
+ };
+ },
+ },
+ methods: {
+ onFileAdded(file) {
+ // if (this.sourceType == 3) {
+ // if (
+ // !file.name.endsWith(".tar") ||
+ // !file.name.endsWith(".gz") ||
+ // !file.name.endsWith(".tar.gz")
+ // ) {
+ // this.shouldStop = true
+ // this.$notify.warning("浠呮敮鎸�.tar/.gz/.tar.gz涓夌鏍煎紡鏂囦欢");
+ // return
+ // }
+ // }
+ if (this.single) {
+ this.uploader.fileList = this.uploader.fileList.slice([-1]);
+ 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 currentChunk = 0;
+ const chunkSize = 10 * 1024 * 1000;
+ let chunks = Math.ceil(file.size / chunkSize);
+ let spark = new SparkMD5.ArrayBuffer();
+ // 鏂囦欢鐘舵�佽涓�"璁＄畻MD5"
+ this.statusText.paused = "鍑嗗涓婁紶,姝ｅ湪妫�鏌ユ枃浠�";
+ file.pause();
+ loadNext();
+ fileReader.onload = (e) => {
+ spark.append(e.target.result);
+ if (currentChunk < chunks) {
+ currentChunk++;
+ loadNext();
+ } else {
+ let md5 = spark.end();
+ this.computeMD5Success(md5, file);
+ this.fileName = file.name;
+ this.fileMd5 = md5;
+ }
+ };
+ 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瀹炰緥鐨刼pts涓�
+ if (location.href.indexOf("dataStack") >= 0) {
+ Object.assign(this.uploader.opts, {
+ query: {
+ stackId: this.DataStackPool.selectedDir.id,
+ // ...this.params,
+ },
+ });
+ }
+ file.uniqueIdentifier = md5;
+ file.resume();
+ this.statusText.paused = "鏆傚仠涓�";
+ },
+ onComplete() {
+ if (this.shouldStop) {
+ return
+ }
+ this.$emit("complete", {
+ filename: this.fileName,
+ identifier: this.fileMd5,
+ });
+ },
+ fileComplete() {},
+ closeHandle() {
+ this.$emit("close");
+ },
+ },
+ mounted() {
+ this.isDrag;
+ this.$nextTick(() => {
+ window.uploader = this.$refs.uploader.uploader;
+ });
+ },
+};
+</script>
+
+<style lang="scss">
+.file-uploader {
+ .el-input__suffix,
+ .el-input__suffix-inner {
+ outline: none !important;
+ }
+ .el-tooltip.focusing {
+ outline: none;
+ }
+ .uploader-example {
+ width: 99%;
+ // padding: 15px;
+ // margin: 40px auto 0;
+ font-size: 12px;
+ // box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ background-color: #fff;
+ }
+ .uploader-example .uploader-btn {
+ position: relative;
+ display: none;
+ // float: right;
+ // top: -45px;
+ }
+ .uploader-example .uploader-list {
+ max-height: 440px;
+ overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ .uploader-single {
+ position: unset;
+ .close {
+ display: none;
+ }
+ .uploader-btn {
+ border: 0px;
+ }
+ .uploader-file {
+ // height: 2px;
+ .uploader-file-progress {
+ // background: #3d68e1;
+ }
+ .uploader-file-info {
+ // display: none;
+ }
+ }
+
+ .up-bar {
+ height: 30px;
+ 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