'init'

src/components/Upload/MoreFiles.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-22 11:14:39
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-20 09:43:52
+ * @Description: file content
+-->
+<template>
+  <div class="upload-container">
+    <el-upload
+      :ref="'upload' + itemId"
+      :data="dataObj"
+      name="files"
+      :disabled="disable"
+      :file-list="annexfileList"
+      :action="uploadPath"
+      :headers="{ token }"
+      :on-remove="rmImage"
+      :before-upload="annexBeforeUpload"
+      :on-success="uploadDone"
+      :on-preview="downloadFile"
+      class="btn"
+    >
+      <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+      <!-- <span v-if="fileIds" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span> -->
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'SingleFileUpload',
+  props: {
+    files: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    disable: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    itemId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { typeCode: 'file' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false,
+      annexfileList: []
+    }
+  },
+  mounted() {
+    const fileArr = []
+    this.files.map(item => {
+      fileArr.push({
+        id: item.id,
+        name: item.name
+      })
+    })
+    this.$refs['upload' + this.itemId].uploadFiles = fileArr
+    this.annexfileList = fileArr
+  },
+  methods: {
+    rmImage(file, fileList) {
+      this.annexfileList = fileList
+    },
+    uploadDone(res) {
+      if (res.code === 0) {
+        this.$refs['upload' + this.itemId].uploadFiles[this.$refs['upload' + this.itemId].uploadFiles.length - 1].id = res.data[0].id
+        this.annexfileList = this.$refs['upload' + this.itemId].uploadFiles
+        this.$emit('done', res.data)
+      } else {
+        this.$message({
+          type: 'error',
+          message: '上传失败!'
+        })
+        this.$refs['upload' + this.itemId].uploadFiles.pop()
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    downloadFile(file) {
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${file.id}`)
+    },
+    returnFileList() {
+      return this.annexfileList
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/index.scss";
+.upload-container {
+  overflow: hidden;
+  .btn {
+    float: left;
+  }
+  .el-upload__tip {
+    @extend .pointer;
+  }
+}
+</style>

src/components/Upload/SingleFile.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="upload-container">
+    <el-upload
+      :multiple="false"
+      :data="dataObj"
+      name="files"
+      :file-list="annexfileList"
+      :action="uploadPath"
+      :headers="{ token }"
+      :before-upload="annexBeforeUpload"
+      :on-success="uploadDone"
+      class="btn"
+    >
+      <el-button v-if="showBtn" class="uploadButton" icon="el-icon-upload2">{{ 'btn.upload' | i18nFilter }}</el-button>
+      <span v-if="fileId" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'SingleFileUpload',
+  props: {
+    fileId: {
+      type: String,
+      default: () => null
+    },
+    showBtn: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { typeCode: 'file' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false,
+      annexfileList: []
+    }
+  },
+  // watch: {
+  //   fileId: function(val) {
+  //     if (val) {
+  //       getUrl({
+  //         attachmentId: val,
+  //         type: 0
+  //       }).then(blob => {
+  //         blobToBase64(blob.data).then(res => {
+  //           this.imageUrl = res
+  //         })
+  //       })
+  //     }
+  //   }
+  // },
+  methods: {
+    rmImage() {
+      this.$confirm(this.$t('upload.delPic'), '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.imageUrl = null
+        this.emitInput(false)
+      })
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    uploadDone(res) {
+      console.log(res)
+      if (res.code === 0) {
+        this.$emit('done', res.data[0].id)
+      } else {
+        this.$message({
+          type: 'error',
+          message: '上传失败!'
+        })
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    downloadFile() {
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${this.fileId}`)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/index.scss";
+.upload-container {
+  overflow: hidden;
+  .btn {
+    float: left;
+  }
+  .el-upload__tip {
+    @extend .pointer;
+  }
+}
+.uploadButton{
+width: 106px;
+height: 32px;
+background: #FFFFFF;
+border-radius: 4px;
+border: 1px solid #D9D9D9;
+}
+</style>

src/components/Upload/SingleImage.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="upload-container">
+    <el-upload
+      :data="dataObj"
+      name="files"
+      :multiple="false"
+      :show-file-list="false"
+      :before-upload="beforeUpload"
+      :on-success="handleImageSuccess"
+      :headers="{ token }"
+      class="image-uploader"
+      drag
+      :action="uploadPath"
+    >
+      <i class="el-icon-upload" />
+      <div class="el-upload__text">
+        {{ 'upload.text.header' | i18nFilter }}<em>{{ 'upload.text.footer' | i18nFilter }}</em>
+      </div>
+      <div class="el-upload__placeholder">
+        {{ 'upload.placeholder' | i18nFilter }}
+      </div>
+    </el-upload>
+    <div v-loading="imgload" class="image-preview">
+      <div v-show="imageUrl" class="image-preview-wrapper">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { cloudPath, uploadPath } from '@/api/basic'
+import { getUrl } from '@/api/file'
+import { getToken } from '@/utils/auth'
+import { blobToBase64 } from '@/utils/blobToBase64'
+
+export default {
+  name: 'SingleImageUpload',
+  props: {
+    fileId: {
+      type: String,
+      default: () => {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { typeCode: '' },
+      uploadPath,
+      cloudPath,
+      imageUrl: null,
+      token: getToken(),
+      imgload: false
+    }
+  },
+  watch: {
+    fileId: function(val) {
+      if (val) {
+        getUrl({
+          attachmentId: val,
+          type: 0
+        }).then(blob => {
+          blobToBase64(blob.data).then(res => {
+            this.imageUrl = res
+          })
+        })
+      }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.$confirm(this.$t('upload.delPic'), '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.imageUrl = null
+        this.emitInput(false)
+      })
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageSuccess(val) {
+      this.imgload = true
+      getUrl({
+        attachmentId: val.data[0].id,
+        type: 0
+      }).then(blob => {
+        blobToBase64(blob.data).then(res => {
+          this.imageUrl = res
+          this.imgload = false
+        })
+      })
+      this.emitInput(val.data[0])
+    },
+    beforeUpload(file) {
+      console.log(file)
+      this.dataObj.typeCode = this.$route.matched[0].name
+      const imgData = { accept: 'image/gif, image/jpeg, image/png, image/jpg' }
+      let isImg = true
+      if (imgData.accept.indexOf(file.type) === -1) {
+        isImg = false
+        this.$message.error(this.$t('upload.picAlarm'))
+      } else if (file.size > 1024 * 1024 * 10) {
+        isImg = false
+        this.$message.error(this.$t('upload.picSizeAlarm'))
+      }
+      return isImg
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+    @import "~@/styles/mixin.scss";
+    .upload-container {
+        width: 100%;
+        position: relative;
+        @include clearfix;
+        .image-uploader {
+            width: 60%;
+            float: left;
+            .el-upload__placeholder{
+              font-size: 12px;
+              color: #999;
+              line-height: 18px;
+            }
+        }
+        .image-preview {
+            width: 200px;
+            height: 200px;
+            position: relative;
+            border: 1px dashed #d9d9d9;
+            float: left;
+            margin-left: 50px;
+            .image-preview-wrapper {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .image-preview-action {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                cursor: default;
+                text-align: center;
+                color: #fff;
+                opacity: 0;
+                font-size: 20px;
+                background-color: rgba(0, 0, 0, .5);
+                transition: opacity .3s;
+                cursor: pointer;
+                text-align: center;
+                line-height: 200px;
+                .el-icon-delete {
+                    font-size: 36px;
+                }
+            }
+            &:hover {
+                .image-preview-action {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+</style>

src/components/Upload/SingleImage2.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="singleImageUpload2 upload-container">
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post"
+    >
+      <i class="el-icon-upload" />
+      <div class="el-upload__text">
+        Drag或<em>点击上传</em>
+      </div>
+    </el-upload>
+    <div v-show="imageUrl.length>0" class="image-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'SingleImageUpload2',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageSuccess() {
+      this.emitInput(this.tempUrl)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(() => {
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .image-uploader {
+    height: 100%;
+  }
+  .image-preview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border: 1px dashed #d9d9d9;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/components/Upload/SingleImage3.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="upload-container">
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      action="https://httpbin.org/post"
+    >
+      <i class="el-icon-upload" />
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
+    </el-upload>
+    <div class="image-preview image-app-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage" />
+        </div>
+      </div>
+    </div>
+    <div class="image-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'SingleImageUpload3',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageSuccess(file) {
+      this.emitInput(file.files.file)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+.upload-container {
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 35%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+  .image-app-preview {
+    width: 320px;
+    height: 180px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .app-fake-conver {
+      height: 44px;
+      position: absolute;
+      width: 100%; // background: rgba(0, 0, 0, .1);
+      text-align: center;
+      line-height: 64px;
+      color: #fff;
+    }
+  }
+}
+</style>