From c041523ff100a6a43ebc4411125a3e566e19f193 Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期五, 24 十一月 2023 14:16:16 +0800
Subject: [PATCH] Changes
---
web/packages/components/zt-uploader/src/zt-uploader.vue | 1199 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 828 insertions(+), 371 deletions(-)
diff --git a/web/packages/components/zt-uploader/src/zt-uploader.vue b/web/packages/components/zt-uploader/src/zt-uploader.vue
index 5fcb43b..a8f22b3 100644
--- a/web/packages/components/zt-uploader/src/zt-uploader.vue
+++ b/web/packages/components/zt-uploader/src/zt-uploader.vue
@@ -4,39 +4,65 @@
<el-upload
ref="upload"
class="upload-input"
- :class="{hide: uploadDisabled || !isShowUpload}"
- :accept="accept"
:action="uploadAction"
- :before-upload="handleBeforeUpload"
:data="data"
- :disabled="uploading"
:drag="false"
:limit="limit"
list-type="text"
:multiple="multiple"
- :name="name"
- :on-change="handleChange"
- :on-error="handleUploadError"
+ :auto-upload="true"
+ :before-upload="handleBeforeUpload"
+ :http-request="checkedFile"
+ :before-remove="removeFile"
:on-exceed="handleExceed"
- :on-success="handleUploadSuccess"
- :on-progress="onUploadProgress"
:show-file-list="false"
:file-list="fileList"
v-if="!image && !crop"
-
>
- <el-button class="upload-btn" size="mini" type="primary" icon="el-icon-upload"
- v-show="!uploadDisabled && isShowUpload">{{ buttonText }}
+ <!-- <el-upload-->
+ <!-- ref="upload"-->
+ <!-- class="upload-input"-->
+ <!-- :class="{hide: uploadDisabled || !isShowUpload}"-->
+ <!-- :accept="accept"-->
+ <!-- :action="uploadAction"-->
+ <!-- :before-upload="handleBeforeUpload"-->
+ <!-- :data="data"-->
+ <!-- :disabled="uploading"-->
+ <!-- :drag="false"-->
+ <!-- :limit="limit"-->
+ <!-- list-type="text"-->
+ <!-- :multiple="multiple"-->
+ <!-- :name="name"-->
+ <!-- :on-change="handleChange"-->
+ <!-- :on-error="handleUploadError"-->
+ <!-- :on-exceed="handleExceed"-->
+ <!-- :on-success="handleUploadSuccess"-->
+ <!-- :on-progress="onUploadProgress"-->
+ <!-- :show-file-list="false"-->
+ <!-- :file-list="fileList"-->
+ <!-- v-if="!image && !crop"-->
+ <!-- :auto-upload="true"-->
+ <!-- :http-request="checkedFile"-->
+ <!-- :before-remove="removeFile"-->
+ <!-- >-->
+ <div style="display:inline-block;width:600px;text-align: center" v-if="onlyUploadFile" class="el-upload__tip">
+ {{computerFileName}}
+ </div>
+ <el-button slot="trigger" v-if="onlyUploadFile" size="small" type="primary">閫夊彇鏂囦欢</el-button>
+ <el-button type="primary" v-if="onlyUploadFile" size="small" style="margin-left:20px" @click="myCheckedFile">鎻� 浜�
</el-button>
+ <el-button class="upload-btn" size="mini" type="primary" icon="el-icon-upload"
+ v-show="!uploadDisabled && isShowUpload && !onlyUploadFile">{{ buttonText }}
+ </el-button>
+
<div slot="tip" class="el-upload__tip" v-show="!uploadDisabled && isShowUpload && tip">{{ tip }}</div>
</el-upload>
-
+ <br/>
<div v-show="progressFlag">
- <el-progress :text-inside="true" :stroke-width="30" :percentage="progressPercent" :format="format"></el-progress>
+ <el-progress :text-inside="true" :stroke-width="30" :percentage="progressPercent" :format="format"></el-progress>
+ </div>
-</div>
-
- <ul class="el-upload-list el-upload-list--text" v-if="!image && !crop && showFileList">
+ <ul class="el-upload-list el-upload-list--text" v-if="!image && !crop && !onlyUploadFile">
<li tabindex="0" class="el-upload-list__item is-success" v-for="(file, index) in uploadList" :key="file.id">
<a class="el-upload-list__item-name" :href="file.url" target="_blank"><i
class="el-icon-document"></i>{{ file.name }}</a>
@@ -71,6 +97,7 @@
:limit="limit"
:list-type="drag ? 'picture' : 'picture-card'"
:multiple="multiple"
+ :name="name"
:on-change="handleChange"
:on-error="handleUploadError"
:on-exceed="handleExceed"
@@ -161,386 +188,816 @@
</template>
<script>
-import Cookies from 'js-cookie'
-import Cropper from 'vue-image-crop-upload'
-import EleGallery from '../../vue-ele-gallery'
+ import Cookies from 'js-cookie'
+ import Cropper from 'vue-image-crop-upload'
+ import EleGallery from '../../vue-ele-gallery'
+ import SparkMD5 from "spark-md5";
+ import axios from "axios";
+ import {getUUID} from "../../../utils";
-export default {
- name: 'ZtUploader',
- props: {
- // 鍊�
- value: {
- type: [Object, Array],
- default() {
- return this.multiple ? [] : null
- }
- },
- action: {
- type: String,
- default: '/sys/oss/upload'
- },
- // 鏄惁涓哄浘鐗�
- image: {
- type: Boolean,
- default: false
- },
- // 鏄惁鍓
- crop: {
- type: Boolean,
- default: false
- },
- // 瑁佸壀楂樺害
- cropHeight: {
- type: Number
- },
- // 瑁佸壀瀹藉害
- cropWidth: {
- type: Number
- },
- // 鏄惁鍚敤鎷栨嫿涓婁紶
- drag: {
- type: Boolean,
- default: false
- },
- // 鏄惁鏀寔澶氶�夋枃浠�
- multiple: {
- type: Boolean,
- default: false
- },
- // 鍥剧墖鏄剧ず澶у皬
- size: {
- type: Number,
- default: 100
- },
- // 澶у皬闄愬埗(MB)
- fileSize: {
- type: Number
- },
- // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => []
- },
- // 缂╃暐鍥惧悗缂�, 渚嬪涓冪墰浜戠缉鐣ュ浘鏍峰紡 (?imageView2/1/w/20/h/20)
- thumbSuffix: {
- type: String,
- default: ''
- },
- // 鏄惁鏄剧ず鎻愮ず
- isShowTip: {
- type: Boolean,
- default: true
- },
- // 寮圭獥鏍囬
- title: String,
- // 鍥剧墖鎳掑姞杞�
- lazy: {
- type: Boolean,
- default: false
- },
- // 鏂囦欢涓暟鏄剧ず
- limit: {
- type: Number,
- default: 10
- },
- // 涓婁紶鏃堕檮甯︾殑棰濆鍙傛暟
- data: Object,
- // 涓婁紶鐨勬枃浠跺瓧娈靛悕
- name: {
- type: String,
- default: 'file'
- },
- // 鎺ュ彈涓婁紶鐨勬枃浠剁被鍨嬶紙thumbnail-mode 妯″紡涓嬫鍙傛暟鏃犳晥锛�
- accept: String,
- buttonText: {
- type: String,
- default: '涓婁紶'
- },
- tip: String,
- showFileList: {
- type: Boolean,
- default: true
- },
- disabled: {
- type: Boolean,
- default: false
- }
- },
- components: {
- Cropper,
- EleGallery
- },
- inject: {
- elForm: {
- default: ''
- }
- },
- data() {
- return {
- progressPercent: 0,
- uploadAction: `${window.SITE_CONFIG['apiURL']}${this.action}?token=${Cookies.get('token')}`,
- cropData: {},
- isShowCrop: false,
- uploading: false,
- fileList: this.getUploadList(this.value),
- uploadList: this.getUploadList(this.value),
- progressFlag:false
- }
- },
- computed: {
- // 鏄惁鏄剧ず鎻愮ず
- showTip() {
- return this.isShowTip && (this.fileType.length || this.fileSize)
- },
- galleryValues() {
- let urls = []
- if (this.value) {
- if (this.multiple) {
- this.value.forEach(v => urls.push({
- src: v.url,
- title: v.name
- }))
- } else {
- urls.push({
- src: this.value.url,
- title: this.value.name
- })
+ export default {
+ name: 'ZtUploader',
+ props: {
+ // 鍊�
+ value: {
+ type: [Object, Array],
+ default() {
+ return this.multiple ? [] : null
}
+ },
+ dataForm: Object,
+ action: {
+ type: String,
+ default: '/sys/oss/uploadNew'
+ },
+ // 鏄惁涓哄浘鐗�
+ showFileList: {
+ type: Boolean,
+ default: true
+ },
+ onlyUploadFile: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁涓哄浘鐗�
+ image: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鍓
+ crop: {
+ type: Boolean,
+ default: false
+ },
+ // 瑁佸壀楂樺害
+ cropHeight: {
+ type: Number
+ },
+ // 瑁佸壀瀹藉害
+ cropWidth: {
+ type: Number
+ },
+ // 鏄惁鍚敤鎷栨嫿涓婁紶
+ drag: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鏀寔澶氶�夋枃浠�
+ multiple: {
+ type: Boolean,
+ default: false
+ },
+ // 鍥剧墖鏄剧ず澶у皬
+ size: {
+ type: Number,
+ default: 100
+ },
+ // 澶у皬闄愬埗(MB)
+ fileSize: {
+ type: Number
+ },
+ // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
+ fileType: {
+ type: Array,
+ default: () => []
+ },
+ // 缂╃暐鍥惧悗缂�, 渚嬪涓冪墰浜戠缉鐣ュ浘鏍峰紡 (?imageView2/1/w/20/h/20)
+ thumbSuffix: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず鎻愮ず
+ isShowTip: {
+ type: Boolean,
+ default: true
+ },
+ // 寮圭獥鏍囬
+ title: String,
+ // 鍥剧墖鎳掑姞杞�
+ lazy: {
+ type: Boolean,
+ default: false
+ },
+ // 鏂囦欢涓暟鏄剧ず
+ limit: {
+ type: Number,
+ default: 10
+ },
+ // 涓婁紶鏃堕檮甯︾殑棰濆鍙傛暟
+ data: Object,
+ // 涓婁紶鐨勬枃浠跺瓧娈靛悕
+ name: {
+ type: String,
+ default: 'file'
+ },
+ // 鎺ュ彈涓婁紶鐨勬枃浠剁被鍨嬶紙thumbnail-mode 妯″紡涓嬫鍙傛暟鏃犳晥锛�
+ accept: String,
+ buttonText: {
+ type: String,
+ default: '涓婁紶'
+ },
+ tip: String,
+ disabled: {
+ type: Boolean,
+ default: false
}
- return urls
},
- isShowUpload() { // 鏄惁鏄剧ず涓婁紶鎸夐挳
- if (this.multiple) {
- return this.uploadList.length < this.limit
+ components: {
+ Cropper,
+ EleGallery
+ },
+ inject: {
+ elForm: {
+ default: ''
+ }
+ },
+ data() {
+ return {
+ isUpload: false,
+ maxSize: 50 * 1024 * 1024 * 1024, // 涓婁紶鏈�澶ф枃浠堕檺鍒� 鏈�灏忓崟浣嶆槸b
+ multiUploadSize: 10 * 1024 * 1024, // 澶т簬杩欎釜澶у皬鐨勬枃浠朵娇鐢ㄥ垎鍧椾笂浼�(鍚庣鍙互鏀寔鏂偣缁紶) 100mb
+ eachSize: 10 * 1024 * 1024, // 姣忓潡鏂囦欢澶у皬 100mb
+ requestCancelQueue: [], // 璇锋眰鏂规硶闃熷垪锛堣皟鐢ㄥ彇娑堜笂浼�
+ // 姣忎笂浼犱竴鍧楃殑杩涘害
+ eachProgress: 0,
+ // 鎬诲叡鏈夊灏戝潡銆傛柇鐐圭画浼犱娇鐢�
+ chunksKeep: 0,
+ // 鍒囧壊鍚庣殑鏂囦欢鏁扮粍
+ fileChunksKeep: [],
+ // 杩欎釜鏂囦欢锛屾柇鐐圭画浼�
+ fileKeep: null,
+ // 鏂偣缁紶锛屾枃浠秏d5
+ fileMd5Keep: "",
+ progressPercent: 0,
+ uploadAction: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload_chunk?token=${Cookies.get('token')}`,
+ uploadCheckAction: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload_success?token=${Cookies.get('token')}`,
+ uploadProcessAction: `${window.SITE_CONFIG['apiURL']}${this.action}?token=${Cookies.get('token')}`,
+ cropData: {},
+ isShowCrop: false,
+ uploading: false,
+ fileList: this.getUploadList(this.value),
+ uploadList: this.getUploadList(this.value),
+ progressFlag: false
+ }
+ },
+ created() {
+ if (this.onlyUploadFile) {
+ this.fileList = [{id: '1', name: '', url: ''}]
} else {
- return this.uploadList.length === 0
+ this.fileList = []
}
},
- uploadDisabled() {
- return this.disabled || (this.elForm || {}).disabled
- },
- successFiles() {
- return this.uploadList.filter((file) => file.status === 'success')
- },
- isShowGrllery() {
- return this.galleryValues.length > 0
- }
- },
- watch: {
- value(val, oldval) {
- if (this.uploadList !== val) {
- this.uploadList = this.getUploadList(val)
- this.fileList = this.getUploadList(val)
- console.log(this.fileList,'this.fileList this.fileList')
- this.$emit('getUploaderImg',this.fileList)
- }
- },
- isShowCrop(value) {
- if (value === false) {
- this.cropData = {}
- }
- }
- },
- methods: {
- format(percentage) {
- return percentage === 100 ? '鍚庡彴姝ｅ湪澶勭悊' : `${percentage}%`;
- },
- // 鑾峰彇宸蹭笂浼犵殑鏂囦欢鍒楄〃
- getUploadList(val) {
- if (val) {
- // console.log(val, 'getUploadList val')
- if (!this.multiple) { // 鍗曢��
- return [val]
- } else {
- // console.log([...val], 'getUploadList [...val]')
- return [...val]
+ computed: {
+ // 鏄惁鏄剧ず鎻愮ず
+ showTip() {
+ return this.isShowTip && (this.fileType.length || this.fileSize)
+ },
+ computerFileName(computerFileName) {
+ let fileName = 'aaaa'
+ if (this.fileList.length > 0) {
+ fileName = this.fileList[0].name
}
- } else {
- return []
- }
- },
- onUploadProgress(event, file, fileList) {
- this.progressFlag = true
- let per = Number(
- ((event.loaded / event.total) * 100).toFixed(2)
- )
- this.progressPercent = per > 100 ? 100 : per
- },
- handleSetFileSet(fileName, fileType, fileSize) {
- const uid = this.cropData.uid || new Date().getTime()
- this.cropData = {
- name: fileName,
- percentage: 0,
- size: fileSize,
- type: fileType,
- status: 'ready',
- uid: uid
- }
- },
- handleCropSuccess(b64Data) {
- this.cropData.url = b64Data
- },
- handleCropUploadError(status) {
- this.$message.error('涓婁紶澶辫触, 璇烽噸璇�')
- this.$emit('error', status)
- },
- handleCropUploadSuccess(response) {
- this.cropData.status = 'success'
- this.cropData.percentage = 100
- this.cropData.response = response
- const file = Object.assign({}, this.cropData)
- this.handleUploadSuccess(response, file)
- },
- // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
- handleBeforeUpload(file) {
- let isAccept = true
- if (this.fileType.length) { // 鏂囦欢绫诲瀷锛堝悗缂�锛変竴鑷�
- let fileExtension = ''
- if (file.name.lastIndexOf('.') > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
- }
- isAccept = this.fileType.some((type) => {
- if (file.type.indexOf(type) > -1) return true
- if (fileExtension && fileExtension.indexOf(type) > -1) return true
- return false
- })
- }
- if (!isAccept) {
- this.$message.error(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join('/')}鏍煎紡鏂囦欢!`)
- return false
- }
- if (this.fileSize) {
- const isLt = file.size / 1024 / 1024 < this.fileSize
- if (!isLt) {
- this.$message.error(`涓婁紶澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`)
- return false
- }
- }
- this.uploading = true
- return true
- },
- handleChange() {
- this.uploading = false
- /*const config = {
- onUploadProgress: (progressEvent) => {
- this.progressPercent = Number(
- ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
- )
- }
- }
- //this.progressFlag = true;
- let form = new FormData();
- form.append("file", params.file);
- this.$http.post( this.uploadAction,form,config ).then((res) => {
- this.progressPercent = 100;
- })*/
- },
- // 鏂囦欢涓暟瓒呭嚭
- handleExceed() {
- this.$message.error(`鏈�澶氫笂浼�${this.limit}涓猔)
- },
- // 涓婁紶澶辫触
- handleUploadError(err) {
- this.uploading = false
- this.$message.error('涓婁紶澶辫触, 璇烽噸璇�')
- this.$emit('error', err)
- },
- // 涓婁紶鎴愬姛鍥炶皟
- handleUploadSuccess(response, file) {
- console.log(response, file,'response, file')
- if (response.code === 0) {
- this.progressPercent = 100
- this.uploading = false
- // this.$message.success('涓婁紶鎴愬姛')
- if (this.multiple) {
- this.uploadList.push(response.data)
- this.$emit('input', this.uploadList)
- } else {
- this.$emit('input', response.data)
- }
- this.progressFlag = false
- this.progressPercent = 0
- }
- },
- async handleRemove(index) {
- let file = this.uploadList[index]
- if (file.status === 1) { // 璇佷功鏂囦欢锛岀洿鎺ヤ粠鍒楄〃鍒犻櫎锛屼笉淇濆瓨鏁版嵁搴�
- this.handRemoveAndSetValue(index)
- } else {
- if (await this.$tip.confirm(this.$t('prompt.info', {'handle': this.$t('delete')}))) {
- let res = await this.$http.delete('/sys/oss', {'data': [file.id]})
- if (res.success) {
- await this.$tip.success()
- this.handRemoveAndSetValue(index)
+ return fileName
+ },
+ galleryValues() {
+ let urls = []
+ if (this.value) {
+ if (this.multiple) {
+ this.value.forEach(v => urls.push({
+ src: v.url,
+ title: v.name
+ }))
+ } else {
+ urls.push({
+ src: this.value.url,
+ title: this.value.name
+ })
}
}
+ return urls
+ },
+ isShowUpload() { // 鏄惁鏄剧ず涓婁紶鎸夐挳
+ if (this.multiple) {
+ return this.uploadList.length < this.limit
+ } else {
+ return this.uploadList.length === 0 || this.onlyUploadFile
+ }
+ },
+ uploadDisabled() {
+ return this.disabled || (this.elForm || {}).disabled
+ },
+ successFiles() {
+ return this.uploadList.filter((file) => file.status === 'success')
+ },
+ isShowGrllery() {
+ return this.galleryValues.length > 0
}
},
- handRemoveAndSetValue(index) {
- if (this.multiple) {
- this.uploadList.splice(index, 1)
- this.$refs.upload.uploadFiles.splice(index, 1)
- this.$emit('input', this.uploadList || [])
- } else {
- this.$emit('input', null)
+ watch: {
+ // eslint-disable-next-line no-unused-vars
+ value(val, oldval) {
+ if (this.uploadList !== val) {
+ this.uploadList = this.getUploadList(val)
+ this.fileList = this.getUploadList(val)
+ if (this.fileList.length>0){
+ console.log(this.fileList[0].status, 'val.files[0].status23')
+ // alert('2222'+this.fileList[0].status)
+ }
+ }
+ },
+ isShowCrop(value) {
+ if (value === false) {
+ this.cropData = {}
+ }
+ }
+ },
+ methods: {
+ format(percentage) {
+ return percentage === 100 ? '鍚庡彴姝ｅ湪澶勭悊' : percentage === 99 ? '姝ｅ湪杩涜鏂囦欢鏍￠獙' : `宸蹭笂浼�${percentage}%`;
+ },
+ // 鑾峰彇宸蹭笂浼犵殑鏂囦欢鍒楄〃
+ getUploadList(val) {
+ if (val) {
+ if (val.length > 0) {
+ if (!this.multiple) { // 鍗曢��
+ console.log(val, 'getUploadList val')
+ return val
+ } else {
+ console.log([...val], 'getUploadList [...val]')
+ return [...val]
+ }
+ } else {
+ return []
+ }
+ }
+ },
+ // eslint-disable-next-line no-unused-vars
+ onUploadProgress(event, file, fileList) {
+ this.progressFlag = true
+ /*let per = Number(
+ ((event.loaded / event.total) * 100).toFixed(2)
+ )
+ this.progressPercent = per > 100 ? 100 : per*/
+ },
+ handleSetFileSet(fileName, fileType, fileSize) {
+ const uid = this.cropData.uid || new Date().getTime()
+ this.cropData = {
+ name: fileName,
+ percentage: 0,
+ size: fileSize,
+ type: fileType,
+ status: 'ready',
+ uid: uid
+ }
+ },
+ handleCropSuccess(b64Data) {
+ this.cropData.url = b64Data
+ },
+ handleCropUploadError(status) {
+ this.$message.error('涓婁紶澶辫触, 璇烽噸璇�')
+ this.$emit('error', status)
+ },
+ handleCropUploadSuccess(response) {
+ console.log(response, 'handleCropUploadSuccess response')
+ this.cropData.status = 'success'
+ this.cropData.percentage = 100
+ this.cropData.response = response
+ const file = Object.assign({}, this.cropData)
+ this.handleUploadSuccess(response, file)
+ },
+ // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
+ handleBeforeUpload(file) {
+ let isAccept = true
+ if (this.fileType.length) { // 鏂囦欢绫诲瀷锛堝悗缂�锛変竴鑷�
+ let fileExtension = ''
+ if (file.name.lastIndexOf('.') > -1) {
+ fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+ }
+ isAccept = this.fileType.some((type) => {
+ if (file.type.indexOf(type) > -1) return true
+ if (fileExtension && fileExtension.indexOf(type) > -1) return true
+ return false
+ })
+ }
+ if (!isAccept) {
+ this.$message.error(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join('/')}鏍煎紡鏂囦欢!`)
+ return false
+ }
+ if (this.fileSize) {
+ const isLt = file.size / 1024 / 1024 < this.fileSize
+ if (!isLt) {
+ this.$message.error(`涓婁紶澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`)
+ return false
+ }
+ }
+ if (this.dataForm) {
+ // eslint-disable-next-line vue/no-mutating-props
+ this.dataForm.hasUploadFinsh = 50
+ }
+ this.uploading = true
+ return true
+ },
+ async handleChange() {
+ this.uploading = false
+ /*const config = {
+ onUploadProgress: (progressEvent) => {
+ this.progressPercent = Number(
+ ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
+ )
+ }
+ }
+ //this.progressFlag = true;
+ let form = new FormData();
+ form.append("file", params.file);
+ this.$http.post( this.uploadAction,form,config ).then((res) => {
+ this.progressPercent = 100;
+ })*/
+ },
+ // 鏂囦欢涓暟瓒呭嚭
+ handleExceed(files, fileList) {
+ if (this.onlyUploadFile) {
+ this.$set(fileList[0], 'raw', files[0])
+ this.$set(fileList[0], 'name', files[0].name)
+ /* this.$refs.upload.clearFiles()
+ this.$refs.upload.handleStart(files[0])*/
+ }
+ //this.$message.error(`鏈�澶氫笂浼�${this.limit}涓猔)
+ },
+ // 涓婁紶澶辫触
+ handleUploadError(err) {
+ this.uploading = false
+ this.$message.error('涓婁紶澶辫触, 璇烽噸璇�')
+ this.$emit('error', err)
+ },
+ // 涓婁紶鎴愬姛鍥炶皟
+ // eslint-disable-next-line no-unused-vars
+ handleUploadSuccess(response, file) {
+ console.log(response, 'handleUploadSuccess response')
+ if (response.code === 0) {
+ this.progressPercent = 100
+ this.uploading = false
+ // this.$message.success('涓婁紶鎴愬姛')
+ if (this.multiple) {
+ this.uploadList.push(response.data)
+ this.$emit('input', this.uploadList)
+ } else {
+ this.$emit('input', response.data)
+ }
+ this.progressFlag = false
+ this.progressPercent = 0
+ }
+ },
+ async handleRemove(index) {
+ let file = this.uploadList[index]
+ if (file.status === 1) { // 璇佷功鏂囦欢锛岀洿鎺ヤ粠鍒楄〃鍒犻櫎锛屼笉淇濆瓨鏁版嵁搴�
+ this.handRemoveAndSetValue(index)
+ } else {
+ if (await this.$tip.confirm(this.$t('prompt.info', {'handle': this.$t('delete')}))) {
+ let res = await this.$http.delete('/sys/oss', {'data': [file.id]})
+ if (res.success) {
+ await this.$tip.success()
+ this.handRemoveAndSetValue(index)
+ }
+ }
+ }
+ },
+ handRemoveAndSetValue(index) {
+ console.log(index, 'handRemoveAndSetValue')
+ if (this.multiple) {
+ this.uploadList.splice(index, 1)
+ this.$refs.upload.uploadFiles.splice(index, 1)
+ this.$emit('input', this.uploadList || [])
+ } else {
+ this.$emit('input', null)
+ }
+ },
+ nullFunction(param) {
+ },
+ //寮�濮嬪垎鐗囦笂浼爉yCheckedFile
+ async myCheckedFile() {
+ if (!this.handleBeforeUpload(this.fileList[0].raw))
+ return
+ let options = {
+ file: this.fileList[0].raw,
+ onProgress: function (val) {
+ },
+ onSuccess: function (val) {
+ },
+ onError: function (val) {
+ }
+ }
+ await this.checkedFile(options)
+ },
+ async checkedFile(options) {
+ if (!this.isUpload) {
+ this.isUpload = true;
+ } else {
+ return this.$message({
+ message: `褰撳墠鏂囦欢姝ｅ湪涓婁紶`,
+ type: "warning"
+ });
+ }
+ this.progressFlag = true
+ const {
+ maxSize,
+ multiUploadSize,
+ getSize,
+ splitUpload,
+ singleUpload
+ } = this; // 瑙ｆ瀯璧嬪��
+ const {file, onProgress, onSuccess, onError} = options; // 瑙ｆ瀯璧嬪��
+
+ file.uid = getUUID().toString()
+ if (file.size > maxSize) {
+ return this.$message({
+ message: `鎮ㄩ�夋嫨鐨勬枃浠跺ぇ浜�${getSize(maxSize)}`,
+ type: "error"
+ });
+ }
+ this.fileKeep = file;
+ const uploadFunc =
+ file.size > multiUploadSize ? splitUpload : singleUpload; // 閫夋嫨涓婁紶鏂瑰紡
+ try {
+ await uploadFunc(file, onProgress);
+ onSuccess();
+ } catch (e) {
+ console.error(e);
+ this.$message({
+ message: e.message,
+ type: "error"
+ });
+ this.progressFlag = false;
+ this.progressPercent = 0;
+ onError();
+ }
+ },
+ // 鏍煎紡鍖栨枃浠跺ぇ灏忔樉绀烘枃瀛�
+ getSize(size) {
+ return size > 1024
+ ? size / 1024 > 1024
+ ? size / (1024 * 1024) > 1024
+ ? (size / (1024 * 1024 * 1024)).toFixed(2) + "GB"
+ : (size / (1024 * 1024)).toFixed(2) + "MB"
+ : (size / 1024).toFixed(2) + "KB"
+ : size.toFixed(2) + "B";
+ },
+ // 鍗曟枃浠剁洿鎺ヤ笂浼�
+ async singleUpload(file, onProgress) {
+ await this.postFile(
+ {file, uid: file.uid, fileName: file.fileName, chunk: 0},
+ onProgress
+ );
+ const reader = new FileReader();
+
+ reader.readAsArrayBuffer(file);
+ console.log(file, 'singleUpload file');
+ let hashMd5 = "";
+ console.log(hashMd5);
+ const that = this;
+
+ function getHash(cb) {
+ console.log(cb, "杩涘叆鍗曚釜涓婁紶鐨刧etHash");
+ console.log("杩涘叆鍗曚釜涓婁紶鐨刧etHash");
+ reader.onload = function (e) {
+ console.log("杩涘叆鍗曚釜涓婁紶鐨刧etHash鐨勫嚱鏁�2");
+ console.log(hashMd5);
+ console.log(this);
+ // console.log(e)
+ const hash = SparkMD5.ArrayBuffer.hash(e.target.result, false);
+ console.log(e.target.result, 'e.target.result');
+ console.log(hash, 'hash');
+ that.hashMd5 = hash;
+ console.log(that.hashMd5, 'hashMd5');
+ that.fileMd5Keep = hash;
+ cb(hash);
+ };
+ }
+
+ await getHash(function (hash) {
+ console.log(hash, 'getHash(function (hash) hash');
+ console.log(that, 'getHash(function (hash) that');
+ // 璇锋眰鎺ュ彛
+ that.validateFile({
+ name: file.name,
+ uid: file.uid,
+ md5: hash,
+ chunks: 1,
+ filter_type: "user_data_file"
+ });
+ });
+ },
+
+ // 澶ф枃浠跺垎鍧椾笂浼�
+ splitUpload(file, onProgress) {
+ console.log(file, 'splitUpload(file');
+ // eslint-disable-next-line no-async-promise-executor
+ return new Promise(async (resolve, reject) => {
+ try {
+ const {eachSize} = this;
+ const chunks = Math.ceil(file.size / eachSize);
+ this.chunksKeep = chunks;
+ const fileChunks = await this.splitFile(file, eachSize, chunks);
+ this.fileChunksKeep = fileChunks;
+ //鍒ゆ柇姣忎笂浼犱竴涓枃浠讹紝杩涘害鏉℃定澶氬皯,淇濈暀涓や綅灏忔暟
+ this.eachProgress = 100 / chunks;
+ this.progressFlag = true;
+ let currentChunk = 0;
+ let percent = 0;
+ for (let i = 0; i < fileChunks.length; i++) {
+ // 鏈嶅姟绔娴嬪凡缁忎笂浼犲埌绗琧urrentChunk鍧椾簡锛岄偅灏辩洿鎺ヨ烦鍒扮currentChunk鍧楋紝瀹炵幇鏂偣缁紶
+ // 姝ゆ椂闇�瑕佸垽鏂繘搴︽潯
+ if (Number(currentChunk) === i) {
+ // 姣忓潡涓婁紶瀹屽悗鍒欒繑鍥為渶瑕佹彁浜ょ殑涓嬩竴鍧楃殑index
+ await this.postFile(
+ {
+ chunked: true,
+ chunk: i,
+ chunks,
+ eachSize,
+ fileName: file.name,
+ fullSize: file.size,
+ uid: file.uid,
+ file: fileChunks[i]
+ },
+ onProgress
+ );
+ currentChunk++;
+
+ // 涓婁紶瀹屼竴鍧楀悗锛岃繘搴︽潯澧炲姞
+ percent = percent + this.eachProgress;
+ // 涓嶈兘瓒呰繃100
+ this.progressPercent = percent > 100 ? 99 : Math.floor(percent);
+ }
+ }
+ const spark = new SparkMD5.ArrayBuffer();
+ let currentChunkMd5 = 0;
+ const that = this;
+ const reader = new FileReader();
+ reader.onload = async function (e) {
+ spark.append(e.target.result);
+ currentChunkMd5++;
+
+ if (currentChunkMd5 < chunks) {
+ await loadNext();
+ } else {
+ // console.log(spark.end());
+ const hashMd5111 = spark.end();
+ that.fileMd5Keep = hashMd5111;
+ // 鍦ㄨ繖閲岃姹傛帴鍙�
+ await that.validateFile({
+ name: file.name,
+ uid: file.uid,
+ md5: hashMd5111,
+ chunks: fileChunks.length,
+ filter_type: "git_secret_file"
+ });
+ }
+ };
+
+ // eslint-disable-next-line no-inner-declarations
+ async function loadNext() {
+ const start = currentChunkMd5 * eachSize;
+ const end =
+ start + eachSize >= file.size ? file.size : start + eachSize;
+ await reader.readAsArrayBuffer(file.slice(start, end));
+ }
+
+ await loadNext();
+ resolve();
+ } catch (error) {
+ reject(error);
+ }
+ });
+ },
+ // 鏂偣缁紶
+ againSplitUpload(file, array) {
+ console.log("file,array");
+ console.log(file);
+ console.log(array);
+ // eslint-disable-next-line no-async-promise-executor
+ return new Promise(async (resolve, reject) => {
+ try {
+ // eslint-disable-next-line no-unused-vars
+ const {eachSize, fileKeep} = this;
+ const chunks = this.chunksKeep;
+ const fileChunks = this.fileChunksKeep;
+ this.progressFlag = true;
+ // let currentChunk = 0;
+ for (let i = 0; i < array.length; i++) {
+ // 鏈嶅姟绔娴嬪凡缁忎笂浼犲埌绗琧urrentChunk鍧椾簡锛岄偅灏辩洿鎺ヨ烦鍒扮currentChunk鍧楋紝瀹炵幇鏂偣缁紶
+ // 姝ゆ椂闇�瑕佸垽鏂繘搴︽潯
+ // 姣忓潡涓婁紶瀹屽悗鍒欒繑鍥為渶瑕佹彁浜ょ殑涓嬩竴鍧楃殑index
+ await this.postFile({
+ chunked: true,
+ chunk: array[i],
+ chunks,
+ name: file.name,
+ fullSize: fileKeep.size,
+ uid: file.uid,
+ file: fileChunks[array[i]]
+ });
+ // currentChunk++
+
+ // 涓婁紶瀹屼竴鍧楀悗锛岃繘搴︽潯澧炲姞
+ this.progressPercent += this.eachProgress;
+ // 涓嶈兘瓒呰繃100
+ this.progressPercent = this.progressPercent > 100 ? 100 : this.progressPercent;
+ }
+ let fileMd5KeepTwo = this.fileMd5Keep;
+
+ const isValidate = await this.validateFile({
+ name: file.name,
+ uid: file.uid,
+ md5: fileMd5KeepTwo,
+ chunks: fileChunks.length,
+ filter_type: "git_secret_file"
+ });
+ if (!isValidate) {
+ throw new Error("鏂囦欢鏍￠獙寮傚父");
+ }
+ // 鍏抽棴杩涘害鏉�
+ this.progressFlag = false;
+ // 閲嶇疆杩涘害鏉�
+ this.progressPercent = 0;
+ resolve();
+ } catch (e) {
+ reject(e);
+ }
+ });
+ },
+ // 鏂囦欢鍒嗗潡,鍒╃敤Array.prototype.slice鏂规硶
+ splitFile(file, eachSize, chunks) {
+ return new Promise((resolve, reject) => {
+ try {
+ setTimeout(() => {
+ const fileChunk = [];
+ for (let chunk = 0; chunks > 0; chunks--) {
+ fileChunk.push(file.slice(chunk, chunk + eachSize));
+ chunk += eachSize;
+ }
+ resolve(fileChunk);
+ }, 0);
+ } catch (e) {
+ console.error(e);
+ reject(new Error("鏂囦欢鍒囧潡鍙戠敓閿欒"));
+ }
+ });
+ },
+ removeFile(file) {
+ this.requestCancelQueue[file.uid]();
+ delete this.requestCancelQueue[file.uid];
+ return true;
+ },
+ // 鎻愪氦鏂囦欢鏂规硶,灏嗗弬鏁拌浆鎹负FormData, 鐒跺悗閫氳繃axios鍙戣捣璇锋眰
+ postFile(param, onProgress) {
+ const formData = new FormData();
+ formData.append("file", param.file); // 鏀逛簡
+ formData.append("fileName", param.fileName); // 鏀逛簡
+ formData.append("uid", param.uid);
+ formData.append("chunk", param.chunk);
+ formData.append("filter_type", "git_secret_file");
+ formData.append("chunks", param.chunks);
+ const {requestCancelQueue} = this;
+ const config = {
+ cancelToken: new axios.CancelToken(function executor(cancel) {
+ if (requestCancelQueue[param.uid]) {
+ requestCancelQueue[param.uid]();
+ delete requestCancelQueue[param.uid];
+ }
+ requestCancelQueue[param.uid] = cancel;
+ }),
+ onUploadProgress: e => {
+ if (param.chunked) {
+ e.percent = Number(
+ (
+ ((param.chunk * (param.eachSize - 1) + e.loaded) /
+ param.fullSize) *
+ 100
+ ).toFixed(2)
+ );
+ } else {
+ e.percent = Number(((e.loaded / e.total) * 100).toFixed(2));
+ }
+ onProgress(e)
+ }
+ }
+ //return axios.post('sys/oss/upload_chunk/', formData, config).then(rs => rs.data)
+ return this.$http({
+ url: "/sys/oss/upload_chunk/",
+ method: "POST",
+ data: formData
+ }).then(rs => rs.data
+ );
+ },
+ // 鏂囦欢鏍￠獙鏂规硶
+ validateFile(file) {
+ //return axios.post('sys/oss/upload_success/', file).then(rs => rs.data)
+ return this.$http({
+ url: "/sys/oss/upload_success/",
+ method: "POST",
+ data: file
+ }).then(res => {
+ console.log(res, "validateFile res")
+ if (res && !res.data) {
+ this.againSplitUpload(file, res.data.error_file)
+ this.$message({
+ message: "鏈夋枃浠朵笂浼犲け璐ワ紝姝ｅ湪閲嶆柊涓婁紶",
+ type: "warning"
+ });
+ } else if (res && res.data) {
+ this.progressPercent = 100
+ if (!this.onlyUploadFile) {
+ this.$http({
+ url: this.action,
+ method: "POST",
+ data: file
+ }).then(res => {
+ console.log(res, '鍚庡彴澶勭悊 res1')
+ let aa = res.data.status
+ console.log(aa, 'res.data.status')
+
+ if (this.multiple) {
+ this.uploadList.push(res.data)
+ this.$emit('input', this.uploadList)
+ } else {
+ this.$emit('input', res.data)
+ }
+ this.uploading = false
+ this.progressFlag = false
+ this.progressPercent = 0
+ this.isUpload = false
+ })
+ } else {
+ console.log(file.uid, 'file.uid')
+ this.$emit('recall', file.uid)
+ this.uploading = false
+ this.progressFlag = false
+ this.progressPercent = 0
+ this.isUpload = false
+ }
+ } else if (res && res.status == 40008) {
+ this.$message.error(res.message);
+ this.progressFlag = false;
+ this.progressPercent = 0;
+ }
+ })
+ }
+ },
+ mounted() {
+ // 鎻掑叆鍒癰ody涓�, 閬垮厤寮瑰嚭灞傝閬洊
+ if (this.crop && this.$refs.cropper) {
+ document.body.appendChild(this.$refs.cropper.$el)
}
}
- },
- mounted() {
- // 鎻掑叆鍒癰ody涓�, 閬垮厤寮瑰嚭灞傝閬洊
- if (this.crop && this.$refs.cropper) {
- document.body.appendChild(this.$refs.cropper.$el)
- }
}
-}
</script>
<style>
-.zt-upload {
- line-height: 1;
-}
+ .zt-upload {
+ line-height: 1;
+ }
-.zt .upload-input .upload-btn {
- padding: 8px 12px;
-}
+ .zt .upload-input .upload-btn {
+ padding: 8px 12px;
+ }
-.zt .upload-input.hide {
- height: 0px;
-}
+ .zt .upload-input.hide {
+ height: 0px;
+ }
-.zt-upload .el-loading-spinner {
- line-height: 1;
-}
+ .zt-upload .el-loading-spinner {
+ line-height: 1;
+ }
-.zt-upload .el-icon-plus {
- vertical-align: middle;
-}
+ .zt-upload .el-icon-plus {
+ vertical-align: middle;
+ }
-.zt-upload .el-upload--picture-card {
- width: auto;
- height: auto;
- background: none;
- line-height: inherit;
-}
+ .zt-upload .el-upload--picture-card {
+ width: auto;
+ height: auto;
+ background: none;
+ line-height: inherit;
+ }
-/* 瑁佸壀 */
-.vue-image-crop-upload.zt-upload-image--cropper {
- z-index: 99;
-}
+ /* 瑁佸壀 */
+ .vue-image-crop-upload.zt-upload-image--cropper {
+ z-index: 99;
+ }
-.zt-upload-image--cropper .vicp-drop-area {
- background-color: #fbfdff !important;
-}
+ .zt-upload-image--cropper .vicp-drop-area {
+ background-color: #fbfdff !important;
+ }
-.zt-upload-image--cropper .vicp-icon1-arrow {
- border-bottom-color: #909399 !important;
-}
+ .zt-upload-image--cropper .vicp-icon1-arrow {
+ border-bottom-color: #909399 !important;
+ }
-.zt-upload-image--cropper .vicp-icon1-body {
- background-color: #909399 !important;
-}
+ .zt-upload-image--cropper .vicp-icon1-body {
+ background-color: #909399 !important;
+ }
-.zt-upload-image--cropper .vicp-icon1-bottom {
- border-color: #909399 !important;
-}
+ .zt-upload-image--cropper .vicp-icon1-bottom {
+ border-color: #909399 !important;
+ }
</style>
--
Gitblit v1.9.1