x-php-Admin/copy backup/vab/upload.vue
2023-07-30 10:16:32 +08:00

155 lines
5.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-main>
<el-card shadow="never" header="文件示例">
<x-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>
</x-upload-file>
</el-card>
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
<x-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
</x-upload-file>
</el-card>
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
<x-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></x-upload-multiple>
</el-card>
<el-card shadow="never" header="单图像示例">
<el-space wrap :size="8">
<x-upload v-model="fileurl3"></x-upload>
<x-upload v-model="fileurl4" title="自定义标题" icon="el-icon-picture"></x-upload>
<x-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>
</x-upload>
<x-upload v-model="fileurl6" round icon="el-icon-avatar" title="开启圆形"></x-upload>
<x-upload v-model="fileurl7" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></x-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">
<x-upload v-model="form.file1" title="人像面"></x-upload>
</el-form-item>
<el-form-item prop="file2">
<x-upload v-model="form.file2" title="国徽面"></x-upload>
</el-form-item>
</el-space>
</el-form-item>
<el-form-item label="其他凭证" prop="file3">
<x-upload-multiple v-model="form.file3"></x-upload-multiple>
</el-form-item>
<el-form-item label="附件" prop="file4">
<x-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>
</x-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>