59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<!-- FileUpload.vue -->
|
|
<template>
|
|
<div class="file-upload">
|
|
<UploadBlock v-model="modelValue" :type="type" :multiple="multiple" :limit="limit" :placeholder="placeholder" />
|
|
<PreviewBlock v-model:file-list="modelValue" :type="type" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import UploadBlock from './UploadBlock.vue'
|
|
import PreviewBlock from './PreviewBlock.vue'
|
|
|
|
const modelValue = defineModel('modelValue', {
|
|
type: Array,
|
|
default: () => []
|
|
})
|
|
|
|
const props = defineProps({
|
|
// 文件类型: 'image' 或其他
|
|
type: {
|
|
type: String,
|
|
default: 'image'
|
|
},
|
|
// 上传接口地址
|
|
action: {
|
|
type: String
|
|
},
|
|
// 上传请求头
|
|
headers: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// 是否支持多选
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 最大上传数量
|
|
limit: {
|
|
type: Number,
|
|
default: 9
|
|
},
|
|
// 占位提示文字
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error', 'remove'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.file-upload {
|
|
width: 100%;
|
|
}
|
|
</style>
|