From 288aac546fddb8392936e65aff3c67986cab766e Mon Sep 17 00:00:00 2001
From: monkeyhouyi <m19382021374@163.com>
Date: Mon, 22 Jul 2024 23:54:43 +0800
Subject: [PATCH] Upload

---
 src/components/Generator/components/Upload/UploadFz.vue  | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/Generator/components/Upload/UploadImg.vue | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/Upload/SingleImg.vue                      |  70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/Upload/UploadFileSingle.vue               |  64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 418 insertions(+), 0 deletions(-)
 create mode 100644 src/components/Generator/components/Upload/UploadFz.vue
 create mode 100644 src/components/Generator/components/Upload/UploadImg.vue
 create mode 100644 src/components/Upload/SingleImg.vue
 create mode 100644 src/components/Upload/UploadFileSingle.vue

diff --git a/src/components/Generator/components/Upload/UploadFz.vue b/src/components/Generator/components/Upload/UploadFz.vue
new file mode 100644
index 0000000..d21cf5b
--- /dev/null
+++ b/src/components/Generator/components/Upload/UploadFz.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="UploadFile-container">
+    <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders" ref="elUpload"
+      :on-success="handleSuccess" :multiple="limit!==1" :show-file-list="false" :accept="accept"
+      :before-upload="beforeUpload" :on-exceed="handleExceed" :disabled="disabled" :limit="limit">
+      <el-button size="small" icon="el-icon-upload" :disabled="disabled">{{buttonText}}</el-button>
+      <div slot="tip" class="el-upload__tip" v-show="showTip">
+        只能上传不超过{{fileSize}}{{sizeUnit}}的{{accept}}文件
+      </div>
+    </el-upload>
+    <template v-if="fileList.length">
+      <transition-group class="el-upload-list el-upload-list el-upload-list--text" tag="ul"
+        name="el-list">
+        <li class="el-upload-list__item is-success" v-for="(file,index) in fileList"
+          :key="file.fileId">
+          <a class="el-upload-list__item-name" @click="handleClick(file)">
+            <i class="el-icon-document"></i>{{file.name}}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check"></i>
+          </label>
+          <i class="el-icon-close" v-if="!disabled" @click="handleRemove(file,index)"></i>
+        </li>
+      </transition-group>
+    </template>
+  </div>
+</template>
+
+<script>
+const units = {
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024
+}
+import { getDownloadUrl } from '@/api/common'
+export default {
+  name: 'UploadFile',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: 'annex'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showTip: {
+      type: Boolean,
+      default: false
+    },
+    limit: {
+      type: Number,
+      default: 0
+    },
+    accept: {
+      type: String,
+      default: '*'
+    },
+    buttonText: {
+      type: String,
+      default: '选择文件'
+    },
+    sizeUnit: {
+      type: String,
+      default: 'MB'
+    },
+    fileSize: {
+      default: 5
+    },
+  },
+  data() {
+    return {
+      fileList: this.value,
+      uploadHeaders: { Authorization: this.$store.getters.token }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.fileList = val
+      }
+    }
+  },
+  methods: {
+    beforeUpload(file) {
+      const unitNum = units[this.sizeUnit];
+      if (!this.fileSize) return true
+      let isRightSize = file.size / unitNum < this.fileSize
+      if (!isRightSize) {
+        this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`)
+      }
+      // let isAccept = new RegExp(this.accept).test(file.type)
+      // if (!isAccept) {
+      //   this.$message.error(`应该选择${this.accept}类型的文件`)
+      // }
+      return isRightSize;
+    },
+    handleSuccess(res, file, fileList) {
+      if (res.code == 200) {
+        this.fileList.push({
+          name: file.name,
+          fileId: res.data.name,
+          url: res.data.url
+        })
+        this.$emit('input', this.fileList)
+      } else {
+        fileList.filter(o => o.uid != file.uid)
+        this.$emit('input', this.fileList)
+        this.$message({ message: res.msg, type: 'error', duration: 1500 })
+      }
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制最多可以上传${this.limit}个文件`);
+    },
+    handleRemove(file, index) {
+      this.fileList.splice(index, 1)
+      this.$refs.elUpload.uploadFiles.splice(index, 1)
+      this.$emit("input", this.fileList)
+      // this.$confirm(`确定移除${file.name}？`, '提示').then(() => {
+      // }).catch(() => { })
+    },
+    handleClick(file) {
+      // 点击下载文件
+      if (!file.fileId) return
+      getDownloadUrl(this.type, file.fileId).then(res => {
+        if (res.data.url) window.location.href = this.define.comUrl + res.data.url
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Generator/components/Upload/UploadImg.vue b/src/components/Generator/components/Upload/UploadImg.vue
new file mode 100644
index 0000000..731df55
--- /dev/null
+++ b/src/components/Generator/components/Upload/UploadImg.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="UploadFile-container">
+    <template v-if="fileList.length">
+      <transition-group class="el-upload-list el-upload-list--picture-card" tag="ul" name="el-list">
+        <li class="el-upload-list__item is-success" v-for="(file,index) in fileList"
+          :key="file.fileId">
+          <el-image :src="define.comUrl+file.url" class="el-upload-list__item-thumbnail"
+            :preview-src-list="getImgList(fileList)" :z-index="10000" :ref="'image'+index">
+          </el-image>
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(index)">
+              <i class="el-icon-zoom-in"></i>
+            </span>
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
+              <i class="el-icon-delete"></i>
+            </span>
+          </span>
+        </li>
+      </transition-group>
+    </template>
+    <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders" ref="elUpload"
+      :on-success="handleSuccess" :multiple="limit!==1" :show-file-list="false" accept="image/*"
+      :before-upload="beforeUpload" :on-exceed="handleExceed" :disabled="disabled"
+      list-type="picture-card" :limit="limit" class="upload-btn">
+      <i class="el-icon-plus"></i>
+      <div slot="tip" class="el-upload__tip" v-show="showTip">
+        只能上传不超过{{fileSize}}{{sizeUnit}}的{{accept}}图片
+      </div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+const units = {
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024
+}
+export default {
+  name: 'UploadImg',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: 'annexpic'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showTip: {
+      type: Boolean,
+      default: false
+    },
+    limit: {
+      type: Number,
+      default: 0
+    },
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    sizeUnit: {
+      type: String,
+      default: 'MB'
+    },
+    fileSize: {
+      default: 5
+    },
+  },
+  data() {
+    return {
+      fileList: [],
+      uploadHeaders: { Authorization: this.$store.getters.token }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.fileList = val
+      }
+    }
+  },
+  methods: {
+    beforeUpload(file) {
+      const unitNum = units[this.sizeUnit];
+      if (!this.fileSize) return true
+      let isRightSize = file.size / unitNum < this.fileSize
+      if (!isRightSize) {
+        this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`)
+      }
+      return isRightSize;
+    },
+    handleSuccess(res, file, fileList) {
+      if (res.code == 200) {
+        this.fileList.push({
+          name: file.name,
+          fileId: res.data.name,
+          url: res.data.url
+        })
+        this.$emit('input', this.fileList)
+      } else {
+        fileList.filter(o => o.uid != file.uid)
+        this.$emit('input', this.fileList)
+        this.$message({ message: res.msg, type: 'error', duration: 1500 })
+      }
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制最多可以上传${this.limit}张图片`)
+    },
+    handlePictureCardPreview(index) {
+      this.$refs['image' + index][0].clickHandler()
+    },
+    handleRemove(index) {
+      this.fileList.splice(index, 1)
+      this.$refs.elUpload.uploadFiles.splice(index, 1)
+      this.$emit("input", this.fileList)
+    },
+    getImgList(list) {
+      const newList = list.map(o => this.define.comUrl + o.url)
+      return newList
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+>>> .el-upload-list--picture-card .el-upload-list__item {
+  width: 120px;
+  height: 120px;
+}
+>>> .el-upload-list--picture-card {
+  display: inline-block;
+}
+>>> .el-upload--picture-card {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+ 
+
+}
+.upload-btn {
+  display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Upload/SingleImg.vue b/src/components/Upload/SingleImg.vue
new file mode 100644
index 0000000..15f4100
--- /dev/null
+++ b/src/components/Upload/SingleImg.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="SingleImg-container">
+    <el-upload class="avatar-uploader" :action="define.comUploadUrl+'/'+type"
+      :show-file-list="false" :on-success="handleSuccess" :headers="uploadHeaders" accept="image/*">
+      <img v-if="imageUrl" :src="imageUrl" class="avatar">
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { getDownloadUrl } from '@/api/common'
+export default {
+  name: 'SingleImg',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'workFlow'
+    },
+  },
+  data() {
+    return {
+      imageUrl: '',
+      uploadHeaders: { Authorization: this.$store.getters.token }
+    }
+  },
+  watch: {
+    value(val) { if (!val) this.imageUrl = '' }
+  },
+  methods: {
+    handleSuccess(res, file) {
+      if (res.code == 200) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+        this.$emit('input', res.data.name)
+      } else {
+        this.$message({ message: res.msg, type: 'error', duration: 1500 })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.avatar-uploader >>> .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+}
+.avatar {
+  width: 150px;
+  height: 150px;
+  display: block;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Upload/UploadFileSingle.vue b/src/components/Upload/UploadFileSingle.vue
new file mode 100644
index 0000000..a9e5660
--- /dev/null
+++ b/src/components/Upload/UploadFileSingle.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="UploadFile-container">
+    <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders"
+      :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
+      :on-success="handleSuccess" :file-list="fileList" :accept="accept">
+      <el-button size="small" icon="el-icon-upload">选择文件</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { getDownloadUrl } from '@/api/common'
+export default {
+  name: 'UploadFileSingle',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'workFlow'
+    },
+    accept: {
+      type: String,
+      default: '*'
+    }
+  },
+  data() {
+    return {
+      fileList: [],
+      uploadHeaders: { Authorization: this.$store.getters.token }
+    }
+  },
+  watch: {
+    value(val) { if (!val) this.fileList = [] }
+  },
+  methods: {
+    handlePreview(file) {
+      // 点击下载文件
+      // if (!file.fileId) return
+      // getDownloadUrl(this.type, file.fileId).then(res => {
+      //   window.location.href = this.define.comUrl + res.data.url
+      // })
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList
+      this.$emit('input', '')
+    },
+    handleSuccess(res, file, fileList) {
+      if (res.code == 200) {
+        this.fileList = fileList.slice(-1)
+        this.$emit('input', res.data.name)
+      } else {
+        this.fileList = fileList.filter(o => o.uid != file.uid)
+        this.$message({ message: res.msg, type: 'error', duration: 1500 })
+      }
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`).catch(() => { });
+    }
+  }
+}
+</script>
\ No newline at end of file
--
libgit2 0.21.4