eoss-ui 0.3.97

package/packages/upload/src/main.vue

@@ -0,0 +1,1033 @@
+<template>
+  <el-upload
+    ref="upload"
+    v-bind="$attrs"
+    class="es-upload"
+    :list-type="listType"
+    :wait="1000"
+    :height="boxHeight"
+    :multiple="portrait ? false : multiple"
+    :action="url"
+    :show-file-list="showList"
+    :file-list="lists"
+    :result-file="resultFile"
+    :disabled="isDisabled"
+    :class="[
+      {
+        'es-avatar-uploader': portrait,
+        'es-upload-readonly': isDisabled
+      },
+      'es-upload-' + listType
+    ]"
+    :previewAdjunct="host + previewAdjunct"
+    :headers="headers"
+    :data="datas"
+    :show-info="showList ? showInfo : []"
+    :auto-upload="autoUpload"
+    :response="true"
+    :operate="operate"
+    :accept="accepts"
+    :drag-sort="isSort"
+    :preview="preview"
+    :exclude="excludes"
+    :download="isDownload"
+    :icons="_icons"
+    :picture="_picture"
+    :before-upload="handleBeforeUpload"
+    :before-remove="handleBeforeRemove"
+    :on-preview="handlePreview"
+    :on-downloads="handleDownloads"
+    :on-download="handleDownload"
+    :on-sort="handleSort"
+    :on-success="handleSuccess"
+    :on-change="handleChange"
+    :on-remove="handleRemove"
+    :on-error="handleError"
+  >
+    <template v-if="prepend">
+      <template v-if="Array.isArray(prepend)">
+        <el-button
+          v-for="(item, index) in prepend"
+          v-bind="{ ...item, size: btnSize }"
+          :key="index"
+          @click.stop="handleClick(item)"
+        >
+          {{ item.label || item.text }}
+        </el-button>
+      </template>
+      <el-button
+        v-else
+        v-bind="{ ...prepend, size: btnSize }"
+        @click.stop="handleClick(prepend)"
+      >
+        {{ prepend.label || prepend.text }}
+      </el-button>
+    </template>
+    <slot>
+      <expand-dom v-if="render" :render="render"></expand-dom>
+      <template v-else>
+        <template v-if="portrait">
+          <img
+            v-if="profile"
+            :src="profile"
+            class="avatar"
+            :style="{ width: width, height: height }"
+          />
+          <i
+            v-else
+            class="avatar-uploader-icon"
+            :class="{ 'el-icon-plus': !isDisabled }"
+            :style="{ width: width, height: height, lineHeight: height }"
+          ></i>
+        </template>
+        <template v-else>
+          <i
+            class="el-icon-plus es-uploader-icon"
+            v-if="selectType === 'icon-plus'"
+          ></i>
+          <el-button
+            v-else
+            class="es-upload-button"
+            :class="icon"
+            :type="selectType"
+            :size="btnSize"
+            >{{ text ? text : autoUpload ? '点击上传' : '选择文件' }}</el-button
+          >
+          <el-button
+            class="es-upload-button"
+            v-if="!autoUpload"
+            :type="uploadType"
+            :size="btnSize"
+            @click.stop="handleUpload"
+          >
+            上传文件
+          </el-button>
+          <el-button
+            v-if="showFileList && isDownloads"
+            slot="handle"
+            class="es-upload-button es-upload-downloads"
+            :size="btnSize"
+            @click.stop="handleDownloads"
+          >
+            批量下载
+          </el-button>
+        </template>
+      </template>
+    </slot>
+    <template v-if="append">
+      <template v-if="Array.isArray(append)">
+        <el-button
+          v-for="(item, index) in append"
+          v-bind="{ ...item, size: btnSize }"
+          :key="index"
+          @click.stop="handleClick(item)"
+        >
+          {{ item.label || item.text }}
+        </el-button>
+      </template>
+      <el-button
+        v-else
+        v-bind="{ ...append, size: btnSize }"
+        @click.stop="handleClick(append)"
+      >
+        {{ append.label || append.text }}
+      </el-button>
+    </template>
+    <template slot="tip">
+      <slot name="tip">
+        <div v-if="tips" class="el-upload__tip">{{ tips }}</div>
+      </slot>
+    </template>
+
+    <es-dialog :title="title" :visible.sync="showImg" slot="dialog">
+      <div
+        v-loading="imgChange"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        class="es-upload-dialog"
+      >
+        <img v-show="!imgChange" ref="showImg" :src="imgUrl" :style="styles" />
+      </div>
+    </es-dialog>
+    <es-dialog :title="title" :visible.sync="showVideo" slot="dialog">
+      <es-player
+        autoplay
+        type="video/mp4"
+        :is-pause="!showVideo"
+        :source="source"
+      ></es-player>
+    </es-dialog>
+  </el-upload>
+</template>
+<script>
+import {
+  getAdjunctProperties,
+  uploads,
+  uploadOnlyOne,
+  getAdjunctFileInfos,
+  uploadDownloads,
+  previewAdjunctOffice,
+  previewAdjunct,
+  previewAdjunct2,
+  uploadSort,
+  delAdjunct,
+  downloadByAdjunctId
+} from 'eoss-ui/src/config/api.js';
+import util from 'eoss-ui/src/utils/util.js';
+import picture from './picture.js';
+export default {
+  name: 'EsUpload',
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        render: [Function, String]
+      },
+      render: (h, ctx) => {
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h);
+      }
+    }
+  },
+  inheritAttrs: false,
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+  props: {
+    prepend: [Array, Object],
+    append: [Array, Object],
+    render: Function,
+    template: String,
+    value: [String, Array, Object],
+    name: String,
+    method: {
+      type: String,
+      default: 'get'
+    },
+    text: String,
+    icon: String,
+    headers: {
+      type: Object,
+      default() {
+        return util.getStorage();
+      }
+    },
+    listType: {
+      type: String,
+      default: 'text' // text,picture,picture-card
+    },
+    operate: {
+      type: Boolean,
+      default: true
+    },
+    accept: String,
+    // 附件code
+    code: String,
+    // 业务id
+    ownId: String,
+    requiredOwnId: Boolean,
+    //
+    downloads: {
+      type: Boolean,
+      default: false
+    },
+    // 附件扩展编码
+    extendCode: String,
+    // 是否添加文件md5值
+    fileMd5: {
+      type: Boolean,
+      default: false
+    },
+    // 额外的参数
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 单文件大小
+    size: Number,
+    // 是否头像模式上传
+    portrait: {
+      type: Boolean,
+      default: false
+    },
+    photo: [String, Boolean],
+    //头像按钮框宽度
+    width: String,
+    //头像按钮框高度度
+    height: String,
+    // 自定义的文字提示
+    tips: {
+      type: String,
+      default: ''
+    },
+    dragSort: {
+      type: Boolean,
+      default: false
+    },
+    // 上传成功后绑定到file的内容
+    showInfo: {
+      type: Array,
+      default() {
+        return ['uploadTime', 'fileSize', 'userName'];
+      }
+    },
+    // 上传地址
+    action: String,
+    // 自动上传
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    // 是否支持多选文件
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 显示文件列表
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    // 上传的文件列表
+    fileList: [Array, String],
+    filesParam: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    state: {
+      type: Number,
+      default: 1
+    },
+    selectType: {
+      type: String,
+      default: 'primary'
+    },
+    uploadType: {
+      type: String,
+      default: 'success'
+    },
+    host: {
+      type: String,
+      default() {
+        return util.getStorage('host') ? util.getStorage('host') : '';
+      }
+    },
+    message: Object,
+    btnSize: {
+      type: String,
+      default: 'medium'
+    },
+    // 只读
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: Boolean,
+    preview: { type: [Boolean, String], default: true },
+    exclude: String,
+    download: { type: [Boolean, String], default: true },
+    deleted: { type: [Boolean, String], default: true },
+    remove: { type: [Boolean, String], default: true },
+    beforeUpload: Function,
+    onPreview: Function,
+    // 文件列表排序
+    onSort: Function,
+    beforeRemove: Function,
+    onDownloads: Function,
+    onDownload: Function,
+    onSort: Function,
+    onSuccess: Function,
+    onChange: Function,
+    onRemove: Function,
+    onError: Function,
+    dangerouslyUseHTMLString: Boolean,
+    fileCount: Number,
+    listHeight: String,
+    display: Boolean,
+    resultFile: {
+      type: Boolean,
+      default: true
+    },
+    properties: {
+      type: String,
+      default() {
+        return getAdjunctProperties;
+      }
+    },
+    icons: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    picture: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      lists: [],
+      image: '',
+      fileAccept: '',
+      fileSize: 0,
+      fileTotalSize: 0,
+      showImg: false,
+      imgChange: false,
+      title: '',
+      imgUrl: '',
+      styles: {},
+      showVideo: false,
+      videoChange: false,
+      source: '',
+      excludeNames: '',
+      previewAdjunct: previewAdjunct,
+      boxHeight: this.listHeight
+    };
+  },
+  computed: {
+    _icons() {
+      return {
+        ppt: 'es-icon-ppt',
+        png: 'es-icon-picture',
+        gif: 'es-icon-picture',
+        jpg: 'es-icon-picture',
+        xls: 'es-icon-excel',
+        xlsx: 'es-icon-excel',
+        docx: 'es-icon-word',
+        doc: 'es-icon-word',
+        rar: 'es-icon-zip',
+        zip: 'es-icon-zip',
+        txt: 'es-icon-txt',
+        ipa: 'es-icon-ios',
+        apk: 'es-icon-android',
+        mp4: 'es-icon-video',
+        avi: 'es-icon-video',
+        mp3: 'es-icon-audioo',
+        wma: 'es-icon-audioo',
+        pdf: 'es-icon-pdf',
+        ...this.icons
+      };
+    },
+    _picture() {
+      return {
+        ...picture,
+        ...this.picture
+      };
+    },
+    isRequiredOwnId() {
+      if (!this.fileList || !this.fileList.length) {
+        return true;
+      }
+      return this.requiredOwnId;
+    },
+    show() {
+      if ((this.photo && typeof this.photo === 'string') || this.value) {
+        return false;
+      }
+      if (this.photo && typeof this.photo === 'string') {
+        return false;
+      }
+      return this.showFileList;
+    },
+    url() {
+      let url = this.action
+        ? this.action
+        : this.portrait || !this.multiple
+        ? uploadOnlyOne
+        : uploads;
+      return url.indexOf(this.host) > -1 ? url : this.host + url;
+    },
+    excludes() {
+      return this.exclude ? this.exclude : this.excludeNames;
+    },
+    accepts() {
+      return this.accept
+        ? this.accept
+        : this.fileAccept
+        ? this.fileAccept
+        : this.portrait
+        ? 'image/*'
+        : undefined;
+    },
+    sizes() {
+      return this.size ? this.size : this.fileSize ? this.fileSize : 0;
+    },
+    getAdjunctFileInfos() {
+      return typeof this.fileList === 'string'
+        ? this.fileList
+        : getAdjunctFileInfos;
+    },
+    showList() {
+      return this.portrait || !this.multiple ? false : this.showFileList;
+    },
+    isDownloads() {
+      return this.downloads;
+    },
+    isDownload() {
+      if (this.download) {
+        return true;
+      }
+      return false;
+    },
+    isDisabled() {
+      if (this.readonly || this.disabled) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    isRemove() {
+      if (this.remove || this.deleted) {
+        return true;
+      }
+      return false;
+    },
+    isSort() {
+      return this.dragSort && !this.isDisabled;
+    },
+    datas() {
+      if (this.data) {
+        return util.extend({}, this.data, this.params);
+      }
+      return this.params;
+    },
+    params() {
+      let params = { userId: util.getStorage('userId'), ...this.param };
+      if (this.code !== undefined) {
+        params.code = this.code;
+      }
+      if (this.ownId !== undefined) {
+        params.ownId = this.ownId;
+      }
+      return params;
+    },
+    showMessage() {
+      if (this.message !== undefined) {
+        return util.extend({}, { success: true, error: true }, this.message);
+      }
+      return { success: true, error: true };
+    },
+    profile() {
+      if (this.image) {
+        if (typeof this.image === 'string') {
+          return this.image;
+        }
+        return (
+          this.host + previewAdjunct + '?adjunctId=' + this.image.adjunctId
+        );
+      }
+      if (this.value) {
+        if (typeof this.value === 'string') {
+          if (this.value.indexOf('data:image/') === -1) {
+            let val = util.jointUrl({
+              url: this.value,
+              reg: this.host + '/main2'
+            });
+            return val;
+          }
+          if (
+            this.value.indexOf(previewAdjunct) === -1 ||
+            this.value.indexOf('/') === -1
+          ) {
+            return this.host + previewAdjunct + '?adjunctId=' + this.value;
+          }
+          return this.value;
+        } else if (Array.isArray(this.value)) {
+          let adjunctId = this.value[0].response
+            ? this.value[0].response.adjunctId
+            : this.value[0].adjunctId;
+          return this.host + previewAdjunct + '?adjunctId=' + adjunctId;
+        } else {
+          let adjunctId = this.value.response
+            ? this.value.response.adjunctId
+            : this.value.adjunctId;
+          return this.host + previewAdjunct + '?adjunctId=' + adjunctId;
+        }
+      }
+      if (
+        this.photo &&
+        typeof this.photo === 'string' &&
+        this.photo.indexOf('data:image/') === -1
+      ) {
+        let val = util.jointUrl({
+          url: this.photo,
+          reg: this.host + '/main2'
+        });
+        return val;
+      }
+      return this.photo;
+    }
+  },
+  watch: {
+    fileList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (Array.isArray(val) && val.length > 0) {
+          this.lists = val;
+        } else {
+          this.getFiles(this.params);
+        }
+      }
+    },
+    params: {
+      deep: true,
+      handler(val) {
+        this.getFiles(val);
+      }
+    },
+    lists: {
+      deep: true,
+      handler(val) {
+        this.$emit('update:fileCount', val.length);
+      }
+    },
+    display(val) {
+      val && this.getHeight();
+    }
+  },
+  created() {
+    this.getAdjunctPropertie();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getHeight();
+    });
+  },
+  methods: {
+    getHeight() {
+      if (this.height === 'auto') {
+        let pt =
+          parseInt(util.getStyle(this.$el.parentNode, 'padding-top'), 10) || 0;
+        let pb =
+          parseInt(util.getStyle(this.$el.parentNode, 'padding-bottom'), 10) ||
+          0;
+        let btn = this.$refs.upload.$children[0].$el.offsetHeight || 0;
+        this.boxHeight =
+          this.$el.parentNode.offsetHeight - pt - pb - btn + 'px';
+      }
+    },
+    //根据code获取附件参数配置
+    getAdjunctPropertie() {
+      if (this.code !== undefined) {
+        util
+          .ajax({
+            method: this.method,
+            url: this.properties,
+            data: { code: this.code },
+            params: { code: this.code }
+          })
+          .then(res => {
+            if (res.rCode === 0) {
+              if (res.results) {
+                this.excludeNames = res.results.excludeName;
+                this.fileAccept = res.results.fileTypeExtName.replace(
+                  new RegExp(';', 'gm'),
+                  ','
+                );
+                this.fileSize = res.results.limitFileSize
+                  ? res.results.limitFileSize / 1024 / 1024
+                  : 0;
+                this.fileTotalSize = res.results.limitTotalSize;
+              }
+            }
+          })
+          .catch(err => {
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    getFiles(params) {
+      if (
+        !this.show ||
+        (this.isRequiredOwnId &&
+          !Object.prototype.hasOwnProperty.call(params, 'ownId'))
+      ) {
+        return false;
+      }
+      util
+        .ajax({
+          method: this.method,
+          url: this.getAdjunctFileInfos,
+          data: params,
+          params: params,
+          format: false
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            if (this.portrait === true) {
+              this.image = JSON.parse(JSON.stringify(res.results))[0];
+            } else {
+              this.lists = JSON.parse(JSON.stringify(res.results));
+              this.$emit('input', this.lists);
+            }
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleUpload() {
+      this.$refs.upload.submit();
+    },
+    handlePreview(res) {
+      if (this.preview) {
+        if (this.onPreview) {
+          this.onPreview(res);
+        } else {
+          let file = res.response ? res.response : res;
+          let url =
+            typeof this.preview === 'string'
+              ? this.preview
+              : typeof this.preview === 'function'
+              ? this.preview(file)
+              : null;
+          if (res.status === 'success') {
+            let suffix = file.suffix;
+            suffix = suffix.toLowerCase();
+            if (
+              suffix.includes('doc') ||
+              suffix.includes('docx') ||
+              suffix.includes('xls') ||
+              suffix.includes('xlsx') ||
+              suffix.includes('ppt')
+            ) {
+              util.win.open(
+                this.host +
+                  (url ? url : previewAdjunctOffice) +
+                  '?cmd=view&bucketName=' +
+                  file.absolutePath +
+                  '&fileId=' +
+                  file.adjunctId +
+                  '&fileName=' +
+                  file.newName
+              );
+            } else if (suffix.includes('pdf')) {
+              util.win.open(
+                this.host +
+                  (url ? url : previewAdjunct2) +
+                  '/' +
+                  file.originalName +
+                  '?adjunctId=' +
+                  file.adjunctId
+              );
+            } else if (
+              suffix.includes('jpge') ||
+              suffix.includes('jpg') ||
+              suffix.includes('gif') ||
+              suffix.includes('png')
+            ) {
+              this.imgUrl =
+                this.host +
+                (url ? url : previewAdjunct) +
+                '?adjunctId=' +
+                file.adjunctId;
+              this.title = file.originalName;
+              this.showImg = true;
+              this.$nextTick(() => {
+                this.loadImage();
+              });
+            } else if (suffix.includes('mp4')) {
+              this.source = {
+                src:
+                  this.host +
+                  (url ? url : previewAdjunct) +
+                  '?adjunctId=' +
+                  file.adjunctId
+              };
+              this.title = file.originalName;
+              this.showVideo = true;
+            } else {
+              util.win.open(
+                this.host +
+                  (url ? url : previewAdjunct) +
+                  '?adjunctId=' +
+                  file.adjunctId
+              );
+            }
+          } else {
+            util.win.open(URL.createObjectURL(file.raw));
+          }
+        }
+      }
+    },
+    loadImage() {
+      this.$refs.showImg.onload = () => {
+        this.imgChange = false;
+        let w = this.$refs.showImg.naturalWidth;
+        let h = this.$refs.showImg.naturalHeight;
+        let pw = this.$refs.showImg.parentNode.offsetWidth;
+        let ph = this.$refs.showImg.parentNode.offsetHeight;
+        if (w / h > pw / ph) {
+          this.styles = { 'max-width': '100%' };
+        } else {
+          this.styles = { 'max-height': '100%' };
+        }
+        if (w < pw) {
+          this.styles.width = w + 'px';
+        }
+        if (h < ph) {
+          this.styles.height = h + 'px';
+        }
+      };
+    },
+    isLt(file) {
+      const flag =
+        this.sizes === 0 ? true : file.size / 1024 / 1024 < this.sizes;
+      if (!flag) {
+        this.$message.error('上传头像图片大小不能超过 ' + this.sizes + 'MB!');
+      }
+      return flag;
+    },
+    handleBeforeUpload(file) {
+      if (this.portrait) {
+        const flag = this.isLt(file);
+        if (flag && this.beforeUpload) {
+          return this.beforeUpload(file);
+        }
+        return flag;
+      }
+      if (this.beforeUpload) {
+        return this.beforeUpload(file);
+      }
+      return true;
+    },
+    handleBeforeRemove(file, fileList) {
+      if (file && file.status === 'success') {
+        return this.$confirm('确定删除文件吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            if (this.beforeRemove) {
+              return this.beforeRemove(file, fileList);
+            } else if (file.status === 'success') {
+              let userName =
+                file.userName ||
+                (file.response && file.response.userName) ||
+                util.getStorage('userName');
+              // eslint-disable-next-line no-undef
+              return new Promise((resolve, reject) => {
+                let url =
+                  typeof this.deleted === 'string'
+                    ? this.deleted
+                    : this.remove === 'string'
+                    ? this.remove
+                    : delAdjunct;
+                util
+                  .ajax({
+                    method: this.method,
+                    url: url,
+                    data: {
+                      userName: userName,
+                      id: file.adjunctId || file.response.adjunctId
+                    },
+                    params: {
+                      userName: userName,
+                      id: file.adjunctId || file.response.adjunctId
+                    }
+                  })
+                  .then(res => {
+                    if (res.rCode === 0) {
+                      this.$message.success(res.msg);
+                      resolve();
+                    } else {
+                      let msg = res.msg || '系统错误，请联系管理员！';
+                      this.$message.error(msg);
+                      reject();
+                    }
+                  })
+                  .catch(err => {
+                    if (err.message && err.message !== 'canceled') {
+                      this.$message.error(err.message);
+                    }
+                  });
+              });
+            }
+            return true;
+          })
+          .catch(() => {
+            return flag;
+          });
+      }
+    },
+    handleDownloads() {
+      let url =
+        typeof this.downloads === 'string' ? this.downloads : uploadDownloads;
+      util.win.open(
+        this.host +
+          url +
+          '?ownId=' +
+          this.ownId +
+          '&code=' +
+          this.code +
+          (this.extendCode ? '&extendCode=' + this.extendCode : '')
+      );
+    },
+    handleDownload(file) {
+      if (file.status === 'success') {
+        let url =
+          typeof this.download === 'string'
+            ? this.download
+            : downloadByAdjunctId;
+        util.win.open(
+          this.host +
+            url +
+            '?adjunctId=' +
+            (file.adjunctId || file.response.adjunctId)
+        );
+      } else {
+        this.aLinkDownload(file);
+      }
+    },
+    handleClick(res) {
+      if (res.event && typeof res.event === 'function') {
+        res.event(res);
+      } else {
+        this.$emit('click', res);
+      }
+    },
+    aLinkDownload(file) {
+      var a = document.createElement('a');
+      let event = new MouseEvent('click');
+      a.href = URL.createObjectURL(file.raw);
+      a.download = file.name;
+      a.dispatchEvent(event);
+    },
+    handleSort(files) {
+      if (this.isSort) {
+        if (this.onSort) {
+          this.onSort(files);
+        } else {
+          let ids = files.map(item => {
+            if (item.status === 'success') {
+              return item.adjunctId || item.response.adjunctId;
+            }
+          });
+          ids = ids.join(',');
+          util
+            .ajax({
+              method: this.method,
+              url: uploadSort,
+              data: {
+                ids: ids
+              },
+              params: {
+                ids: ids
+              }
+            })
+            .then(res => {
+              if (res.rCode === 0) {
+                this.$message.success(res.msg);
+              } else {
+                let msg = res.msg || '系统错误，请联系管理员！';
+                this.$message.error(msg);
+              }
+            })
+            .catch(err => {
+              if (err.message && err.message !== 'canceled') {
+                this.$message.error(err.message);
+              }
+            });
+        }
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      if (this.portrait) {
+        this.image = URL.createObjectURL(file.raw);
+      }
+      if (this.showMessage.success) {
+        if (response.rCode) {
+          if (this.dangerouslyUseHTMLString) {
+            this.$alert(
+              response.msg ? response.msg : '上传失败：请联系管理员',
+              '提示',
+              {
+                dangerouslyUseHTMLString: true,
+                setHeight: response.msg
+              }
+            ).catch();
+          } else {
+            this.$message({
+              type: 'error',
+              message: response.msg || '成功！'
+            });
+          }
+        } else {
+          this.$message.success(response.msg);
+        }
+      }
+      this.onSuccess && this.onSuccess(response, file, fileList);
+      this.$emit('success', response, file, fileList);
+      if (this.resultFile) {
+        if (this.portrait) {
+          this.$emit('input', file);
+        } else {
+          this.$emit('input', fileList);
+        }
+        if (this.elForm) {
+          this.elForm.clearValidate(this.name);
+        }
+      }
+    },
+    handleChange(file, fileList) {
+      this.$emit('change', fileList);
+      this.onChange && this.onChange(file, fileList);
+    },
+    handleRemove(file, fileList) {
+      this.$emit('input', fileList);
+      this.$emit('remove', file, fileList);
+      this.$emit('change', fileList);
+      this.onRemove && this.onRemove(file, fileList);
+    },
+    handleError(err, file, fileList) {
+      if (this.showMessage.error) {
+        if (this.dangerouslyUseHTMLString) {
+          this.$alert(err.msg ? err.msg : '上传失败：请联系管理员', '提示', {
+            dangerouslyUseHTMLString: true,
+            setHeight: err.msg
+          }).catch();
+        } else {
+          this.$message({
+            type: 'error',
+            message: '上传失败：' + (err.msg ? err.msg : '请联系管理员')
+          });
+        }
+      }
+      this.$emit('error', err, file, fileList);
+      this.onError && this.onError(err, file, fileList);
+    }
+  }
+};
+</script>