From ad88a6c7badd36789a851c34bdca8e0d0dc30dfb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 14 四月 2023 14:57:01 +0800
Subject: [PATCH] bug修改
---
src/components/myUpload/index.vue | 339 +++++++++++++++++++++++++++++--------------------------
1 files changed, 178 insertions(+), 161 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index cae960e..8624cd7 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,185 +1,202 @@
<template>
- <div class="my-upload">
- <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="image" :preview-src-list="[image]"></el-image>
- </div>
+ <div class="my-upload">
+ <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="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>
+ </el-upload>
</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>
- </el-upload>
- </div>
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";
export default {
- data() {
- return {
- // 鏂囦欢鍒楄〃
- fileList: [],
- // 鏄惁鏄剧ず鏂囦欢鍒楄〃
- flag: false,
- // 澶氶��
- multiple: false,
- // 闄愬埗
- limit: 4,
- // 鏂囦欢鍒楄〃绫诲瀷
- listType: "picture-card",
- loading: false
- };
- },
- methods: {
- // 楠岃瘉涓婁紶鏂囦欢
- 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;
- }
+ data() {
+ return {
+ // 鏂囦欢鍒楄〃
+ fileList: [],
+ // 鏄惁鏄剧ず鏂囦欢鍒楄〃
+ flag: false,
+ // 澶氶��
+ multiple: false,
+ // 闄愬埗
+ limit: 4,
+ // 鏂囦欢鍒楄〃绫诲瀷
+ listType: "picture-card",
+ loading: false
+ };
+ },
+ methods: {
+ // 楠岃瘉涓婁紶鏂囦欢
+ 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;
+ }
- if (file.size / 1024 / 1024 > 5) {
- this.$message.error("涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!");
- this.loading = false;
- return false;
- }
- return true;
- },
+ if (file.size / 1024 / 1024 > 5) {
+ this.$message.error("涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!");
+ this.loading = false;
+ return false;
+ }
+ return true;
+ },
- handleUpload(data) {
- this.loading = true;
- const { file } = data;
- const validate = this.validateFile(file);
- if (!validate) {
- return;
- }
- const formData = new FormData();
- formData.append('file', file);
- imageManagement.importImage(formData)
- .then(({ url1, url2, url3, url4 }) => {
- const url = url1 ?? url2 ?? url3 ?? url4;
- this.$emit('setPictureUrl', { url: url });
- this.loading = false;
- })
- .catch(err => {
- this.loading = false;
- this.$message.error(err);
- })
- },
+ handleUpload(data) {
+ this.loading = true;
+ const { file } = data;
+ const validate = this.validateFile(file);
+ if (!validate) {
+ return;
+ }
+ const formData = new FormData();
+ formData.append('file', file);
+ imageManagement.importImage(formData)
+ .then((url) => {
+ // .then(({ url1, url2, url3, url4 }) => {
+ // debugger
+ // const url = url1 ?? url2 ?? url3 ?? url4;
+ this.$emit('setPictureUrl', { url: url });
+ this.loading = false;
+ })
+ .catch(err => {
+ this.loading = false;
+ this.$message.error(err);
+ })
+ },
- handleDeletePicture(imageUrl) {
- this.$emit("delPictureUrl", { url: imageUrl });
+ handleDeletePicture(imageUrl) {
+ this.$emit("delPictureUrl", { url: imageUrl });
+ },
},
- },
- props: {
- pictureList: {
- type: Array,
- default: () => [],
+ props: {
+ pictureList: {
+ type: Array,
+ default: () => [],
+ },
+ isShowUpload: {
+ type: Boolean,
+ default: () => true,
+ },
},
- isShowUpload: {
- type: Boolean,
- default: () => true,
- },
- },
};
</script>
<style lang="scss" scoped>
.my-upload {
- display: flex;
- flex-wrap: nowrap;
- justify-content: flex-start;
- margin-right: 5px;
-
- .upload-btn {
display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 4px;
- width: 100px;
- height: 100px;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ margin-right: 5px;
- &:hover i {
- color: #409eff;
+ .upload-btn {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ width: 100px;
+ height: 100px;
+
+ &:hover i {
+ color: #409eff;
+ }
+
+ i {
+ font-size: 30px;
+ font-weight: 650;
+ }
+
+ span {
+ 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;
+ }
+ }
}
- i {
- font-size: 30px;
- font-weight: 650;
+ :deep(.el-upload--picture-card) {
+ width: 100px;
+ height: 100px;
}
-
- span {
- line-height: 22px;
+ :deep(.el-upload-list__item) {
+ width: 100px;
+ height: 100px;
}
- }
- .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