From 03878eec5a861f21ba247f1c81d1e8238c26ca65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Sun, 18 Jun 2023 10:02:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96:=20?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker_env/web/Dockerfile                     |   2 +-
 web/src/components/file-uploader/index.js     |  32 +
 .../file-uploader/lib/cropper-uploader.vue    | 377 ++++++++++
 .../file-uploader/lib/cropper/index.vue       | 420 +++++++++++
 .../file-uploader/lib/cropper/vue-cropper.js  | 367 ++++++++++
 .../file-uploader/lib/file-uploader.vue       | 666 ++++++++++++++++++
 .../file-uploader/lib/files-format.vue        |  96 +++
 .../file-uploader/lib/images-format.vue       | 133 ++++
 .../file-uploader/lib/loading-spin.svg        |   6 +
 .../selector-table/selector-table.vue         |  22 +-
 10 files changed, 2114 insertions(+), 7 deletions(-)
 create mode 100644 web/src/components/file-uploader/index.js
 create mode 100644 web/src/components/file-uploader/lib/cropper-uploader.vue
 create mode 100644 web/src/components/file-uploader/lib/cropper/index.vue
 create mode 100644 web/src/components/file-uploader/lib/cropper/vue-cropper.js
 create mode 100644 web/src/components/file-uploader/lib/file-uploader.vue
 create mode 100644 web/src/components/file-uploader/lib/files-format.vue
 create mode 100644 web/src/components/file-uploader/lib/images-format.vue
 create mode 100644 web/src/components/file-uploader/lib/loading-spin.svg

diff --git a/docker_env/web/Dockerfile b/docker_env/web/Dockerfile
index dfa928a..74b0e8b 100644
--- a/docker_env/web/Dockerfile
+++ b/docker_env/web/Dockerfile
@@ -4,6 +4,6 @@ COPY web/. .
 RUN npm install --registry=https://registry.npm.taobao.org
 RUN npm run build
 
-FROM nginx:alpine
+FROM registry.cn-zhangjiakou.aliyuncs.com/dvadmin-pro/nginx:alpine
 COPY ./docker_env/nginx/my.conf /etc/nginx/conf.d/my.conf
 COPY --from=0 /web/dist /usr/share/nginx/html
