asco_admin/src/components/UploadInput.vue

<template>
  <div class="clearfix">
    <AUpload
      :action="url"
      :headers="headers"
      accept="image/jpeg"
      list-type="picture-card"
      :multiple="true"
      :data="getData"
      :file-list="fileList"
      @preview="handlePreview"
      @select="select"
      @beforeUpload="beforeUpload"
      @change="handleChange"
    >
      <div v-if="fileList.length < 8">
        <a-icon type="plus"/>
        <div class="ant-upload-text">
          {{ title || label }}
        </div>
      </div>
    </AUpload>
    <AModal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </AModal>
    <AFormItem ref="fi">
      <input v-decorator="[field]" type="hidden"/>
    </AFormItem>
  </div>
</template>
<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

import themeConfig from "../../../../themeConfig";

export default {
  name: 'UploadInput',
  props: {
    title: {},
    field: {},
    size: {
      default: 2
    },
    label: {},
    serverType: {
      types: {
        1: 'عکس',
        2: 'فیلم',
        3: 'مدارک',
        4: 'صوت',
        5: 'pdf',
      }
    },
  },
  data() {
    return {
      url: themeConfig.home('cu/file/create'),
      previewVisible: false,
      previewImage: '',
      fileList: [],
      resList: [],
    };
  },
  watch: {
    fileList(n, o) {
      if (n.length > o.length) {
        this.$emit('add-file', n);
      } else if (n.length < o.length) {
        this.$emit('remove-file', n);
      }
    }
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = this.types.includes(file.type);
      if (!isJpgOrPng) {
        this.$message.error('پسوند قابل قبول نیست.');
      }
      const isLt2M = file.size / 1024 / 1024 < this.size;
      if (!isLt2M) {
        this.$message.error(`فایل بارگذاری شده بیش از ${this.size} مگا بایت نباید باشد.`);
      }
      return isJpgOrPng && isLt2M;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({fileList, event, file}) {
      if (file.response && file.response.id) {
        this.$emit('ok', file.response);
        this.resList.push(file.response.id);
        const a = {};
        a[`${this.field}`] = this.resList
        this.$refs.fi.FormContext.form.setFieldsValue(a)
      }
      this.fileList = fileList;
    },
    select() {

    },
    getData() {
      return {
        has_thumb: 1,
        has_watermark: 1,
        type: this.serverType || 1,
        subject: 1,
        title: 1
      }
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': 'Bearer ' + localStorage.getItem("accessToken") || localStorage.accessToken
      }
    }
  }
};
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>