<template>
|
<el-main>
|
<el-card shadow="never" header="文件示例">
|
<sc-upload-file v-model="fileurl" :limit="3" :data="{otherData:'demo'}" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
|
</sc-upload-file>
|
</el-card>
|
|
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
|
<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
|
</sc-upload-file>
|
</el-card>
|
|
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
|
<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
|
</el-card>
|
|
<el-card shadow="never" header="单图像示例">
|
<el-space wrap :size="8">
|
<sc-upload v-model="fileurl3"></sc-upload>
|
<sc-upload v-model="fileurl4" title="自定义标题" icon="el-icon-picture"></sc-upload>
|
<sc-upload v-model="fileurl5" :apiObj="uploadApi" accept="image/jpg,image/png" :on-success="success" :width="220">
|
<div class="custom-empty">
|
<el-icon><el-icon-upload /></el-icon>
|
<p>自定义插槽</p>
|
</div>
|
</sc-upload>
|
<sc-upload v-model="fileurl6" round icon="el-icon-avatar" title="开启圆形"></sc-upload>
|
<sc-upload v-model="fileurl7" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
|
</el-space>
|
</el-card>
|
|
|
|
<el-card shadow="never" header="在验证表单中使用">
|
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="身份证" required>
|
<el-space wrap :size="8">
|
<el-form-item prop="file1">
|
<sc-upload v-model="form.file1" title="人像面"></sc-upload>
|
</el-form-item>
|
<el-form-item prop="file2">
|
<sc-upload v-model="form.file2" title="国徽面"></sc-upload>
|
</el-form-item>
|
</el-space>
|
</el-form-item>
|
<el-form-item label="其他凭证" prop="file3">
|
<sc-upload-multiple v-model="form.file3"></sc-upload-multiple>
|
</el-form-item>
|
<el-form-item label="附件" prop="file4">
|
<sc-upload-file v-model="form.file4" :limit="1" drag>
|
<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
|
<div class="el-upload__text">
|
Drop file here or <em>click to upload</em>
|
</div>
|
</sc-upload-file>
|
</el-form-item>
|
<el-form-item label="日期" prop="date">
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
<el-button @click="resetForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
</el-main>
|
</template>
|
|
<script>
|
export default {
|
name: 'upload',
|
data() {
|
return {
|
uploadApi: this.$API.common.upload,
|
fileurlArr: [
|
{
|
name: '销售合同模板.xlsx',
|
url: 'http://www.scuiadmin.com/files/220000198611262243.xlsx'
|
},
|
{
|
name: '企业员工联系方式.xlsx',
|
url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
|
}
|
],
|
fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
|
fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
|
fileurl3: "img/auth_banner.jpg",
|
fileurl4: "",
|
fileurl5: "",
|
fileurl6: "",
|
fileurl7: "",
|
form: {
|
file1: "",
|
file2: "",
|
file3: "",
|
file4: "",
|
date: ""
|
},
|
rules: {
|
file1: [
|
{required: true, message: '请上传', trigger: 'change'}
|
],
|
file2: [
|
{required: true, message: '请上传', trigger: 'change'}
|
],
|
file3: [
|
{required: true, message: '请上传', trigger: 'change'}
|
],
|
file4: [
|
{required: true, message: '请上传附件', trigger: 'change'}
|
],
|
date: [
|
{required: true, message: '请选择日期', trigger: 'change'}
|
]
|
}
|
}
|
},
|
methods: {
|
success(response){
|
this.$alert(`success函数钩子，可用于类似OCR返回信息，return false后阻止后续执行，回调参数打开控制台查看`, {
|
title: "提示",
|
type: "success"
|
})
|
console.log(response);
|
return false;
|
},
|
submitForm(){
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
alert('请看控制台输出');
|
console.log(this.form);
|
}else{
|
return false;
|
}
|
})
|
},
|
resetForm(){
|
this.$refs.ruleForm.resetFields();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.el-card+.el-card {margin-top: 15px;}
|
.imglist .el-col+.el-col {margin-left: 8px;}
|
|
.custom-empty {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #8c939d;border-radius:5px;}
|
.custom-empty i {font-size: 30px;color: #fff;}
|
.custom-empty p {font-size: 12px;font-weight: normal;color: #fff;margin-top: 10px;}
|
</style>
|
