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 | \ No newline at end of file | 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 | \ No newline at end of file | 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 | \ No newline at end of file | 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 | \ No newline at end of file | 65 | \ No newline at end of file |