152 lines
3.5 KiB
Vue
152 lines
3.5 KiB
Vue
<template>
|
|
<div class="clearfix">
|
|
<AUpload
|
|
:disabled="disabled"
|
|
: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
|
|
},
|
|
disabled: {
|
|
required:false,
|
|
type:Boolean,
|
|
default: false
|
|
},
|
|
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>
|