From da98d2a8a686cde09b20345e4a2b55a85410fde4 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 27 十月 2020 11:31:05 +0800 Subject: [PATCH] 数据栈文件上传动态限制类型调试,标注切换摄像机获取底图 --- src/components/subComponents/FileUpload/index.vue | 56 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/subComponents/FileUpload/index.vue b/src/components/subComponents/FileUpload/index.vue index 685fd8e..779bebb 100644 --- a/src/components/subComponents/FileUpload/index.vue +++ b/src/components/subComponents/FileUpload/index.vue @@ -5,12 +5,13 @@ ref="uploader" :options="options" :file-status-text="statusText" + :attrs="attrs" class="uploader-single" @file-added="onFileAdded" @complete="onComplete" > <el-input :placeholder="uploadPlaceholder" size="small" :readonly="true" v-model="fileName"> - <uploader-btn slot="suffix" > + <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> @@ -23,6 +24,7 @@ <uploader v-else ref="uploader" + :attrs="attrs" :options="options" :file-status-text="statusText" class="uploader-example" @@ -31,7 +33,7 @@ @complete="onComplete" @close="closeHandle" > - <uploader-btn ref="button"> + <uploader-btn ref="button" :attrs="attrs"> <i class="el-icon-upload2" style="font-size:18px; color:#0088ff"></i> 涓婁紶 </uploader-btn> @@ -53,6 +55,10 @@ UploaderList }, props: { + acptTypes: { + type: String, + default: '' + }, tip: { type: Boolean, default: false @@ -73,14 +79,22 @@ type: String, default: "/data/api-f/file/upload" //"//192.168.20.10:3000/upload" }, + attrs: { + type: Object, + // default () { + // return { + + // } + // } + } }, - data() { + data () { return { fileName: "", fileMd5: "", - attrs: { - accept: 'image/*' - }, + // attrs: { + // accept: 'image/*' + // }, statusText: { success: '涓婁紶鎴愬姛', error: '涓婁紶澶辫触', @@ -91,10 +105,10 @@ } }, computed: { - uploader() { + uploader () { return this.$refs.uploader.uploader; }, - options() { + options () { return { target: this.url, testChunks: true, @@ -105,14 +119,14 @@ } }, methods: { - onFileAdded(file) { + onFileAdded (file) { if (this.single) { this.uploader.fileList = this.uploader.fileList.slice([-1]); this.$emit("file-added") } this.computeMD5(file); }, - computeMD5(file) { + computeMD5 (file) { let fileReader = new FileReader(); let time = new Date().getTime(); let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; @@ -141,13 +155,13 @@ this.error(`鏂囦欢${file.name}璇诲彇鍑洪敊锛岃妫�鏌ヨ鏂囦欢`) file.cancel(); }; - function loadNext() { + 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) { + computeMD5Success (md5, file) { // 灏嗚嚜瀹氫箟鍙傛暟鐩存帴鍔犺浇uploader瀹炰緥鐨刼pts涓� // if (this.$route.path.indexOf("VideoManage") >= 0) { // Object.assign(this.uploader.opts, { @@ -170,19 +184,20 @@ file.resume(); this.statusText.paused = "鏆傚仠涓�"; }, - onComplete() { + onComplete () { debugger this.$emit("complete", { filename: this.fileName, identifier: this.fileMd5 }); }, - fileComplete() { + fileComplete () { // console.log('file complete', arguments) }, - closeHandle() { + closeHandle () { this.$emit("close") } }, - mounted() { + mounted () { this.$nextTick(() => { + console.log(this.acptTypes) window.uploader = this.$refs.uploader.uploader }) } @@ -191,10 +206,11 @@ <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 +239,7 @@ display: none; } .uploader-btn { - border: 0px; + border: 0px; } .uploader-file { height: 2px; -- Gitblit v1.8.0