Commit 288aac546fddb8392936e65aff3c67986cab766e
1 parent
4424f41c
Upload
Showing
4 changed files
with
418 additions
and
0 deletions
src/components/Generator/components/Upload/UploadFz.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="UploadFile-container"> | |
| 3 | + <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders" ref="elUpload" | |
| 4 | + :on-success="handleSuccess" :multiple="limit!==1" :show-file-list="false" :accept="accept" | |
| 5 | + :before-upload="beforeUpload" :on-exceed="handleExceed" :disabled="disabled" :limit="limit"> | |
| 6 | + <el-button size="small" icon="el-icon-upload" :disabled="disabled">{{buttonText}}</el-button> | |
| 7 | + <div slot="tip" class="el-upload__tip" v-show="showTip"> | |
| 8 | + 只能上传不超过{{fileSize}}{{sizeUnit}}的{{accept}}文件 | |
| 9 | + </div> | |
| 10 | + </el-upload> | |
| 11 | + <template v-if="fileList.length"> | |
| 12 | + <transition-group class="el-upload-list el-upload-list el-upload-list--text" tag="ul" | |
| 13 | + name="el-list"> | |
| 14 | + <li class="el-upload-list__item is-success" v-for="(file,index) in fileList" | |
| 15 | + :key="file.fileId"> | |
| 16 | + <a class="el-upload-list__item-name" @click="handleClick(file)"> | |
| 17 | + <i class="el-icon-document"></i>{{file.name}} | |
| 18 | + </a> | |
| 19 | + <label class="el-upload-list__item-status-label"> | |
| 20 | + <i class="el-icon-upload-success el-icon-circle-check"></i> | |
| 21 | + </label> | |
| 22 | + <i class="el-icon-close" v-if="!disabled" @click="handleRemove(file,index)"></i> | |
| 23 | + </li> | |
| 24 | + </transition-group> | |
| 25 | + </template> | |
| 26 | + </div> | |
| 27 | +</template> | |
| 28 | + | |
| 29 | +<script> | |
| 30 | +const units = { | |
| 31 | + KB: 1024, | |
| 32 | + MB: 1024 * 1024, | |
| 33 | + GB: 1024 * 1024 * 1024 | |
| 34 | +} | |
| 35 | +import { getDownloadUrl } from '@/api/common' | |
| 36 | +export default { | |
| 37 | + name: 'UploadFile', | |
| 38 | + props: { | |
| 39 | + value: { | |
| 40 | + type: Array, | |
| 41 | + default: () => [] | |
| 42 | + }, | |
| 43 | + type: { | |
| 44 | + type: String, | |
| 45 | + default: 'annex' | |
| 46 | + }, | |
| 47 | + disabled: { | |
| 48 | + type: Boolean, | |
| 49 | + default: false | |
| 50 | + }, | |
| 51 | + showTip: { | |
| 52 | + type: Boolean, | |
| 53 | + default: false | |
| 54 | + }, | |
| 55 | + limit: { | |
| 56 | + type: Number, | |
| 57 | + default: 0 | |
| 58 | + }, | |
| 59 | + accept: { | |
| 60 | + type: String, | |
| 61 | + default: '*' | |
| 62 | + }, | |
| 63 | + buttonText: { | |
| 64 | + type: String, | |
| 65 | + default: '选择文件' | |
| 66 | + }, | |
| 67 | + sizeUnit: { | |
| 68 | + type: String, | |
| 69 | + default: 'MB' | |
| 70 | + }, | |
| 71 | + fileSize: { | |
| 72 | + default: 5 | |
| 73 | + }, | |
| 74 | + }, | |
| 75 | + data() { | |
| 76 | + return { | |
| 77 | + fileList: this.value, | |
| 78 | + uploadHeaders: { Authorization: this.$store.getters.token } | |
| 79 | + } | |
| 80 | + }, | |
| 81 | + watch: { | |
| 82 | + value: { | |
| 83 | + immediate: true, | |
| 84 | + handler(val) { | |
| 85 | + this.fileList = val | |
| 86 | + } | |
| 87 | + } | |
| 88 | + }, | |
| 89 | + methods: { | |
| 90 | + beforeUpload(file) { | |
| 91 | + const unitNum = units[this.sizeUnit]; | |
| 92 | + if (!this.fileSize) return true | |
| 93 | + let isRightSize = file.size / unitNum < this.fileSize | |
| 94 | + if (!isRightSize) { | |
| 95 | + this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`) | |
| 96 | + } | |
| 97 | + // let isAccept = new RegExp(this.accept).test(file.type) | |
| 98 | + // if (!isAccept) { | |
| 99 | + // this.$message.error(`应该选择${this.accept}类型的文件`) | |
| 100 | + // } | |
| 101 | + return isRightSize; | |
| 102 | + }, | |
| 103 | + handleSuccess(res, file, fileList) { | |
| 104 | + if (res.code == 200) { | |
| 105 | + this.fileList.push({ | |
| 106 | + name: file.name, | |
| 107 | + fileId: res.data.name, | |
| 108 | + url: res.data.url | |
| 109 | + }) | |
| 110 | + this.$emit('input', this.fileList) | |
| 111 | + } else { | |
| 112 | + fileList.filter(o => o.uid != file.uid) | |
| 113 | + this.$emit('input', this.fileList) | |
| 114 | + this.$message({ message: res.msg, type: 'error', duration: 1500 }) | |
| 115 | + } | |
| 116 | + }, | |
| 117 | + handleExceed(files, fileList) { | |
| 118 | + this.$message.warning(`当前限制最多可以上传${this.limit}个文件`); | |
| 119 | + }, | |
| 120 | + handleRemove(file, index) { | |
| 121 | + this.fileList.splice(index, 1) | |
| 122 | + this.$refs.elUpload.uploadFiles.splice(index, 1) | |
| 123 | + this.$emit("input", this.fileList) | |
| 124 | + // this.$confirm(`确定移除${file.name}？`, '提示').then(() => { | |
| 125 | + // }).catch(() => { }) | |
| 126 | + }, | |
| 127 | + handleClick(file) { | |
| 128 | + // 点击下载文件 | |
| 129 | + if (!file.fileId) return | |
| 130 | + getDownloadUrl(this.type, file.fileId).then(res => { | |
| 131 | + if (res.data.url) window.location.href = this.define.comUrl + res.data.url | |
| 132 | + }) | |
| 133 | + } | |
| 134 | + } | |
| 135 | +} | |
| 136 | +</script> | |
| 0 | 137 | \ No newline at end of file | ... | ... |
src/components/Generator/components/Upload/UploadImg.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="UploadFile-container"> | |
| 3 | + <template v-if="fileList.length"> | |
| 4 | + <transition-group class="el-upload-list el-upload-list--picture-card" tag="ul" name="el-list"> | |
| 5 | + <li class="el-upload-list__item is-success" v-for="(file,index) in fileList" | |
| 6 | + :key="file.fileId"> | |
| 7 | + <el-image :src="define.comUrl+file.url" class="el-upload-list__item-thumbnail" | |
| 8 | + :preview-src-list="getImgList(fileList)" :z-index="10000" :ref="'image'+index"> | |
| 9 | + </el-image> | |
| 10 | + <span class="el-upload-list__item-actions"> | |
| 11 | + <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(index)"> | |
| 12 | + <i class="el-icon-zoom-in"></i> | |
| 13 | + </span> | |
| 14 | + <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index)"> | |
| 15 | + <i class="el-icon-delete"></i> | |
| 16 | + </span> | |
| 17 | + </span> | |
| 18 | + </li> | |
| 19 | + </transition-group> | |
| 20 | + </template> | |
| 21 | + <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders" ref="elUpload" | |
| 22 | + :on-success="handleSuccess" :multiple="limit!==1" :show-file-list="false" accept="image/*" | |
| 23 | + :before-upload="beforeUpload" :on-exceed="handleExceed" :disabled="disabled" | |
| 24 | + list-type="picture-card" :limit="limit" class="upload-btn"> | |
| 25 | + <i class="el-icon-plus"></i> | |
| 26 | + <div slot="tip" class="el-upload__tip" v-show="showTip"> | |
| 27 | + 只能上传不超过{{fileSize}}{{sizeUnit}}的{{accept}}图片 | |
| 28 | + </div> | |
| 29 | + </el-upload> | |
| 30 | + </div> | |
| 31 | +</template> | |
| 32 | + | |
| 33 | +<script> | |
| 34 | +const units = { | |
| 35 | + KB: 1024, | |
| 36 | + MB: 1024 * 1024, | |
| 37 | + GB: 1024 * 1024 * 1024 | |
| 38 | +} | |
| 39 | +export default { | |
| 40 | + name: 'UploadImg', | |
| 41 | + props: { | |
| 42 | + value: { | |
| 43 | + type: Array, | |
| 44 | + default: () => [] | |
| 45 | + }, | |
| 46 | + type: { | |
| 47 | + type: String, | |
| 48 | + default: 'annexpic' | |
| 49 | + }, | |
| 50 | + disabled: { | |
| 51 | + type: Boolean, | |
| 52 | + default: false | |
| 53 | + }, | |
| 54 | + showTip: { | |
| 55 | + type: Boolean, | |
| 56 | + default: false | |
| 57 | + }, | |
| 58 | + limit: { | |
| 59 | + type: Number, | |
| 60 | + default: 0 | |
| 61 | + }, | |
| 62 | + accept: { | |
| 63 | + type: String, | |
| 64 | + default: 'image/*' | |
| 65 | + }, | |
| 66 | + sizeUnit: { | |
| 67 | + type: String, | |
| 68 | + default: 'MB' | |
| 69 | + }, | |
| 70 | + fileSize: { | |
| 71 | + default: 5 | |
| 72 | + }, | |
| 73 | + }, | |
| 74 | + data() { | |
| 75 | + return { | |
| 76 | + fileList: [], | |
| 77 | + uploadHeaders: { Authorization: this.$store.getters.token } | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + watch: { | |
| 81 | + value: { | |
| 82 | + immediate: true, | |
| 83 | + handler(val) { | |
| 84 | + this.fileList = val | |
| 85 | + } | |
| 86 | + } | |
| 87 | + }, | |
| 88 | + methods: { | |
| 89 | + beforeUpload(file) { | |
| 90 | + const unitNum = units[this.sizeUnit]; | |
| 91 | + if (!this.fileSize) return true | |
| 92 | + let isRightSize = file.size / unitNum < this.fileSize | |
| 93 | + if (!isRightSize) { | |
| 94 | + this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`) | |
| 95 | + } | |
| 96 | + return isRightSize; | |
| 97 | + }, | |
| 98 | + handleSuccess(res, file, fileList) { | |
| 99 | + if (res.code == 200) { | |
| 100 | + this.fileList.push({ | |
| 101 | + name: file.name, | |
| 102 | + fileId: res.data.name, | |
| 103 | + url: res.data.url | |
| 104 | + }) | |
| 105 | + this.$emit('input', this.fileList) | |
| 106 | + } else { | |
| 107 | + fileList.filter(o => o.uid != file.uid) | |
| 108 | + this.$emit('input', this.fileList) | |
| 109 | + this.$message({ message: res.msg, type: 'error', duration: 1500 }) | |
| 110 | + } | |
| 111 | + }, | |
| 112 | + handleExceed(files, fileList) { | |
| 113 | + this.$message.warning(`当前限制最多可以上传${this.limit}张图片`) | |
| 114 | + }, | |
| 115 | + handlePictureCardPreview(index) { | |
| 116 | + this.$refs['image' + index][0].clickHandler() | |
| 117 | + }, | |
| 118 | + handleRemove(index) { | |
| 119 | + this.fileList.splice(index, 1) | |
| 120 | + this.$refs.elUpload.uploadFiles.splice(index, 1) | |
| 121 | + this.$emit("input", this.fileList) | |
| 122 | + }, | |
| 123 | + getImgList(list) { | |
| 124 | + const newList = list.map(o => this.define.comUrl + o.url) | |
| 125 | + return newList | |
| 126 | + } | |
| 127 | + } | |
| 128 | +} | |
| 129 | +</script> | |
| 130 | +<style lang="scss" scoped> | |
| 131 | +>>> .el-upload-list--picture-card .el-upload-list__item { | |
| 132 | + width: 120px; | |
| 133 | + height: 120px; | |
| 134 | +} | |
| 135 | +>>> .el-upload-list--picture-card { | |
| 136 | + display: inline-block; | |
| 137 | +} | |
| 138 | +>>> .el-upload--picture-card { | |
| 139 | + width: 120px; | |
| 140 | + height: 120px; | |
| 141 | + line-height: 120px; | |
| 142 | + | |
| 143 | + | |
| 144 | +} | |
| 145 | +.upload-btn { | |
| 146 | + display: inline-block; | |
| 147 | +} | |
| 148 | +</style> | |
| 0 | 149 | \ No newline at end of file | ... | ... |
src/components/Upload/SingleImg.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="SingleImg-container"> | |
| 3 | + <el-upload class="avatar-uploader" :action="define.comUploadUrl+'/'+type" | |
| 4 | + :show-file-list="false" :on-success="handleSuccess" :headers="uploadHeaders" accept="image/*"> | |
| 5 | + <img v-if="imageUrl" :src="imageUrl" class="avatar"> | |
| 6 | + <i v-else class="el-icon-plus avatar-uploader-icon"></i> | |
| 7 | + </el-upload> | |
| 8 | + </div> | |
| 9 | +</template> | |
| 10 | + | |
| 11 | +<script> | |
| 12 | +import { getDownloadUrl } from '@/api/common' | |
| 13 | +export default { | |
| 14 | + name: 'SingleImg', | |
| 15 | + props: { | |
| 16 | + value: { | |
| 17 | + type: String, | |
| 18 | + default: '' | |
| 19 | + }, | |
| 20 | + type: { | |
| 21 | + type: String, | |
| 22 | + default: 'workFlow' | |
| 23 | + }, | |
| 24 | + }, | |
| 25 | + data() { | |
| 26 | + return { | |
| 27 | + imageUrl: '', | |
| 28 | + uploadHeaders: { Authorization: this.$store.getters.token } | |
| 29 | + } | |
| 30 | + }, | |
| 31 | + watch: { | |
| 32 | + value(val) { if (!val) this.imageUrl = '' } | |
| 33 | + }, | |
| 34 | + methods: { | |
| 35 | + handleSuccess(res, file) { | |
| 36 | + if (res.code == 200) { | |
| 37 | + this.imageUrl = URL.createObjectURL(file.raw); | |
| 38 | + this.$emit('input', res.data.name) | |
| 39 | + } else { | |
| 40 | + this.$message({ message: res.msg, type: 'error', duration: 1500 }) | |
| 41 | + } | |
| 42 | + } | |
| 43 | + } | |
| 44 | +} | |
| 45 | +</script> | |
| 46 | +<style lang="scss" scoped> | |
| 47 | +.avatar-uploader >>> .el-upload { | |
| 48 | + border: 1px dashed #d9d9d9; | |
| 49 | + border-radius: 6px; | |
| 50 | + cursor: pointer; | |
| 51 | + position: relative; | |
| 52 | + overflow: hidden; | |
| 53 | +} | |
| 54 | +.avatar-uploader .el-upload:hover { | |
| 55 | + border-color: #409eff; | |
| 56 | +} | |
| 57 | +.avatar-uploader-icon { | |
| 58 | + font-size: 28px; | |
| 59 | + color: #8c939d; | |
| 60 | + width: 150px; | |
| 61 | + height: 150px; | |
| 62 | + line-height: 150px; | |
| 63 | + text-align: center; | |
| 64 | +} | |
| 65 | +.avatar { | |
| 66 | + width: 150px; | |
| 67 | + height: 150px; | |
| 68 | + display: block; | |
| 69 | +} | |
| 70 | +</style> | |
| 0 | 71 | \ No newline at end of file | ... | ... |
src/components/Upload/UploadFileSingle.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="UploadFile-container"> | |
| 3 | + <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders" | |
| 4 | + :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" | |
| 5 | + :on-success="handleSuccess" :file-list="fileList" :accept="accept"> | |
| 6 | + <el-button size="small" icon="el-icon-upload">选择文件</el-button> | |
| 7 | + </el-upload> | |
| 8 | + </div> | |
| 9 | +</template> | |
| 10 | + | |
| 11 | +<script> | |
| 12 | +import { getDownloadUrl } from '@/api/common' | |
| 13 | +export default { | |
| 14 | + name: 'UploadFileSingle', | |
| 15 | + props: { | |
| 16 | + value: { | |
| 17 | + type: String, | |
| 18 | + default: '' | |
| 19 | + }, | |
| 20 | + type: { | |
| 21 | + type: String, | |
| 22 | + default: 'workFlow' | |
| 23 | + }, | |
| 24 | + accept: { | |
| 25 | + type: String, | |
| 26 | + default: '*' | |
| 27 | + } | |
| 28 | + }, | |
| 29 | + data() { | |
| 30 | + return { | |
| 31 | + fileList: [], | |
| 32 | + uploadHeaders: { Authorization: this.$store.getters.token } | |
| 33 | + } | |
| 34 | + }, | |
| 35 | + watch: { | |
| 36 | + value(val) { if (!val) this.fileList = [] } | |
| 37 | + }, | |
| 38 | + methods: { | |
| 39 | + handlePreview(file) { | |
| 40 | + // 点击下载文件 | |
| 41 | + // if (!file.fileId) return | |
| 42 | + // getDownloadUrl(this.type, file.fileId).then(res => { | |
| 43 | + // window.location.href = this.define.comUrl + res.data.url | |
| 44 | + // }) | |
| 45 | + }, | |
| 46 | + handleRemove(file, fileList) { | |
| 47 | + this.fileList = fileList | |
| 48 | + this.$emit('input', '') | |
| 49 | + }, | |
| 50 | + handleSuccess(res, file, fileList) { | |
| 51 | + if (res.code == 200) { | |
| 52 | + this.fileList = fileList.slice(-1) | |
| 53 | + this.$emit('input', res.data.name) | |
| 54 | + } else { | |
| 55 | + this.fileList = fileList.filter(o => o.uid != file.uid) | |
| 56 | + this.$message({ message: res.msg, type: 'error', duration: 1500 }) | |
| 57 | + } | |
| 58 | + }, | |
| 59 | + beforeRemove(file, fileList) { | |
| 60 | + return this.$confirm(`确定移除 ${file.name}？`).catch(() => { }); | |
| 61 | + } | |
| 62 | + } | |
| 63 | +} | |
| 64 | +</script> | |
| 0 | 65 | \ No newline at end of file | ... | ... |