142 lines
2.8 KiB
Vue
142 lines
2.8 KiB
Vue
<!-- UploadBlock.vue -->
|
|
<template>
|
|
<div class="upload-block">
|
|
<el-button type="primary" @click="showFileInput">
|
|
<el-icon><Upload /></el-icon>选择文件</el-button
|
|
>
|
|
<input class="inner-file" ref="fileRef" type="file" @change="uploadFiles" :accept="getAccept()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue'
|
|
import { Upload } from '@element-plus/icons-vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { request } from '@/utils/request'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'image'
|
|
},
|
|
headers: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 9
|
|
},
|
|
// 占位提示文字
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const fileRef = ref(null)
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
// 按钮文字
|
|
const buttonText = computed(() => {
|
|
return props.placeholder || '点击上传'
|
|
})
|
|
|
|
// 默认提示文字
|
|
const defaultTip = computed(() => {
|
|
if (props.type === 'image') {
|
|
return '支持图片格式，单个文件不超过 10MB'
|
|
}
|
|
return '支持文件格式，单个文件不超过 10MB'
|
|
})
|
|
|
|
const showFileInput = () => {
|
|
fileRef.value.click()
|
|
}
|
|
|
|
// 上传前校验
|
|
const beforeUpload = (file) => {
|
|
const isLt10M = file.size / 1024 / 1024 < 10
|
|
if (!isLt10M) {
|
|
ElMessage.error('文件大小不能超过 10MB!')
|
|
return false
|
|
}
|
|
|
|
if (props.type === 'image') {
|
|
const isImage = file.type.startsWith('image/')
|
|
if (!isImage) {
|
|
ElMessage.error('只能上传图片文件!')
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
const getAccept = () => {
|
|
if (props.type === 'image') {
|
|
return 'image/*'
|
|
}
|
|
if (props.type == 'video') {
|
|
return 'video/*'
|
|
}
|
|
return '*/*'
|
|
}
|
|
|
|
const uploadFiles = async (event) => {
|
|
const file = event.target.files[0]
|
|
const name = file.name
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const res = await request({
|
|
url: '/snow-ops-platform/file/upload',
|
|
method: 'post',
|
|
data: formData
|
|
})
|
|
if (res.code === '00000') {
|
|
let fileType = 3
|
|
if(props.type == 'image') fileType = 1
|
|
if(props.type == 'video') fileType = 2
|
|
|
|
const url = res.data
|
|
const fileData = {
|
|
fileName: name,
|
|
fileUrl: url,
|
|
fileType,
|
|
fileSize: file.size
|
|
}
|
|
emit('update:modelValue', [...props.modelValue, fileData])
|
|
} else {
|
|
throw new Error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
fileRef.value.value = null
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload-block {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
.inner-file {
|
|
z-index: 0;
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
</style>
|