107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<div class="improt-wrap">
|
|
<slot></slot>
|
|
<div class="upload-panel">
|
|
<Upload type="drag" :on-success="onSuccess" :on-remove="onRemove" :on-error="onError"
|
|
:before-upload="handleUploadBefore" :headers="headers" :data="uploadData" :action="uploadUrl"
|
|
:with-credentials="true" :max-size="maxSize" :multiple="multiple">
|
|
<div class="upload-box">
|
|
<Icon type="ios-paper" size="52" style="color: #6281eb"></Icon>
|
|
<h4>点击或将文件拖拽到这里上传</h4>
|
|
<div class="info">文件大小不超过{{ $utils.getFileSize(maxSize) }}</div>
|
|
</div>
|
|
<Alert v-if="!!errorMsg" type="error" show-icon><span v-html="errorMsg"></span></Alert>
|
|
</Upload>
|
|
</div>
|
|
<!-- <slot name="footer"></slot> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
model: {
|
|
event: "update:fileList",
|
|
prop: "fileList",
|
|
},
|
|
props: {
|
|
fileList: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
uploadUrl: String,
|
|
uploadData: Object,
|
|
headers: Object,
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
maxSize: 200 * 1024 * 1024,
|
|
errorMsg: null,
|
|
};
|
|
},
|
|
methods: {
|
|
handleUploadBefore(file) {
|
|
var _this = this;
|
|
if (file.size > _this.maxSize) {
|
|
_this.$Message.error({
|
|
content: "请上传小于" + _this.$utils.getFileSize(_this.maxSize) + "的文件！",
|
|
duration: 3,
|
|
});
|
|
}
|
|
},
|
|
onSuccess(res, file) {
|
|
if (res.code == 0) {
|
|
this.errorMsg = null;
|
|
const { uid } = file;
|
|
this.fileList.push({ ...res.data, uid });
|
|
this.$emit("update:fileList", this.fileList);
|
|
} else {
|
|
let msg = res.data.error;
|
|
this.errorMsg = msg;
|
|
}
|
|
},
|
|
onRemove(file, fileList) {
|
|
const { uid } = file;
|
|
const findIndex = this.fileList.findIndex(item => item.uid === uid);
|
|
this.fileList.splice(findIndex, 1);
|
|
this.$emit("update:fileList", this.fileList);
|
|
console.log(file, fileList);
|
|
},
|
|
onError(err, file) {
|
|
this.errorMsg = JSON.stringify(err);
|
|
console.log(err, file);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.improt-wrap {
|
|
padding: 0 12px;
|
|
|
|
.form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.upload-panel {
|
|
.upload-box {
|
|
background: #f7f8fc;
|
|
padding: 30px 0;
|
|
|
|
h4 {
|
|
color: #505c7e;
|
|
margin: 3px 0;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|