From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选
---
src/components/myUpload/index.vue | 216 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 130 insertions(+), 86 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index 6bcc4ff..4f72a5c 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,20 +1,21 @@
<template>
<div class="my-upload">
- <el-upload
- :file-list="fileList"
- class="upload-demo"
- action="/sccg/file/medias"
- :multiple="multiple"
- :show-file-list="flag"
- :before-upload="beforeUpload"
- :limit="limit"
- :on-success="handleSuccess"
- :on-error="handleError"
- :list-type="listType"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :headers="getToken()">
- <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
+ <div v-if="pictureList.length > 0" class="image-box">
+ <div v-for="image in pictureList" :class="{
+ 'image-box-item': true,
+ 'image-box-item-cover': isShowUpload
+ }">
+ <span v-if="isShowUpload" @click="handleDeletePicture(image)"
+ class="image-delete-icon el-icon-delete"></span>
+ <el-image :key="image" class="image-content" :src="setPicUrl(image)"
+ :preview-src-list="[image]"></el-image>
+ </div>
+ </div>
+ <el-upload v-if="isShowUpload && pictureList.length < limit" :file-list="fileList" v-loading="loading"
+ element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" action=""
+ :multiple="multiple" :show-file-list="flag" :limit="limit" :list-type="listType" :auto-upload="true"
+ :http-request="handleUpload" style="margin-left: 14px">
+ <div class="upload-btn">
<i class="el-icon-plus"></i>
<span>涓婁紶鍥剧墖</span>
</div>
@@ -22,109 +23,104 @@
</div>
</template>
<script>
+import imageManagement from "@/api/operate/imageManagement";
+import { FILE_ORIGINAL_PATH } from "@/utils";
+
export default {
data() {
return {
// 鏂囦欢鍒楄〃
fileList: [],
// 鏄惁鏄剧ず鏂囦欢鍒楄〃
- flag: true,
+ flag: false,
// 澶氶��
multiple: false,
// 闄愬埗
- limit: 50,
- // 鎸夐挳楂樺害
- btnHeight: '120px',
- // 鎸夐挳瀹藉害
- btnWidth: '120px',
+ limit: 4,
// 鏂囦欢鍒楄〃绫诲瀷
- listType: 'picture-card'
+ listType: "picture-card",
+ loading: false
};
},
methods: {
- // 涓婁紶涔嬪墠鍥炶皟
- beforeUpload(rawFile) {
- if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
- this.$message.error('鍥剧墖蹇呴』鏄� jpg/svg/jpeg/png 鏍煎紡!')
- return false
- } else if (rawFile.size / 105 / 105 > 2) {
- this.$message.error('涓婁紶鍥剧墖涓嶈兘瓒呰繃 2MB!')
- return false
+ // 楠岃瘉涓婁紶鏂囦欢
+ validateFile(file) {
+ if (
+ file.type !== "image/png" &&
+ file.type !== "image/svg+xml" &&
+ file.type !== "image/jpg" &&
+ file.type !== "image/jpeg"
+ ) {
+ this.$message.error("鍥剧墖蹇呴』鏄� jpg/svg/jpeg/png 鏍煎紡!");
+ this.loading = false;
+ return false;
}
- return true
+
+ if (file.size / 1024 / 1024 > 5) {
+ this.$message.error("涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!");
+ this.loading = false;
+ return false;
+ }
+ return true;
},
- // 涓婁紶鎴愬姛鍥炶皟
- handleSuccess(res, file, filelist) {
- if(res.data.url1){
- this.$emit('setPictureUrl',{url:res.data.url1});
+
+ handleUpload(data) {
+ this.loading = true;
+ const { file } = data;
+ const validate = this.validateFile(file);
+ if (!validate) {
+ return;
}
- else if(res.data.url2){
- this.$emit('setPictureUrl',{url:res.data.url2});
- }
- else if(res.data.url3){
- this.$emit('setPictureUrl',{url:res.data.url3});
- }
- else{
- this.$emit('setPictureUrl',{url:res.data.url4});
- }
+ const formData = new FormData();
+ formData.append('file', file);
+ imageManagement.importImage(formData)
+ .then((url) => {
+ this.$emit('setPictureUrl', { url: url });
+ this.loading = false;
+ })
+ .catch(err => {
+ this.loading = false;
+ this.$message.error(err);
+ })
},
- // 涓婁紶澶辫触鍥炶皟
- handleError(err, file, fileList) {
- console.log(err);
- this.$message({
- type:'error',
- message:err
- })
+
+ handleDeletePicture(imageUrl) {
+ this.$emit("delPictureUrl", { url: imageUrl });
},
- // 鑾峰彇token
- getToken() {
- const token = sessionStorage.getItem('token');
- const tokenHead = sessionStorage.getItem('tokenHead');
- if (token && tokenHead) {
- return { Authorization: tokenHead + token }
- }
- },
- // 棰勮
- handlePreview(file){
- console.log(file)
- },
- // 绉婚櫎鏂囦欢
- handleRemove(file, fileList){
- console.log(file,fileList)
+ setPicUrl(item) {
+ item = item.replace("[", "").replace("]", "");
+ return FILE_ORIGINAL_PATH + item;
}
},
props: {
- // 杩斿洖涓婁紶鎴愬姛鍥剧墖鍦板潃
- setPictureUrl:{
- type:Function,
- default:()=>{}
- }
- }
-}
+ pictureList: {
+ type: Array,
+ default: () => [],
+ },
+ isShowUpload: {
+ type: Boolean,
+ default: () => true,
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.my-upload {
- .upload-demo {
- display: flex;
- }
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin-right: 5px;
- :deep(.el-upload--picture-card) {
- width: 120px;
- height: 120px;
- }
- :deep(.el-upload-list__item){
- width: 120px;
- height: 120px;
- }
.upload-btn {
- // background-color: rgba(249, 249, 249, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
+ width: 100px;
+ height: 100px;
- &:hover i{
+ &:hover i {
color: #409eff;
}
@@ -137,5 +133,53 @@
line-height: 22px;
}
}
+
+ .image-box {
+ display: flex;
+ flex-wrap: wrap;
+ height: 100px;
+
+ .image-content {
+ width: 100px;
+ height: 100px;
+ }
+
+ .image-delete-icon {
+ position: absolute;
+ top: 45px;
+ left: 45px;
+ opacity: 0;
+ }
+
+ .image-box-item {
+ position: sticky;
+ margin: 0 10px;
+ }
+
+ .image-box-item-cover:hover {
+ .image-content {
+ box-shadow: #ffffff;
+ opacity: 0.5;
+ }
+
+ .image-delete-icon {
+ color: red;
+ font-size: 14px;
+ z-index: 2;
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ }
+
+ :deep(.el-upload--picture-card) {
+ width: 100px;
+ height: 100px;
+ }
+
+ :deep(.el-upload-list__item) {
+ width: 100px;
+ height: 100px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0