This commit is contained in:
陈红丽 2024-12-24 14:25:53 +08:00
parent c02d3afc58
commit 2c01bd70d1
2 changed files with 102 additions and 92 deletions

View File

@ -1,5 +1,6 @@
<template>
<div class="upload-box">
<div class="img-box">
<div v-for="(item, index) in fileList" class="items">
<img v-if="item.filePath" :src="item.filePath" class="upload-image" />
<div class="upload-handle" @click.stop>
@ -42,6 +43,10 @@
<n-progress type="circle" v-else :percentage="progress" />
</n-upload>
</div>
<div class="n-upload__tip">
<slot name="tip"></slot><span v-if="limit">,最多{{ limit }}</span>
</div>
</div>
</template>
<script setup lang="ts">
@ -118,7 +123,6 @@
*/
const fileList = computed({
get: () => {
console.log(props.fileLists);
return props.fileLists;
},
set: (val) => {
@ -141,8 +145,6 @@
const handleHttpUpload = async (options) => {
loading.value = true;
try {
//
onExceed();
//
const formData = new FormData();
formData.append('file', options.file.file);
@ -194,7 +196,6 @@
* @param options 参数
*/
const handleHttpUploads = async (options: UploadRequestOptions) => {
console.log(options);
const configData = await getOssConfig();
let date = new Date();
let year = date.getFullYear();
@ -214,8 +215,6 @@
let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
loading.value = true;
try {
//
onExceed();
//
const headers = {
'Access-Control-Allow-Origin': '*',
@ -379,6 +378,8 @@
<style scoped lang="less">
.upload-box {
position: relative;
.img-box {
display: flex;
flex-wrap: wrap;
> div {
@ -400,25 +401,6 @@
}
}
}
:deep(.n-upload) {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: v-bind(width);
height: v-bind(height);
overflow: hidden;
border-radius: 4px;
border: 1px dashed #d9d9d9;
cursor: pointer;
.n-upload-trigger {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.upload-image {
width: 100%;
height: 100%;
@ -453,4 +435,30 @@
}
}
}
:deep(.n-upload) {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: v-bind(width);
height: v-bind(height);
overflow: hidden;
border-radius: 4px;
border: 1px dashed #d9d9d9;
cursor: pointer;
.n-upload-trigger {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.n-upload__tip {
line-height: 18px;
font-size: 12px;
margin-top: 7px;
}
}
</style>

View File

@ -79,7 +79,9 @@
:multiple="true"
:fileLists="item.filePath"
:z-index="index"
/>
>
<template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
</UploadImgs>
</template>
<template v-else-if="item.type == 'file'">
<UploadFile