diff --git a/web/src/components/file-uploader/index.js b/web/src/components/file-uploader/index.js
new file mode 100644
index 0000000..f0de3e6
--- /dev/null
+++ b/web/src/components/file-uploader/index.js
@@ -0,0 +1,32 @@
+import D2pImagesFormat from './lib/images-format'
+import D2pFilesFormat from './lib/files-format'
+import 'cropperjs/dist/cropper.css'
+import D2pUploader from 'd2p-extends/src/uploader'
+
+function install (Vue, options) {
+  Vue.component('d2p-file-uploader', () => import('./lib/file-uploader'))
+  Vue.component('d2p-images-format', D2pImagesFormat)
+  Vue.component('d2p-cropper-uploader', () => import('./lib/cropper-uploader'))
+  Vue.component('d2p-cropper', () => import('./lib/cropper'))
+  Vue.component('d2p-files-format', D2pFilesFormat)
+
+  if (options != null) {
+    Vue.use(D2pUploader, options)
+  }
+}
+
+const createAllUploadedValidator = (getFormComponentRef) => {
+  return (rule, value, callback) => {
+    const ref = getFormComponentRef(rule.fullField)
+    if (ref && ref.isHasUploadingItem()) {
+      callback(new Error('还有未上传完成的文件'))
+      return
+    }
+    callback()
+  }
+}
+
+export default {
+  install,
+  createAllUploadedValidator
+}
diff --git a/web/src/components/file-uploader/lib/cropper-uploader.vue b/web/src/components/file-uploader/lib/cropper-uploader.vue
new file mode 100644
index 0000000..43320dd
--- /dev/null
+++ b/web/src/components/file-uploader/lib/cropper-uploader.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="d2p-cropper-uploader"  :class="{'is-disabled':disabled}" >
+    <div class="image-list">
+      <div class="image-item" v-for="(item,index) in list" :key="index">
+        <el-image class="image"
+          :src="item.dataUrl?item.dataUrl:item.url"
+          :data-src="item.url"
+          :preview-src-list="_urlList"
+          fit="contain" >
+          <div slot="placeholder" class="image-slot">
+            <img src="./loading-spin.svg">
+          </div>
+        </el-image>
+        <div class="delete" v-if="!disabled"><i class="el-icon-delete" @click="removeImage(index,item)"></i></div>
+        <div class="status-uploading" v-if="item.status==='uploading'">
+          <el-progress type="circle" :percentage="item.progress" :width="70"/>
+        </div>
+        <div class="status-done" v-else-if="item.status==='done'">
+          <i class="el-icon-upload-success el-icon-check"></i>
+        </div>
+      </div>
+      <div v-if="limit <=0 || limit>list.length" class="image-item image-plus" @click="addNewImage">
+        <i class="el-icon-plus cropper-uploader-icon"></i>
+      </div>
+    </div>
+    <d2p-cropper ref="cropper"
+                        :title="title"
+                        :cropperHeight="cropperHeight"
+                        :dialogWidth="dialogWidth"
+                        :accept="accept"
+                        :uploadTip="uploadTip"
+                        :maxSize="maxSize"
+                        :cropper="cropper"
+                        output="all"
+                        @done="cropComplete"
+    ></d2p-cropper>
+  </div>
+
+</template>
+
+<script>
+import D2pCropper from './cropper'
+import D2pUploader from 'd2p-extends/src/uploader'
+import { d2CrudPlus } from 'd2-crud-plus'
+import log from 'd2p-extends/src/utils/util.log'
+/**
+ * 图片裁剪上传组件,封装了d2p-cropper, d2p-cropper内部封装了cropperjs
+ */
+
+export default {
+  name: 'd2p-cropper-uploader',
+  mixins: [d2CrudPlus.inputBase],
+  components: {
+    D2pCropper
+  },
+  props: {
+    // 初始图片url
+    value: {
+      type: [String, Array]
+    },
+    // 上传后端类型，[form, cos, qiniu , alioss]
+    type: {
+      type: String
+    },
+    // 上传提示
+    uploadTip: {
+      type: String
+    },
+    // 对话框标题
+    title: String,
+    // cropper的高度，默认为浏览器可视窗口高度的40%，最小270
+    cropperHeight: {
+      type: [String, Number]
+    },
+    // 对话框宽度，默认50%
+    dialogWidth: {
+      type: [String, Number],
+      default: '50%'
+    },
+    // 图片大小限制，单位MB
+    maxSize: {
+      type: Number,
+      default: 5
+    },
+    // 图片数量限制,0为不限制
+    limit: {
+      type: Number,
+      default: 1
+    },
+    // 可接收的文件后缀
+    accept: {
+      type: String,
+      default: '.jpg, .jpeg, .png, .gif, .webp'
+    },
+    // [cropperjs的参数](https://github.com/fengyuanchen/cropperjs)
+    cropper: {
+      type: Object
+    },
+    // 上传参数，会临时覆盖全局上传配置参数[d2p-uploader](/guide/extends/uploader.html)
+    uploader: {
+      type: Object
+    },
+    // 构建下载url方法,不影响提交的value
+    buildUrl: {
+      type: Function,
+      default: function (value, item) { return (typeof value === 'object') ? item.url : value }
+    }
+
+  },
+  data () {
+    return {
+      index: undefined,
+      list: []
+    }
+  },
+  watch: {
+    value (val) {
+      this.$emit('change', val)
+      if (val === this.emitValue) {
+        return
+      }
+      this.initValue(val)
+    }
+  },
+  created () {
+    this.emitValue = this.value
+    this.initValue(this.value)
+  },
+  computed: {
+    _urlList () {
+      const urlList = []
+      if (this.list) {
+        for (const item of this.list) {
+          urlList.push(item.url)
+        }
+      }
+      return urlList
+    }
+  },
+  methods: {
+    initValue (value) {
+      const list = []
+      if (value == null || value === '') {
+        this.$set(this, 'list', list)
+        return
+      }
+      if (typeof (value) === 'string') {
+        list.push({ url: this.buildUrl(value), value: value, status: 'done' })
+      } else {
+        for (const item of value) {
+          list.push({ url: this.buildUrl(item), value: item, status: 'done' })
+        }
+      }
+      this.$set(this, 'list', list)
+    },
+    addNewImage () {
+      if (this.disabled) {
+        return
+      }
+      this.index = undefined
+      this.$refs.cropper.clear()
+      this.$refs.cropper.open()
+    },
+    removeImage (index, item) {
+      this.list.splice(index, 1)
+      this.emit()
+    },
+    isHasUploadingItem () {
+      const fileList = this.list
+      if (fileList && fileList.length > 0) {
+        for (const item of fileList) {
+          if (item.status === 'uploading') {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    async cropComplete (ret) {
+      const blob = ret.blob
+      const dataUrl = ret.dataUrl
+      const file = ret.file
+      // 开始上传
+      const item = {
+        url: undefined,
+        dataUrl: dataUrl,
+        status: 'uploading',
+        progress: 0
+      }
+      const onProgress = (e) => {
+        item.progress = e.percent
+      }
+      const onError = (e) => {
+        item.status = 'error'
+        item.message = '文件上传出错:' + e.message
+        log.debug(e)
+      }
+      log.debug('blob:', blob)
+      const option = {
+        file: blob,
+        fileName: file.name,
+        onProgress,
+        onError
+      }
+      this.list.push(item)
+      const upload = await this.doUpload(option)
+      item.url = this.buildUrl(upload.url)
+      item.value = upload.url
+      item.status = 'done'
+      this.emit()
+    },
+    doUpload (option) {
+      option.config = this.uploader
+      return this.getUploader().then(uploader => {
+        return uploader.upload(option).then(ret => {
+          if (this.suffix != null) {
+            ret.url += this.suffix
+          }
+          return ret
+        })
+      })
+    },
+    getUploader () {
+      let type = this.type
+      if (this.uploader != null && this.uploader.type != null) {
+        type = this.uploader.type
+      }
+      return D2pUploader.getUploader(type)
+    },
+    emit () {
+      const list = []
+      for (const item of this.list) {
+        if (item.status != null && item.status !== 'done') {
+          // 全部上传完再发通知
+          return
+        }
+        if (typeof (item) === 'string') {
+          list.push(item)
+        } else {
+          list.push(item.value)
+        }
+      }
+      let ret = list
+      if (this.limit === 1) {
+        ret = ((list && list.length > 0) ? list[0] : undefined)
+      }
+      this.emitValue = ret
+      this.$emit('input', ret)
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" >
+  .d2p-cropper-uploader{
+    .el-image-viewer__close{color:#fff}
+    &.is-disabled {
+      .image-list{
+        .image-item{
+          cursor: not-allowed;
+        }
+      }
+      i{cursor: not-allowed}
+    }
+    .image-list{
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      flex-wrap: wrap;
+      .image-item{
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #fbfdff;
+        border: 1px solid #c0ccda;
+        border-radius: 6px;
+        position: relative;
+        margin-right: 8px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        overflow: hidden;
+        &.image-plus{
+          border: 1px dashed #c0ccda;
+        }
+        .cropper-uploader-icon {
+          vertical-align: top;
+          font-size: 28px;
+          color: #8c939d;
+        }
+        .image{
+          width: 100px;
+          height: 100px;
+        }
+
+        .delete{
+          border-radius: 6px;
+          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,.9);
+          -webkit-transition: opacity .3s;
+          transition: opacity .3s;
+          &:hover{
+            opacity: 0.9;
+          }
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          i{
+            cursor: pointer;
+          }
+        }
+        .status-uploading{
+          border-radius: 6px;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          cursor: default;
+          text-align: center;
+          color: #fff;
+          opacity: 1;
+          font-size: 20px;
+          background-color: rgba(0, 0, 0, 0.5);
+          -webkit-transition: opacity .3s;
+          transition: opacity .3s;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .el-progress{
+            width: 70px;
+            height: 70px;
+            .el-progress__text {
+              color:#fff;
+            }
+          }
+
+        }
+        .status-done{
+          position: absolute;
+          right: -15px;
+          top: -6px;
+          width: 40px;
+          height: 24px;
+          background: #13ce66;
+          text-align: center;
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
+          box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          i{
+            font-size: 12px;
+            margin-top: 11px;
+            color: #fff;
+            -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+          }
+        }
+      }
+    }
+  }
+
+</style>
diff --git a/web/src/components/file-uploader/lib/cropper/index.vue b/web/src/components/file-uploader/lib/cropper/index.vue
new file mode 100644
index 0000000..58adcdc
--- /dev/null
+++ b/web/src/components/file-uploader/lib/cropper/index.vue
@@ -0,0 +1,420 @@
+<template>
+    <el-dialog class="cropper-uploader quying-dialog" :title="title" :visible.sync="dialogVisible" append-to-body
+               :before-close="handleClose" :close-on-click-modal="true" ref="editAvatar" :width="_dialogWidth" >
+          <div class="cropper-uploader-wrap" >
+            <input type="file" v-show="false" ref="fileinput" :accept="accept" @change="handleChange">
+            <!-- step1 -->
+            <div class="cropper-uploader__choose cropper-uploader_left" v-show="!isLoaded">
+              <el-button round @click="handleClick">+选择图片</el-button>
+              <p>{{_uploadTip}}</p>
+            </div>
+            <!-- step2 -->
+            <div class="cropper-uploader__edit cropper-uploader_left" v-show="isLoaded">
+              <div class="cropper-uploader__edit-area" >
+                    <vue-cropper
+                      ref="cropper"
+                      :src="imgSrc"
+                      preview=".preview"
+                      :style="{height:_cropperHeight}"
+                      v-bind="_cropper"
+                    />
+              </div>
+              <div class="tool-bar">
+                <el-button-group>
+                  <el-button round size="mini"  icon="el-icon-edit" @click="handleClick">重新选择</el-button>
+                  <el-button round size="mini" type=""  @click="flipX">左右翻转</el-button>
+                  <el-button round size="mini" type=""  @click="flipY">上下翻转</el-button>
+                  <el-button round size="mini" type=""  icon="el-icon-zoom-in" @click="zoom(0.1)"></el-button>
+                  <el-button round size="mini" type=""  icon="el-icon-zoom-out" @click="zoom(-0.1)"></el-button>
+                  <el-button round size="mini" type="" icon="el-icon-refresh-right" @click="rotate(90)">旋转</el-button>
+                  <el-button round size="mini" type="" icon="el-icon-refresh" @click="reset">重置</el-button>
+                </el-button-group>
+              </div>
+            </div>
+            <div class="cropper-uploader__preview">
+              <span class="cropper-uploader__preview-title">预览</span>
+              <div class="cropper-uploader__preview-120 preview"></div>
+              <div class="cropper-uploader__preview-65 preview" :class="{'round': _cropper.aspectRatio===1}"></div>
+            </div>
+          </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose" size="mini">取 消</el-button>
+        <el-button type="primary" size="mini" @click="doCropper()">确 定</el-button>
+      </div>
+    </el-dialog>
+</template>
+
+<script>
+import VueCropper from './vue-cropper'
+import log from 'd2p-extends/src/utils/util.log'
+// 图片裁剪对话框，封装cropperjs
+export default {
+  name: 'd2p-cropper',
+  components: {
+    VueCropper
+  },
+  props: {
+    // 对话框标题
+    title: {
+      type: String,
+      default: '图片裁剪'
+    },
+    // cropper的高度，默认为浏览器可视窗口高度的40%，最小270
+    cropperHeight: {
+      type: [String, Number]
+    },
+    // 对话框宽度，默认50%
+    dialogWidth: {
+      type: [String, Number],
+      default: '50%'
+    },
+    // 图片大小限制，单位MB，0为不限制
+    maxSize: {
+      type: Number,
+      default: 5
+    },
+    // 上传提示
+    uploadTip: {
+      type: String
+    },
+    // cropperjs的参数，详见：https://github.com/fengyuanchen/cropperjs
+    cropper: {
+      type: Object
+    },
+    // 可接收的文件后缀
+    accept: {
+      type: String,
+      default: '.jpg, .jpeg, .png, .gif, .webp'
+    },
+    // 输出类型，blob,dataUrl,all
+    output: {
+      type: String,
+      default: 'blob'// blob
+    }
+  },
+  data () {
+    return {
+      dialogVisible: false,
+      isLoaded: false,
+      imgSrc: '',
+      data: null,
+      file: undefined,
+      scale: {
+        x: 1,
+        y: 1
+      }
+    }
+  },
+  computed: {
+    _uploadTip () {
+      if (this.uploadTip != null && this.uploadTip !== '') {
+        return this.uploadTip
+      }
+      if (this.maxSize > 0) {
+        return `只支持${this.accept.replace(/,/g, '、')},大小不超过${this.maxSize}M`
+      } else {
+        return `只支持${this.accept},大小无限制`
+      }
+    },
+    _cropper () {
+      const def = {
+        aspectRatio: 1,
+        ready: this.ready
+      }
+      if (this.cropper == null) {
+        return def
+      }
+      const assign = Object.assign(def, this.cropper)
+      log.debug('cropper options:', assign)
+      return assign
+    },
+    _cropperHeight () {
+      let height = this.cropperHeight
+      if (height == null) {
+        height = document.documentElement.clientHeight * 0.55
+        if (height < 270) {
+          height = 270
+        }
+      }
+      if (typeof (height) === 'number') {
+        height += 'px'
+      }
+      return height
+    },
+    _dialogWidth () {
+      let width = this.dialogWidth
+      if (width == null) {
+        width = '50%'
+      }
+      if (typeof (width) === 'number') {
+        width += 'px'
+      }
+      return width
+    }
+  },
+  methods: {
+    open (url) {
+      this.dialogVisible = true
+      if (url != null && url !== '') {
+        this.imgSrc = url
+      }
+    },
+    close () {
+      this.dialogVisible = false
+    },
+    clear () {
+      this.isLoaded = false
+      if (this.$refs.fileinput != null) {
+        this.$refs.fileinput.value = null
+      }
+      if (this.$refs.cropper != null) {
+        this.$refs.cropper.clear()
+      }
+    },
+    // 获取vue-cropper组件对象
+    getCropper () {
+      return this.$refs.cropper
+    },
+    ready (event) {
+      log.debug('cropper ready:', event)
+      // this.zoom(-0.3)
+    },
+    preventDefault (e) {
+      e.preventDefault()
+      return false
+    },
+    // 点击按钮打开文件资源窗口
+    handleClick (e) {
+      this.$refs.fileinput.click()
+    },
+    // 检测选择的文件是否合适
+    checkFile (file) {
+      // 仅限图片
+      if (file.type.indexOf('image') === -1) {
+        this.$message({
+          message: '请选择合适的文件类型',
+          type: 'warning'
+        })
+        return false
+      }
+      // 超出大小
+      if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
+        this.$message({
+          message: '图片大小超出最大限制（' + this.maxSize + 'MB），请重新选择',
+          type: 'warning'
+        })
+        return false
+      }
+      return true
+    },
+
+    // 触发input框的change事件选择图片
+    handleChange (e) {
+      e.preventDefault()
+      const files = e.target.files || e.dataTransfer.files
+      this.isLoaded = true
+      const file = files[0]
+      if (this.checkFile(file)) {
+        this.file = file
+        this.setImage(e)
+        // setTimeout(() => {
+        //   this.zoom(-0.3)
+        // }, 1)
+      }
+    },
+    // 点击关闭弹窗
+    handleClose () {
+      this.dialogVisible = false
+      this.$emit('cancel')
+    },
+    doCropper () {
+      if (!this.isLoaded) {
+        this.$message('请先选择图片')
+        return
+      }
+      this.dialogVisible = false
+      this.doOutput(this.file)
+    },
+    doOutput (file) {
+      log.debug('output this:', this)
+      const ret = { file }
+      if (this.output === 'all') {
+        this.getCropImageBlob((blob) => {
+          const dataUrl = this.cropImageDataUrl()
+          ret.blob = blob
+          ret.dataUrl = dataUrl
+          this.$emit('done', ret)
+        })
+      }
+
+      if (this.output === 'blob') {
+        this.getCropImageBlob((blob) => {
+          ret.blob = blob
+          this.$emit('done', ret)
+        })
+      }
+      if (this.output === 'dataUrl') {
+        ret.dataUrl = this.cropImageDataUrl()
+        this.$emit('done', ret)
+      }
+    },
+    emit (result) {
+      this.$emit('done', result)
+    },
+    cropImageDataUrl () {
+      // get image data for post processing, e.g. upload or setting image src
+      return this.$refs.cropper.getCroppedCanvas().toDataURL()
+    },
+    getCropImageBlob (callback, type, quality) {
+      this.$refs.cropper.getCroppedCanvas().toBlob(callback, type, quality)
+    },
+    flipX () {
+      this.$refs.cropper.scaleX(this.scale.x *= -1)
+    },
+    flipY () {
+      this.$refs.cropper.scaleY(this.scale.y *= -1)
+    },
+    getCropBoxData () {
+      this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4)
+    },
+    getData () {
+      this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4)
+    },
+    move (offsetX, offsetY) {
+      this.$refs.cropper.move(offsetX, offsetY)
+    },
+    reset () {
+      this.$refs.cropper.reset()
+    },
+    rotate (deg) {
+      this.$refs.cropper.rotate(deg)
+    },
+    setCropBoxData () {
+      if (!this.data) return
+      this.$refs.cropper.setCropBoxData(JSON.parse(this.data))
+    },
+    setData () {
+      if (!this.data) return
+      this.$refs.cropper.setData(JSON.parse(this.data))
+    },
+    setImage (e) {
+      const file = e.target.files[0]
+      if (file.type.indexOf('image/') === -1) {
+        this.$message('Please select an image file')
+        return
+      }
+      if (typeof FileReader === 'function') {
+        const reader = new FileReader()
+        reader.onload = (event) => {
+          this.imgSrc = event.target.result
+          // rebuild cropperjs with the updated source
+          this.$refs.cropper.replace(event.target.result)
+        }
+        reader.readAsDataURL(file)
+      } else {
+        this.$message('Sorry, FileReader API not supported')
+      }
+    },
+    showFileChooser () {
+      this.$refs.input.click()
+    },
+    zoom (percent) {
+      this.$refs.cropper.relativeZoom(percent)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  $area-height: 280px;
+  .cropper-uploader {
+    &-wrap {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+    }
+
+    &_left {
+      font-size: 13px;
+      color: #999999;
+      position: relative;
+      background: #ecf2f6;
+      flex-grow:5;
+      margin:10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction:  column
+    }
+
+    &__choose {
+      p {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    &__edit {
+      &-area {
+        width:100%;
+        overflow: hidden;
+
+        &-img {
+          object-fit: cover;
+        }
+      }
+      .tool-bar{
+        margin:10px;position: absolute;bottom: -50px;
+      }
+    }
+
+    $top: 30px;
+
+    &__preview {
+      background: #ecf2f6;
+      text-align: center;
+      width: 200px;
+      padding-top: $top;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 13px;
+      margin:10px;
+      padding:10px;
+      &-title {
+        color: #999999;
+      }
+      .preview{
+        overflow: hidden;
+        margin:10px;
+        border: 1px #cacaca solid;
+      }
+      .round{
+        border-radius: 500px;
+      }
+
+      img {
+        background: #fff;
+        margin-top: 5px;
+        border-radius: 500px;
+      }
+
+      &-120 {
+        height: 120px;
+        width: 120px;
+      }
+
+      &-65 {
+        height: 65px;
+        width: 65px;
+      }
+
+      &-40 {
+        height: 30px;
+        width: 30px;
+      }
+    }
+  }
+</style>
diff --git a/web/src/components/file-uploader/lib/cropper/vue-cropper.js b/web/src/components/file-uploader/lib/cropper/vue-cropper.js
new file mode 100644
index 0000000..e57a3c8
--- /dev/null
+++ b/web/src/components/file-uploader/lib/cropper/vue-cropper.js
@@ -0,0 +1,367 @@
+import Cropper from 'cropperjs'
+
+const previewPropType = typeof window === 'undefined'
+  ? [String, Array]
+  : [String, Array, Element, NodeList]
+
+export default {
+  render (h) {
+    return h('div', { style: this.containerStyle }, [
+      h('img', {
+        ref: 'img',
+        attrs: {
+          src: this.src,
+          alt: this.alt || 'image',
+          style: 'max-width: 100%'
+        },
+        style: this.imgStyle
+      })
+    ])
+  },
+  props: {
+    // Library props
+    containerStyle: Object,
+    src: {
+      type: String,
+      default: ''
+    },
+    alt: String,
+    imgStyle: Object,
+
+    // CropperJS props
+    viewMode: Number,
+    dragMode: String,
+    initialAspectRatio: Number,
+    aspectRatio: Number,
+    data: Object,
+    preview: previewPropType,
+    responsive: {
+      type: Boolean,
+      default: true
+    },
+    restore: {
+      type: Boolean,
+      default: true
+    },
+    checkCrossOrigin: {
+      type: Boolean,
+      default: true
+    },
+    checkOrientation: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    guides: {
+      type: Boolean,
+      default: true
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    highlight: {
+      type: Boolean,
+      default: true
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoCrop: {
+      type: Boolean,
+      default: true
+    },
+    autoCropArea: Number,
+    movable: {
+      type: Boolean,
+      default: true
+    },
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    scalable: {
+      type: Boolean,
+      default: true
+    },
+    zoomable: {
+      type: Boolean,
+      default: true
+    },
+    zoomOnTouch: {
+      type: Boolean,
+      default: true
+    },
+    zoomOnWheel: {
+      type: Boolean,
+      default: true
+    },
+    wheelZoomRatio: Number,
+    cropBoxMovable: {
+      type: Boolean,
+      default: true
+    },
+    cropBoxResizable: {
+      type: Boolean,
+      default: true
+    },
+    toggleDragModeOnDblclick: {
+      type: Boolean,
+      default: true
+    },
+
+    // Size limitation
+    minCanvasWidth: Number,
+    minCanvasHeight: Number,
+    minCropBoxWidth: Number,
+    minCropBoxHeight: Number,
+    minContainerWidth: Number,
+    minContainerHeight: Number,
+
+    // callbacks
+    ready: Function,
+    cropstart: Function,
+    cropmove: Function,
+    cropend: Function,
+    crop: Function,
+    zoom: Function
+  },
+  mounted () {
+    const { containerStyle, src, alt, imgStyle, ...data } = this.$options.props
+    const props = {}
+
+    for (const key in data) {
+      if (this[key] !== undefined) {
+        props[key] = this[key]
+      }
+    }
+
+    this.cropper = new Cropper(this.$refs.img, props)
+  },
+  methods: {
+    // Reset the image and crop box to their initial states
+    reset () {
+      return this.cropper.reset()
+    },
+
+    // Clear the crop box
+    clear () {
+      return this.cropper.clear()
+    },
+
+    // Init crop box manually
+    initCrop () {
+      return this.cropper.crop()
+    },
+
+    /**
+     * Replace the image's src and rebuild the cropper
+     * @param {string} url - The new URL.
+     * @param {boolean} [onlyColorChanged] - Indicate if the new image only changed color.
+     * @returns {Object} this
+     */
+    replace (url, onlyColorChanged = false) {
+      return this.cropper.replace(url, onlyColorChanged)
+    },
+
+    // Enable (unfreeze) the cropper
+    enable () {
+      return this.cropper.enable()
+    },
+
+    // Disable (freeze) the cropper
+    disable () {
+      return this.cropper.disable()
+    },
+
+    // Destroy the cropper and remove the instance from the image
+    destroy () {
+      return this.cropper.destroy()
+    },
+
+    /**
+     * Move the canvas with relative offsets
+     * @param {number} offsetX - The relative offset distance on the x-axis.
+     * @param {number} offsetY - The relative offset distance on the y-axis.
+     * @returns {Object} this
+     */
+    move (offsetX, offsetY) {
+      return this.cropper.move(offsetX, offsetY)
+    },
+
+    /**
+     * Move the canvas to an absolute point
+     * @param {number} x - The x-axis coordinate.
+     * @param {number} [y=x] - The y-axis coordinate.
+     * @returns {Object} this
+     */
+    moveTo (x, y = x) {
+      return this.cropper.moveTo(x, y)
+    },
+
+    /**
+     * Zoom the canvas with a relative ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    relativeZoom (ratio, _originalEvent) {
+      return this.cropper.zoom(ratio, _originalEvent)
+    },
+
+    /**
+     * Zoom the canvas to an absolute ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    zoomTo (ratio, _originalEvent) {
+      return this.cropper.zoomTo(ratio, _originalEvent)
+    },
+
+    /**
+     * Rotate the canvas with a relative degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotate (degree) {
+      return this.cropper.rotate(degree)
+    },
+
+    /**
+     * Rotate the canvas to an absolute degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotateTo (degree) {
+      return this.cropper.rotateTo(degree)
+    },
+
+    /**
+     * Scale the image on the x-axis.
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @returns {Object} this
+     */
+    scaleX (scaleX) {
+      return this.cropper.scaleX(scaleX)
+    },
+
+    /**
+     * Scale the image on the y-axis.
+     * @param {number} scaleY - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scaleY (scaleY) {
+      return this.cropper.scaleY(scaleY)
+    },
+
+    /**
+     * Scale the image
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scale (scaleX, scaleY = scaleX) {
+      return this.cropper.scale(scaleX, scaleY)
+    },
+
+    /**
+     * Get the cropped area position and size data (base on the original image)
+     * @param {boolean} [rounded=false] - Indicate if round the data values or not.
+     * @returns {Object} The result cropped data.
+     */
+    getData (rounded = false) {
+      return this.cropper.getData(rounded)
+    },
+
+    /**
+     * Set the cropped area position and size with new data
+     * @param {Object} data - The new data.
+     * @returns {Object} this
+     */
+    setData (data) {
+      return this.cropper.setData(data)
+    },
+
+    /**
+     * Get the container size data.
+     * @returns {Object} The result container data.
+     */
+    getContainerData () {
+      return this.cropper.getContainerData()
+    },
+
+    /**
+     * Get the image position and size data.
+     * @returns {Object} The result image data.
+     */
+    getImageData () {
+      return this.cropper.getImageData()
+    },
+
+    /**
+     * Get the canvas position and size data.
+     * @returns {Object} The result canvas data.
+     */
+    getCanvasData () {
+      return this.cropper.getCanvasData()
+    },
+
+    /**
+     * Set the canvas position and size with new data.
+     * @param {Object} data - The new canvas data.
+     * @returns {Object} this
+     */
+    setCanvasData (data) {
+      return this.cropper.setCanvasData(data)
+    },
+
+    /**
+     * Get the crop box position and size data.
+     * @returns {Object} The result crop box data.
+     */
+    getCropBoxData () {
+      return this.cropper.getCropBoxData()
+    },
+
+    /**
+     * Set the crop box position and size with new data.
+     * @param {Object} data - The new crop box data.
+     * @returns {Object} this
+     */
+    setCropBoxData (data) {
+      return this.cropper.setCropBoxData(data)
+    },
+
+    /**
+     * Get a canvas drawn the cropped image.
+     * @param {Object} [options={}] - The config options.
+     * @returns {HTMLCanvasElement} - The result canvas.
+     */
+    getCroppedCanvas (options = {}) {
+      return this.cropper.getCroppedCanvas(options)
+    },
+
+    /**
+     * Change the aspect ratio of the crop box.
+     * @param {number} aspectRatio - The new aspect ratio.
+     * @returns {Object} this
+     */
+    setAspectRatio (aspectRatio) {
+      return this.cropper.setAspectRatio(aspectRatio)
+    },
+
+    /**
+     * Change the drag mode.
+     * @param {string} mode - The new drag mode.
+     * @returns {Object} this
+     */
+    setDragMode (mode) {
+      return this.cropper.setDragMode(mode)
+    }
+  }
+}
diff --git a/web/src/components/file-uploader/lib/file-uploader.vue b/web/src/components/file-uploader/lib/file-uploader.vue
new file mode 100644
index 0000000..7a0c5ca
--- /dev/null
+++ b/web/src/components/file-uploader/lib/file-uploader.vue
@@ -0,0 +1,666 @@
+<template>
+  <div class="d2p-file-uploader" :class="{'is-disabled':disabled}" >
+  <el-upload :class="uploadClass"
+             :file-list="fileList"
+             :disabled="disabled"
+             :http-request="httpRequest"
+             :on-exceed="onExceed"
+             :on-remove="handleUploadFileRemove"
+             :on-success="handleUploadFileSuccess"
+             :on-error="handleUploadFileError"
+             :on-progress="handleUploadProgress"
+             @blur="handleBlur"
+             ref="fileUploader"
+             v-bind="_elProps"
+  >
+    <el-button :disabled="disabled" :size="btnSize" type="primary" v-if="_elProps.listType === 'text' || this._elProps.listType === 'picture'">{{btnName}}</el-button>
+    <div class="avatar-item-wrapper"  v-else-if="this._elProps.listType === 'picture-card'">
+      <i class="el-icon-plus avatar-uploader-icon" />
+    </div>
+    <template v-else-if="_elProps.listType ===  'avatar'">
+      <div class="avatar-item-wrapper">
+        <div class="status-uploading" v-if="avatarLoading!=null">
+          <el-progress type="circle" :percentage="avatarLoading" :width="70"/>
+        </div>
+        <div v-if="avatarUrl!=null" class="avatar">
+          <el-image :src="avatarUrl">
+            <div slot="placeholder" class="image-slot">
+              <img src="./loading-spin.svg">
+            </div>
+          </el-image>
+          <div class="preview" @click.stop="" >
+            <i class="el-icon-zoom-in" @click="previewAvatar"></i>
+            <i class="el-icon-delete" v-if="!disabled" @click="removeAvatar"></i>
+          </div>
+        </div>
+        <i class="el-icon-plus avatar-uploader-icon" v-else/>
+      </div>
+    </template>
+  </el-upload>
+    <el-dialog :visible.sync="dialogVisible"  v-bind="preview" append-to-body >
+      <div style="text-align: center">
+        <img  style="max-width: 100%;" :src="dialogImageUrl" alt="">
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import SparkMD5 from 'spark-md5'
+import D2pUploader from 'd2p-extends/src/uploader'
+import lodash from 'lodash'
+import { d2CrudPlus } from 'd2-crud-plus'
+import log from 'd2p-extends/src/utils/util.log'
+import util from '@/libs/util'
+// 文件上传组件,依赖D2pUploader
+export default {
+  name: 'd2p-file-uploader',
+  mixins: [d2CrudPlus.inputBase],
+  props: {
+    // 选择文件按钮的大小
+    btnSize: { default: 'small' },
+    // 选择文件按钮的名称
+    btnName: { default: '选择文件' },
+    // 可选哪些类型的文件
+    accept: {},
+    // 上传后端类型，[cos,qiniu,alioss,form]
+    type: {
+      type: String,
+      default: undefined // 上传类型：form cos qiniu  alioss
+    },
+    // 值：url<br/>
+    // 或 [url1,url2]<br/>
+    // 或 {url:'url',md5:'',size:number}<br/>
+    // 或 [{url:'url',md5:'',size:number}]<br/>
+    // <br/>
+    // limit=1 时 input事件返回 {url:'url',md5:'',size:number}<br/>
+    // limit>1 时 input事件返回 数组<br/>
+    value: {
+      type: [String, Array, Object]
+    },
+    // 样式后缀 追加到url的后面，进行图片处理，需要到对象存储平台配置样式
+    suffix: {
+      type: String,
+      required: false
+    },
+    // 返回类型: url=仅返回链接, object=包含md5和size , key=仅返回文件key
+    returnType: {
+      type: String,
+      default: 'url'
+    },
+    // 自定义参数
+    custom: {
+      type: Object
+    },
+    // 内部封装[el-upload](https://element.eleme.cn/#/zh-CN/component/upload)组件的属性参数<br/>
+    // 注意，form方式上传的action、name、headers等参数不在此设置
+    elProps: {
+      type: Object
+    },
+    // 预览对话框的配置
+    preview: {
+      type: Object
+    },
+    // 文件大小限制 <br/>
+    // 如果传入{limit,tip(fileSize,limit){vm.$message('可以自定义提示')}}
+    sizeLimit: {
+      type: Number, Object
+    },
+    // 构建下载url方法
+    buildUrl: {
+      type: Function,
+      default: function (value, item) { return (typeof value === 'object') ? item.url : value }
+    },
+    // 上传组件参数，会临时覆盖全局上传配置参数[d2p-uploader](/guide/extends/uploader.html)
+    uploader: {
+      type: Object,
+      default () { return {} }
+    },
+    // 与el-upload一致
+    beforeUpload: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      context: {},
+      dialogImageUrl: '',
+      dialogVisible: false,
+      avatarLoading: undefined,
+      baseURL: util.baseURL()
+    }
+  },
+  created () {
+    this.emitValue = this.value
+    this.initValue(this.value)
+  },
+  watch: {
+    value (value) {
+      if (this.dispatch) {
+        this.dispatch('ElFormItem', 'el.form.blur')
+      }
+      this.$emit('change', value)
+      if (this.emitValue === value) {
+        return
+      }
+      this.emitValue = value
+      this.initValue(value)
+    }
+  },
+  computed: {
+    _elProps () {
+      const defaultElProps = this.getDefaultElProps()
+      Object.assign(defaultElProps, this.elProps)
+      return defaultElProps
+    },
+    avatarUrl () {
+      if (this.fileList.length > 0) {
+        const file = this.fileList[0]
+        log.debug('file,', file, file.status)
+        if (file.response != null && file.response.url != null) {
+          return file.response.url
+        } else if (file.url != null) {
+          return file.url
+        }
+      }
+      return null
+    },
+    uploadClass () {
+      if (this._elProps.listType === 'avatar') {
+        return 'avatar-uploader'
+      } else if (this._elProps.listType === 'picture-card') {
+        if (this.fileList && this._elProps.limit !== 0 && this.fileList.length >= this._elProps.limit) {
+          return 'image-uploader hide-plus'
+        }
+        return 'image-uploader'
+      }
+      return 'file-uploader'
+    }
+  },
+  methods: {
+    handleBlur () {
+      console.log('blur')
+    },
+    getDefaultElProps () {
+      return {
+        limit: 0,
+        listType: 'text',
+        showFileList: true,
+        action: '',
+        onPreview: (file) => {
+          if (this._elProps.listType === 'picture-card' || this._elProps.listType === 'picture' || this._elProps.listType === 'avatar') {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+          } else {
+            window.open(file.url)
+          }
+        },
+        beforeUpload: async (file) => {
+          if (this.beforeUpload) {
+            const ret = await this.beforeUpload(file, { vm: this })
+            if (ret === false) {
+              return
+            }
+          }
+          if (this.sizeLimit == null) {
+            return true
+          }
+          let limit = this.sizeLimit
+          let showMessage = null
+          if (typeof limit === 'number') {
+            limit = this.sizeLimit
+            showMessage = (fileSize, limit) => {
+              if (this.$message) {
+                const limitTip = this.computeFileSize(limit)
+                const fileSizeTip = this.computeFileSize(file.size)
+                this.$message({ message: '文件大小不能超过' + limitTip + '，当前文件大小:' + fileSizeTip, type: 'warning' })
+              }
+            }
+          } else {
+            limit = this.sizeLimit.limit
+            showMessage = this.sizeLimit.tip
+          }
+          if (file.size > limit) {
+            log.debug('文件大小超过限制：', file.size)
+            showMessage(file.size, limit)
+            return false
+          }
+        }
+      }
+    },
+    setValue (value) {
+      this.initValue(value)
+      // this.$emit('change', this.fileList)
+    },
+    getUploader () {
+      let type = this.type
+      if (this.uploader != null && this.uploader.type != null) {
+        type = this.uploader.type
+      }
+      return D2pUploader.getUploader(type)
+    },
+    initValue (value) {
+      let fileList = []
+      if (value == null) {
+
+      } else if (typeof (value) === 'string') {
+        if (value !== '') {
+          const fileName = value.substring(value.lastIndexOf('/') + 1)
+          fileList = [{ value: value, name: fileName }]
+        }
+      } else if (value instanceof Array) {
+        if (value.length > 0 && typeof (value[0]) === 'string') {
+          const tmp = []
+          value.forEach(item => {
+            const fileName = item.substring(item.lastIndexOf('/') + 1)
+            tmp.push({ value: item, name: fileName })
+          })
+          fileList = tmp
+        } else {
+          fileList = value
+        }
+      } else if (value instanceof Object) {
+        fileList = [value]
+      }
+      for (const item of fileList) {
+        if (item.value == null) {
+          item.value = item.url
+        }
+        item.url = this.buildUrl(item.value, item)
+      }
+      this.resetFileList(fileList)
+    },
+    computeFileSize (fileSize) {
+      let sizeTip = fileSize
+      if (fileSize > (1024 * 1024 * 1024)) {
+        sizeTip = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
+      } else if (fileSize > (1024 * 1024)) {
+        sizeTip = (fileSize / (1024 * 1024)).toFixed(2) + 'M'
+      } else {
+        sizeTip = Math.round(fileSize / (1024)) + 'K'
+      }
+      return sizeTip
+    },
+    resetFileList (fileList) {
+      this.$set(this, 'fileList', fileList)
+    },
+    handleUploadProgress (event, file, fileList) {
+      if (this._elProps.listType === 'avatar') {
+        log.debug('progress', event, file)
+        this.avatarLoading = Math.floor(event.percent)
+        if (event.percent === 100) {
+          this.avatarLoading = undefined
+        }
+      }
+      this.$emit('progress', event, { file, fileList, vm: this })
+    },
+    handleUploadFileSuccess (res, file, fileList) {
+      res.size = res.size != null ? res.size : file.size
+      res.name = res.name != null ? res.name : file.name
+      res.value = this.getReturnValue(res)
+      const value = this.returnType === 'object' ? res.url : res.value
+      const url = this.buildUrl(value, res)
+      file.url = res.url = url
+      this.resetFileList(fileList)
+      this.$emit('success', res, file)
+      const list = []
+      for (const item of fileList) {
+        // if (item.status === 'uploading') {
+        //   log.debug('当前文件上传完成，等待剩下的文件全部上传成功后再更新value')
+        //   return
+        // }
+        item.url = this.baseURL + url
+        if (item.response != null && item.response.url != null) {
+          list.push({ ...item.response })
+        } else {
+          list.push(item)
+        }
+      }
+      log.debug('handleUploadFileSuccess list', list, res)
+      this.emit(res, list)
+    },
+    isHasUploadingItem () {
+      const fileList = this.$refs.fileUploader.uploadFiles
+      if (fileList && fileList.length > 0) {
+        for (const item of fileList) {
+          if (item.status === 'uploading') {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    handleUploadFileRemove (file, fileList) {
+      this.fileList = fileList
+      console.log('remove', fileList)
+      this.emitList(fileList)
+      this.$emit('remove', file, fileList)
+    },
+    handleUploadFileError (err, file, fileList) {
+      console.error('文件上传失败', err, file, fileList)
+      this.$message({ type: 'error', message: '文件上传失败' })
+      this.$emit('error', err, file, fileList)
+    },
+    previewAvatar ($event) {
+      $event.stopPropagation()
+      this._elProps.onPreview(this.fileList[0])
+    },
+    removeAvatar ($event) {
+      $event.stopPropagation()
+      this.resetFileList([])
+      this.emit() // 返回undefined，相当于清空已有的值
+    },
+    emit (res, list) {
+      if (this._elProps.limit === 1) {
+        const value = res ? res.value : undefined
+        this.emitValue = value
+        this.$emit('input', value)
+      } else {
+        this.emitList(list)
+      }
+    },
+    emitList (list) {
+      if (list) {
+        const tmp = []
+        list.forEach(item => {
+          tmp.push(this.getReturnValue(item))
+        })
+        list = tmp
+      }
+      this.emitValue = list
+      this.$emit('input', list)
+    },
+    getReturnValue (item) {
+      const value = item[this.returnType]
+      if (value != null) {
+        return value
+      }
+      return item
+    },
+    httpRequest (option) {
+      Promise.all([
+        this.doUpload(option),
+        this.computeMd5(option.file)
+      ]).then((ret) => {
+        // 得到组合结果， size，md5
+        const result = ret[0]
+        result.md5 = ret[1]
+        option.onSuccess(result)
+      })
+    },
+    doUpload (option) {
+      let config = this.uploader
+      if (config == null) {
+        config = {}
+      }
+      if (!lodash.isEmpty(this._elProps.action)) {
+        config.action = this._elProps.action
+      }
+      if (!lodash.isEmpty(this._elProps.name)) {
+        config.name = this._elProps.name
+      }
+      if (!lodash.isEmpty(this._elProps.data)) {
+        config.data = this._elProps.data
+      }
+      if (!lodash.isEmpty(this._elProps.headers)) {
+        config.headers = this._elProps.headers
+      }
+      if (!lodash.isEmpty(this.custom)) {
+        config.custom = this.custom
+      }
+      const uploadOption = {
+        file: option.file,
+        fileName: option.file.name,
+        onProgress: option.onProgress,
+        onError: option.onError,
+        config: config
+      }
+      this.$emit('start', uploadOption)
+      return this.getUploader().then(uploader => {
+        return uploader.upload(uploadOption)
+      }).then(ret => {
+        if (this.suffix != null) {
+          ret.url += this.suffix
+        }
+        return ret
+      })
+    },
+    onExceed (files, fileList) {
+      log.debug('文件数量超出限制')
+      if (this._elProps.limit === 1) {
+        this.clearFiles()
+        this.$refs.fileUploader.handleStart(files[0])
+        this.$refs.fileUploader.submit()
+        return
+      }
+      this.$message({
+        showClose: true,
+        message: '已达最大限制数量，请删除一个文件后再上传',
+        type: 'warning'
+      })
+    },
+    clearFiles () {
+      if (this.$refs.fileUploader != null) {
+        this.$refs.fileUploader.clearFiles()
+      }
+    },
+    getFileList () {
+      return this.fileList
+    },
+    computeMd5 (file) {
+      return new Promise((resolve, reject) => {
+        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
+        const chunkSize = 2097152 // Read in chunks of 2MB
+        const chunks = Math.ceil(file.size / chunkSize)
+        let currentChunk = 0
+        const spark = new SparkMD5.ArrayBuffer()
+        const fileReader = new FileReader()
+
+        fileReader.onload = (e) => {
+          spark.append(e.target.result) // Append array buffer
+          currentChunk++
+
+          if (currentChunk < chunks) {
+            loadNext()
+          } else {
+            const md5 = spark.end()
+            log.debug('computed hash', md5) // Compute hash
+
+            resolve(md5)
+          }
+        }
+
+        fileReader.onerror = function (error) {
+          // eslint-disable-next-line prefer-promise-reject-errors
+          reject('md5 computer error', error)
+        }
+
+        function loadNext () {
+          const start = currentChunk * chunkSize
+          const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
+
+          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
+        }
+
+        loadNext()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .d2p-file-uploader{
+    &.is-disabled{
+      .avatar-item-wrapper{
+        background-color: #F5F7FA;
+        border-color: #E4E7ED;
+        color: #C0C4CC;
+        cursor: not-allowed
+      }
+      li{
+        cursor: not-allowed
+      }
+      .el-upload-list__item-actions{
+        cursor: not-allowed
+      }
+    }
+    .hide-plus{
+      .el-upload--picture-card{
+        display: none;
+      }
+    }
+    .avatar-uploader{
+      display: flex;
+      .el-upload{
+        width: 100px;
+        height: 100px;
+        /*display: flex;*/
+        /*justify-content: center;*/
+        /*align-items: center;*/
+        background-color: #fbfdff;
+        border: 1px dashed #c0ccda;
+        border-radius: 6px;
+      }
+      .el-upload img{
+        max-width: 100px;
+        max-height: 100px;
+      }
+      .el-icon-plus.avatar-uploader-icon {
+        vertical-align: top;
+        font-size: 28px;
+        color: #8c939d;
+        line-height: 100px;
+      }
+      .status-uploading{
+        border-radius: 6px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        cursor: default;
+        text-align: center;
+        color: #fff;
+        opacity: 1;
+        font-size: 20px;
+        background-color: rgba(0, 0, 0, 0.5);
+        -webkit-transition: opacity .3s;
+        transition: opacity .3s;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .el-progress{
+          width: 70px;
+          height: 70px;
+          .el-progress__text {
+            color:#fff;
+          }
+        }
+
+      }
+    }
+    .el-upload--picture-card .el-icon-plus.avatar-uploader-icon {
+      vertical-align: top;
+      font-size: 28px;
+      color: #8c939d;
+      line-height: 100px;
+    }
+    .image-uploader .el-upload-list--picture-card .el-upload-list__item-thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+      width:auto;
+      height: auto;
+    }
+     .el-upload-list--picture .el-upload-list__item-thumbnail {
+      max-height: 100%;
+      height: auto;
+    }
+    .image-uploader .el-upload-list--picture-card .el-upload-list__item {
+      /*display: flex;*/
+      /*justify-content: center;*/
+      /*align-items: center;*/
+      text-align: center;
+      line-height: 125px;
+    }
+    .image-uploader{
+      /*display: flex;flex-wrap: wrap;*/
+      .el-upload-list--picture-card .el-upload-list__item-actions{
+        line-height: 100px;
+      }
+      .el-upload-list--picture-card {
+        /*display: flex;*/
+        /*flex-wrap: wrap;*/
+      }
+      .el-upload-list__item-status-label{
+        line-height: 1;
+      }
+    }
+
+    .el-upload--picture-card {
+      background-color: #fbfdff;
+      border: 1px dashed #c0ccda;
+      border-radius: 6px;
+      box-sizing: border-box;
+      width: 100px;
+      height: 100px;
+      cursor: pointer;
+      /*display: flex;*/
+      /*justify-content: center;*/
+      /*align-items: center;*/
+    }
+    .el-upload-list--picture-card {
+      .el-upload-list__item{
+        width: 100px;
+        height: 100px;
+      }
+      .el-progress-circle{
+        width: 70px !important;
+        height: 70px !important;
+      }
+      .el-progress{
+        width: 70px !important;
+        height: 70px !important;
+      }
+    }
+    .avatar-item-wrapper{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .avatar{
+        display: contents;
+      }
+    }
+
+    .preview{
+      border-radius: 6px;
+      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,.9);
+      -webkit-transition: opacity .3s;
+      transition: opacity .3s;
+      &:hover{
+        opacity: 0.9;
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      i{
+        margin: 0 7px;
+        cursor: pointer;
+      }
+    }
+  }
+
+</style>
diff --git a/web/src/components/file-uploader/lib/files-format.vue b/web/src/components/file-uploader/lib/files-format.vue
new file mode 100644
index 0000000..7fc52c6
--- /dev/null
+++ b/web/src/components/file-uploader/lib/files-format.vue
@@ -0,0 +1,96 @@
+<template>
+  <span>
+    <template v-if="type === 'text'">
+      <span v-for="(item) in items" :key="item.url" >
+        <el-link type="primary" size="mini" :underline="false" :href="item.url"  target="_blank"> {{item.name}} </el-link>
+      </span>
+    </template>
+    <template v-else >
+      <el-tag class='tag-item  d2-mr-5 d2-mb-2 d2-mt-2' v-for="(item) in items" :key="item.url"  size="small"  :type="item.color"  >
+        <el-link type="primary"  :underline="false" :href="item.url"  target="_blank">{{item.name}}</el-link>
+      </el-tag>
+    </template>
+  </span>
+</template>
+
+<script>
+// 文件格式化展示组件
+export default {
+  name: 'd2p-files-format',
+  props: {
+    // 值
+    value: {
+      require: true
+    },
+    // 颜色，【primary, success, warning, danger ,info】
+    color: {
+      require: false,
+      default: 'primary'
+    },
+    // 展示类型【text, tag】
+    type: {
+      default: 'tag' // 可选【text,tag】
+    },
+    // 构建下载url方法
+    buildUrl: {
+      type: Function,
+      default: function (value, item) { return value }
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    items () {
+      if (this.value == null || this.value === '') {
+        return []
+      }
+      let valueArr = []
+      if (typeof (this.value) === 'string') {
+        valueArr = [this.getItem(this.value)]
+      } else if (this.value instanceof Array) {
+        // 本来就是数组的
+        valueArr = []
+        for (const val of this.value) {
+          valueArr.push(this.getItem(val))
+        }
+      } else if (this.value instanceof Object) {
+        valueArr = []
+        valueArr.push(this.getItem(this.value))
+      }
+      return valueArr
+    }
+  },
+  created () {
+  },
+  methods: {
+    getFileName (url) {
+      if (url && url.lastIndexOf('/') >= 0) {
+        return url.substring(url.lastIndexOf('/') + 1)
+      }
+      return url
+    },
+    getItem (value) {
+      const url = this.buildUrl(value)
+      return {
+        url,
+        value: value,
+        name: this.getFileName(url),
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+<style >
+  .d2-mb-2{margin-bottom: 2px}
+  .d2-mt-2{margin-top: 2px;}
+  .d2-mr-5{margin-right: 5px;}
+  .tag-item{
+    margin-right: 10px;
+  }
+  .el-divider__text, .el-link {
+    font-size: inherit;
+  }
+</style>
diff --git a/web/src/components/file-uploader/lib/images-format.vue b/web/src/components/file-uploader/lib/images-format.vue
new file mode 100644
index 0000000..8e4b4d2
--- /dev/null
+++ b/web/src/components/file-uploader/lib/images-format.vue
@@ -0,0 +1,133 @@
+<template>
+  <span class="d2p-image-format">
+     <el-image
+       :style="{width:imgWidth,height:imgHeight,'margin-right':'10px',border:'1px solid #eee'}"
+       v-for="url in urls"  :key="url" :src="url"
+       v-bind="_elProps" >
+        <div slot="placeholder" class="image-slot">
+            <img style="max-width:50%" src="./loading-spin.svg">
+          </div>
+       <template v-if="error==='slot'">
+         <div slot="error" class="image-slot">
+            <slot name="error"/>
+         </div>
+       </template>
+       <template v-else-if="error">
+         <div slot="error" class="image-slot">
+            <img :src="error" width="50%"/>
+         </div>
+       </template>
+     </el-image>
+  </span>
+</template>
+
+<script>
+// 图片行展示组件
+export default {
+  name: 'd2p-images-format',
+  props: {
+    // 图片的url
+    // 'url' 或 ['url1','url2']
+    value: {
+      type: [String, Array],
+      require: true
+    },
+    // 图片的宽度设置
+    width: {
+      require: false,
+      default: 30
+    },
+    // 图片的高度设置
+    height: {
+      require: false,
+      default: 30
+    },
+    fit: {
+      default: 'contain'
+    },
+    // 内部封装[el-image](https://element.eleme.cn/#/zh-CN/component/image)组件的属性参数<br/>
+    elProps: {
+      type: Object
+    },
+    error: {
+      default: undefined
+    },
+    // 构建下载url方法
+    buildUrl: {
+      type: Function,
+      default: function (value, item) { return value }
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    urls () {
+      const urls = []
+      if (this.value == null || this.value === '') {
+        return urls
+      }
+      if (typeof (this.value) === 'string') {
+        urls.push(this.value)
+      } else if (this.value instanceof Array) {
+        for (const item of this.value) {
+          if (item == null) {
+            continue
+          }
+          if (item.url != null) {
+            urls.push(item.url)
+          } else {
+            urls.push(item)
+          }
+        }
+      } else {
+        urls.push(this.value.url)
+      }
+      const arr = []
+      for (const url of urls) {
+        arr.push(this.buildUrl(url))
+      }
+      return arr
+    },
+    imgHeight () {
+      if (typeof (this.height) === 'number') {
+        return this.height + 'px'
+      }
+      return this.height
+    },
+    imgWidth () {
+      if (typeof (this.width) === 'number') {
+        return this.width + 'px'
+      }
+      return this.width
+    },
+    _elProps () {
+      const defaultElProps = { fit: this.fit, previewSrcList: this.urls }
+      Object.assign(defaultElProps, this.elProps)
+      return defaultElProps
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleClick () {
+      // this.$emit('input', !this.value)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.d2p-image-format{
+  .image-slot{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  .el-image-viewer__close {
+    color: #fff;
+  }
+}
+
+</style>
diff --git a/web/src/components/file-uploader/lib/loading-spin.svg b/web/src/components/file-uploader/lib/loading-spin.svg
new file mode 100644
index 0000000..4dbb3ac
--- /dev/null
+++ b/web/src/components/file-uploader/lib/loading-spin.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#999">
+  <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
+  <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
+    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
+  </path>
+</svg>
diff --git a/web/src/components/selector-table/selector-table.vue b/web/src/components/selector-table/selector-table.vue
index d76c824..e213b59 100644
--- a/web/src/components/selector-table/selector-table.vue
+++ b/web/src/components/selector-table/selector-table.vue
@@ -2,7 +2,7 @@
   <div ref="selectedTableRef">
     <el-popover
       placement="bottom"
-      width="400"
+      width="600"
       trigger="click"
       @show="visibleChange">
       <div class="option">
@@ -16,7 +16,7 @@
           size="mini"
           border
           :row-key="dict.value"
-          style="width: 400px"
+          style="width: 600px"
           max-height="200"
           height="200"
           :highlight-current-row="!_elProps.tableConfig.multiple"
@@ -25,8 +25,10 @@
         >
           <el-table-column v-if="_elProps.tableConfig.multiple" fixed type="selection" reserve-selection width="55"/>
           <el-table-column fixed type="index" label="#" width="50"/>
-          <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
-                           v-for="(item,index) in _elProps.tableConfig.columns" :key="index"/>
+          <span v-for="(item,index) in _elProps.tableConfig.columns" :key="index" >
+            <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
+                           v-if="item.show !== false"/>
+          </span>
         </el-table>
         <el-pagination style="margin-top: 10px;max-width: 200px" background
                        small
@@ -206,7 +208,11 @@ export default {
         // 在这里对 传入的value值做处理
         const { url, value, label } = this.dict
         params[value] = val
-        params.query = `{${label},${value}}`
+        const queryList = ['id', label, value]
+        this._elProps.tableConfig.columns.map(res => {
+          queryList.push(res.prop)
+        })
+        params.query = `{${Array.from(new Set(queryList)).join(',')}}`
         return request({
           url: url,
           params: params,
@@ -241,10 +247,14 @@ export default {
       if (that.dict.params) {
         dictParams = { ...that.dict.params }
       }
+      const queryList = ['id', label, value]
+      this._elProps.tableConfig.columns.map(res => {
+        queryList.push(res.prop)
+      })
       const params = {
         page: that.pageConfig.page,
         limit: that.pageConfig.limit,
-        query: `{${label},${value}}`
+        query: `{${Array.from(new Set(queryList)).join(',')}}`
       }
       if (that.search) {
         params.search = that.search