share-fun-web/src/components/Upload.vue

<template>
  <div>
    <el-upload
      v-loading.fullscreen.lock="mark"
      ref="upload"
      :action="newUrl"
      :headers="myHeaders"
      list-type="picture-card"
      :multiple="false"
      :limit="limit"
      :file-list="imgList"
      :on-success="handleAvatarSuccess"
      :on-error="handleError"
      :on-progress="onProgress"
      :before-upload="handleBeforeUpload"
      :disabled="limit <= value.length"
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
          <!-- <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download" />
          </span> -->
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <template v-if="config">
      图片长宽比为
      <b style="color: #f56c6c">{{ config[0] }}：{{ config[1] }}</b>
    </template>
    <!--         <template v-if="fileSize">
          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
        </template> -->

    <template v-if="limit">
      最多上传 <b style="color: #f56c6c">{{ limit }}</b
      >张
    </template>

    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- <el-button type="primary" >
      指令方式
    </el-button> -->
  </div>
</template>

<script>
import { UPLOAD_URL } from '@/const/urlKey';
import { getToken } from '@/utils/auth';

export default {
  name: 'Upload',
  props: {
    value: {
      type: Array,
      default: () => []
    },

    config: {
      type: Array,
      default: null
    },
    limit: {
      type: Number,
      default: 1
    },
    params: {
      type: String,
      default: ''
    },
    uploadUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mark: false,
      url: UPLOAD_URL,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      myHeaders: {
        authorization: 'Bearer swagger-ui',
        token: getToken()
      },
      imgList: this.value,
      tmp: [],

      loading: null
    };
  },

  computed: {
    newUrl() {
      const params = this.params;
      const url = this.uploadUrl;
      let baseUrl = UPLOAD_URL;
      if (url !== '') {
        baseUrl = url;
      }
      if (params === '') {
        return baseUrl;
      } else {
        return baseUrl + `?${params}`;
      }
    }
  },

  watch: {
    value: {
      handler(val) {
        // if (this.imgList.length < val.length) {
        this.imgList = val;
        console.log(this.imgList);
        // }
      },
      immediate: true
    }
  },

  methods: {
    onProgress() {
      this.mark = true;
    },
    handleError() {
      this.mark = false;
      this.$error('上传失败，请稍后重试...');
      this.loading.close();
    },
    handleAvatarSuccess(res, file, fileList) {
      if (file.response.code !== 200) {
        this.$refs.upload.clearFiles();
        this.$message.error('上传失败，请稍后再试~');
        this.$emit('input', []);
        return false;
      }
      const result =
        fileList.length > 0
          ? fileList.map(x => ({
              name: x.response ? x.response.data.filename : x.name,
              url: x.response ? x.response.data.fullPath : x.url,
              size: x.response ? x.response.data.size : x.size
            }))
          : [];
      this.$nextTick(() => {
        this.$emit('input', result);
        this.$message.success('上传成功');
        this.mark = false;
        this.loading.close();
      });
    },
    // handleChange(file, fileList) {
    //   if (file.response) {
    //     // this.imgList = this.tmp
    //   }
    //   console.log(file)
    //   console.log(fileList)
    //   // const result = fileList.length > 0 ? fileList.map(x => ({
    //   //   name: x.name,
    //   //   url: x.response.data.path
    //   //   // url: x.url
    //   // })) : []
    //   // this.imgList = result
    //   // const result = this.tmp
    //   // this.imgList = JSON.parse(JSON.stringify(this.tmp))
    // },
    handleRemove(file, fileList) {
      const result = this.imgList.filter(x => x.name !== file.name);
      this.$emit('input', result);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    }
  }
};
</script>

<style scoped>
.page-select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
}
</style>