修改
This commit is contained in:
parent
c02d3afc58
commit
2c01bd70d1
@ -1,46 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="upload-box">
|
<div class="upload-box">
|
||||||
<div v-for="(item, index) in fileList" class="items">
|
<div class="img-box">
|
||||||
<img v-if="item.filePath" :src="item.filePath" class="upload-image" />
|
<div v-for="(item, index) in fileList" class="items">
|
||||||
<div class="upload-handle" @click.stop>
|
<img v-if="item.filePath" :src="item.filePath" class="upload-image" />
|
||||||
<div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
|
<div class="upload-handle" @click.stop>
|
||||||
<n-icon size="20">
|
<div class="handle-icon" @click="handleEdit(index)" v-if="!self_disabled">
|
||||||
<EditOutlined />
|
<n-icon size="20">
|
||||||
</n-icon>
|
<EditOutlined />
|
||||||
</div>
|
</n-icon>
|
||||||
<div class="handle-icon" @click="onPreview(index)">
|
</div>
|
||||||
<n-icon size="20">
|
<div class="handle-icon" @click="onPreview(index)">
|
||||||
<ZoomInOutlined />
|
<n-icon size="20">
|
||||||
</n-icon>
|
<ZoomInOutlined />
|
||||||
</div>
|
</n-icon>
|
||||||
<div class="handle-icon" @click="handleRemove(index)" v-if="!self_disabled">
|
</div>
|
||||||
<n-icon size="20">
|
<div class="handle-icon" @click="handleRemove(index)" v-if="!self_disabled">
|
||||||
<DeleteOutlined />
|
<n-icon size="20">
|
||||||
</n-icon>
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<n-upload
|
||||||
|
action="#"
|
||||||
|
:id="uuid"
|
||||||
|
class="upload-demo my-upload-images"
|
||||||
|
:multiple="multiple"
|
||||||
|
ref="uploadRef"
|
||||||
|
:style="{ width: width, height: height }"
|
||||||
|
:disabled="loading ? true : self_disabled || fileList.length >= props.limit"
|
||||||
|
@before-upload="beforeUpload"
|
||||||
|
@change="handleUploadChange"
|
||||||
|
:max="limit"
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
:show-file-list="false"
|
||||||
|
v-if="!self_disabled"
|
||||||
|
:accept="props.fileType"
|
||||||
|
>
|
||||||
|
<n-icon size="40" color="#666666" v-if="!loading">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<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>
|
||||||
<n-upload
|
|
||||||
action="#"
|
|
||||||
:id="uuid"
|
|
||||||
class="upload-demo my-upload-images"
|
|
||||||
:multiple="multiple"
|
|
||||||
ref="uploadRef"
|
|
||||||
:style="{ width: width, height: height }"
|
|
||||||
:disabled="loading ? true : self_disabled || fileList.length >= props.limit"
|
|
||||||
@before-upload="beforeUpload"
|
|
||||||
@change="handleUploadChange"
|
|
||||||
:max="limit"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
:show-file-list="false"
|
|
||||||
v-if="!self_disabled"
|
|
||||||
:accept="props.fileType"
|
|
||||||
>
|
|
||||||
<n-icon size="40" color="#666666" v-if="!loading">
|
|
||||||
<PlusOutlined />
|
|
||||||
</n-icon>
|
|
||||||
<n-progress type="circle" v-else :percentage="progress" />
|
|
||||||
</n-upload>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -118,7 +123,6 @@
|
|||||||
*/
|
*/
|
||||||
const fileList = computed({
|
const fileList = computed({
|
||||||
get: () => {
|
get: () => {
|
||||||
console.log(props.fileLists);
|
|
||||||
return props.fileLists;
|
return props.fileLists;
|
||||||
},
|
},
|
||||||
set: (val) => {
|
set: (val) => {
|
||||||
@ -141,8 +145,6 @@
|
|||||||
const handleHttpUpload = async (options) => {
|
const handleHttpUpload = async (options) => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
// 设置允许做大上传张数验证
|
|
||||||
onExceed();
|
|
||||||
// 上传文件
|
// 上传文件
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', options.file.file);
|
formData.append('file', options.file.file);
|
||||||
@ -194,7 +196,6 @@
|
|||||||
* @param options 参数
|
* @param options 参数
|
||||||
*/
|
*/
|
||||||
const handleHttpUploads = async (options: UploadRequestOptions) => {
|
const handleHttpUploads = async (options: UploadRequestOptions) => {
|
||||||
console.log(options);
|
|
||||||
const configData = await getOssConfig();
|
const configData = await getOssConfig();
|
||||||
let date = new Date();
|
let date = new Date();
|
||||||
let year = date.getFullYear();
|
let year = date.getFullYear();
|
||||||
@ -214,8 +215,6 @@
|
|||||||
let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
|
let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
// 设置允许做大上传张数验证
|
|
||||||
onExceed();
|
|
||||||
// 文件请求头
|
// 文件请求头
|
||||||
const headers = {
|
const headers = {
|
||||||
'Access-Control-Allow-Origin': '*',
|
'Access-Control-Allow-Origin': '*',
|
||||||
@ -379,27 +378,64 @@
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.upload-box {
|
.upload-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
> div {
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.items {
|
.img-box {
|
||||||
width: v-bind(width);
|
display: flex;
|
||||||
height: v-bind(height);
|
flex-wrap: wrap;
|
||||||
border: 1px dashed #d9d9d9;
|
> div {
|
||||||
border-radius: 4px;
|
margin-right: 10px;
|
||||||
padding: 5px;
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.items {
|
||||||
|
width: v-bind(width);
|
||||||
|
height: v-bind(height);
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.upload-handle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
.upload-handle {
|
||||||
.upload-handle {
|
position: absolute;
|
||||||
opacity: 1;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
background: rgb(0 0 0 / 60%);
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
.handle-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 6%;
|
||||||
|
color: aliceblue;
|
||||||
|
span {
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 85%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-upload) {
|
:deep(.n-upload) {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -419,38 +455,10 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.upload-image {
|
.n-upload__tip {
|
||||||
width: 100%;
|
line-height: 18px;
|
||||||
height: 100%;
|
font-size: 12px;
|
||||||
object-fit: contain;
|
margin-top: 7px;
|
||||||
}
|
|
||||||
|
|
||||||
.upload-handle {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
background: rgb(0 0 0 / 60%);
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.handle-icon {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 6%;
|
|
||||||
color: aliceblue;
|
|
||||||
span {
|
|
||||||
font-size: 85%;
|
|
||||||
line-height: 85%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -79,7 +79,9 @@
|
|||||||
:multiple="true"
|
:multiple="true"
|
||||||
:fileLists="item.filePath"
|
:fileLists="item.filePath"
|
||||||
:z-index="index"
|
:z-index="index"
|
||||||
/>
|
>
|
||||||
|
<template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
||||||
|
</UploadImgs>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.type == 'file'">
|
<template v-else-if="item.type == 'file'">
|
||||||
<UploadFile
|
<UploadFile
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user