|
|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div class="img">
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ list-type="picture-card"
|
|
|
+ :multiple="isMultiple"
|
|
|
+ :action="uploadAction"
|
|
|
+ :headers="headers"
|
|
|
+ :data="{}"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :disabled="disabled"
|
|
|
+ :is-multiple="isMultiple"
|
|
|
+
|
|
|
+ :class="[!isMultiple?'imgupload':'', (!isMultiple && picUrl)?'image-upload-single-over':'' ]"
|
|
|
+ @change="handleChange"
|
|
|
+ @preview="handlePreview"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
|
|
|
+ <div class="iconp">
|
|
|
+ <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
|
|
|
+ <div class="ant-upload-text">{{ text }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
|
|
|
+ <img alt="example" style="width: 100%" :src="previewImage">
|
|
|
+ </a-modal>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+
|
|
|
+import { getFileAccessHttpUrl } from '@/utils/util'
|
|
|
+
|
|
|
+const uidGenerator = () => {
|
|
|
+ return '-' + parseInt(Math.random() * 10000 + 1, 10)
|
|
|
+}
|
|
|
+const getFileName = (path) => {
|
|
|
+ if (path.lastIndexOf('\\') >= 0) {
|
|
|
+ const reg = new RegExp('\\\\', 'g')
|
|
|
+ path = path.replace(reg, '/')
|
|
|
+ }
|
|
|
+ return path.substring(path.lastIndexOf('/') + 1)
|
|
|
+}
|
|
|
+export default {
|
|
|
+ name: 'JImageUpload',
|
|
|
+ model: {
|
|
|
+ prop: 'value',
|
|
|
+ event: 'change'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ text: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: '上传'
|
|
|
+ },
|
|
|
+ /* 这个属性用于控制文件上传的业务路径*/
|
|
|
+ bizPath: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: 'temp'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ type: [String, Array],
|
|
|
+ required: false
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ required: false,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ isMultiple: {
|
|
|
+ type: Boolean,
|
|
|
+ required: false,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // update-begin-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性,用于判断上传数量
|
|
|
+ number: {
|
|
|
+ type: Number,
|
|
|
+ required: false,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ // update-end-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性,用于判断上传数量
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ uploadAction: process.env.VUE_APP_BASE_API + '/common/upload',
|
|
|
+ uploadLoading: false,
|
|
|
+ picUrl: false,
|
|
|
+ headers: {},
|
|
|
+ fileList: [],
|
|
|
+ previewImage: '',
|
|
|
+ previewVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler(val, oldValue) {
|
|
|
+ if (val instanceof Array) {
|
|
|
+ this.initFileList(val.join(','))
|
|
|
+ } else {
|
|
|
+ this.initFileList(val)
|
|
|
+ }
|
|
|
+ if (!val || val.length == 0) {
|
|
|
+ this.picUrl = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 立刻执行handler
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.headers['Authorization'] = getToken()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initFileList(paths) {
|
|
|
+ if (!paths || paths.length == 0) {
|
|
|
+ this.fileList = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.picUrl = true
|
|
|
+ const fileList = []
|
|
|
+ const arr = paths.split(',')
|
|
|
+ for (var a = 0; a < arr.length; a++) {
|
|
|
+ const url = getFileAccessHttpUrl(arr[a])
|
|
|
+ fileList.push({
|
|
|
+ uid: uidGenerator(),
|
|
|
+ name: getFileName(arr[a]),
|
|
|
+ status: 'done',
|
|
|
+ url: url,
|
|
|
+ response: {
|
|
|
+ status: 'history',
|
|
|
+ message: arr[a]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.fileList = fileList
|
|
|
+ },
|
|
|
+ beforeUpload: function(file) {
|
|
|
+ var fileType = file.type
|
|
|
+ if (fileType.indexOf('image') < 0) {
|
|
|
+ this.$message.warning('请上传图片')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChange(info) {
|
|
|
+ this.picUrl = false
|
|
|
+ let fileList = info.fileList
|
|
|
+ // update-begin-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选,返回选定的元素。
|
|
|
+ if (this.number > 0 && this.isMultiple) {
|
|
|
+ fileList = fileList.slice(-this.number)
|
|
|
+ }
|
|
|
+ // update-end-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选,返回选定的元素。
|
|
|
+ if (info.file.status === 'done') {
|
|
|
+ if (info.file.response.code === 200) {
|
|
|
+ this.picUrl = true
|
|
|
+ fileList = fileList.map((file) => {
|
|
|
+ if (file.response) {
|
|
|
+ file.url = file.response.url
|
|
|
+ }
|
|
|
+ return file
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.$message.success(`${info.file.name} 上传成功!`);
|
|
|
+ } else if (info.file.status === 'error') {
|
|
|
+ this.$message.error(`${info.file.name} 上传失败.`)
|
|
|
+ } else if (info.file.status === 'removed') {
|
|
|
+ this.handleDelete(info.file)
|
|
|
+ }
|
|
|
+ this.fileList = fileList
|
|
|
+ if (info.file.status === 'done' || info.file.status === 'removed') {
|
|
|
+ this.handlePathChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ handlePreview(file) {
|
|
|
+ this.previewImage = file.url || file.thumbUrl
|
|
|
+ this.previewVisible = true
|
|
|
+ },
|
|
|
+ getAvatarView() {
|
|
|
+ if (this.fileList.length > 0) {
|
|
|
+ const url = this.fileList[0].url
|
|
|
+ return getFileAccessHttpUrl(url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlePathChange() {
|
|
|
+ const uploadFiles = this.fileList
|
|
|
+ let path = ''
|
|
|
+ if (!uploadFiles || uploadFiles.length == 0) {
|
|
|
+ path = ''
|
|
|
+ }
|
|
|
+ const arr = []
|
|
|
+ if (!this.isMultiple && uploadFiles.length > 0) {
|
|
|
+ arr.push(uploadFiles[uploadFiles.length - 1].response.url)
|
|
|
+ } else {
|
|
|
+ for (let a = 0; a < uploadFiles.length; a++) {
|
|
|
+ // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
|
|
|
+ if (uploadFiles[a].status === 'done') {
|
|
|
+ arr.push(uploadFiles[a].response.url)
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (arr.length > 0) {
|
|
|
+ path = arr.join(',')
|
|
|
+ }
|
|
|
+ this.$emit('change', path)
|
|
|
+ },
|
|
|
+ handleDelete(file) {
|
|
|
+ // 如有需要新增 删除逻辑
|
|
|
+ console.log(file)
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.close()
|
|
|
+ this.previewVisible = false
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /* update--begin--autor:lvdandan-----date:20201016------for:j-image-upload图片组件单张图片详情回显空白
|
|
|
+ * https://github.com/zhangdaiscott/jeecg-boot/issues/1810
|
|
|
+ * https://github.com/zhangdaiscott/jeecg-boot/issues/1779
|
|
|
+ */
|
|
|
+
|
|
|
+ /deep/ .imgupload .iconp{padding:20px;}
|
|
|
+ /* update--end--autor:lvdandan-----date:20201016------for:j-image-upload图片组件单张图片详情回显空白*/
|
|
|
+
|
|
|
+ /deep/ .image-upload-single-over .ant-upload-select{display: none}
|
|
|
+</style>
|