From 8a5227c2e5a898004eda1f61180e076ec089fe85 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 29 十一月 2022 10:34:42 +0800
Subject: [PATCH] 图片显示优化
---
src/components/myUpload/index.vue | 216 ++++++++++++++++++++++++++++-------------------------
1 files changed, 113 insertions(+), 103 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index b2e666d..2eba7da 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,104 +1,111 @@
<template>
- <div class="my-upload">
- <div v-if="pictureList.length > 0" class="image-box">
- <div v-for="image in pictureList" class="image-box-item">
- <i v-if="isShowUpload" @click="handleDeletePicture(image)" class="el-icon-delete image-delete-icon"></i>
- <el-image :key="image" class="image-content" :src="image" ></el-image>
- </div>
- </div>
- <el-upload
+ <div class="my-upload">
+ <div v-if="pictureList.length > 0" class="image-box">
+ <div v-for="image in pictureList" class="image-box-item">
+ <i
v-if="isShowUpload"
- :file-list="fileList"
- action="/sccg/file/medias"
- :multiple="multiple"
- :show-file-list="flag"
- :before-upload="beforeUpload"
- :limit="limit"
- :on-success="handleSuccess"
- :on-error="handleError"
- :list-type="listType"
- :headers="getToken()">
- <div class="upload-btn">
- <i class="el-icon-plus"></i>
- <span>涓婁紶鍥剧墖</span>
- </div>
- </el-upload>
+ @click="handleDeletePicture(image)"
+ class="el-icon-delete image-delete-icon"
+ ></i>
+ <el-image :key="image" class="image-content" :src="image"></el-image>
+ </div>
</div>
+ <el-upload
+ v-if="isShowUpload"
+ :file-list="fileList"
+ action="/sccg/file/medias"
+ :multiple="multiple"
+ :show-file-list="flag"
+ :before-upload="beforeUpload"
+ :limit="limit"
+ :on-success="handleSuccess"
+ :on-error="handleError"
+ :list-type="listType"
+ :headers="getToken()"
+ >
+ <div class="upload-btn">
+ <i class="el-icon-plus"></i>
+ <span>涓婁紶鍥剧墖</span>
+ </div>
+ </el-upload>
+ </div>
</template>
<script>
export default {
- data() {
- return {
- // 鏂囦欢鍒楄〃
- fileList: [],
- // 鏄惁鏄剧ず鏂囦欢鍒楄〃
- flag: false,
- // 澶氶��
- multiple: false,
- // 闄愬埗
- limit: 4,
- // 鏂囦欢鍒楄〃绫诲瀷
- listType: 'picture-card'
- };
+ data() {
+ return {
+ // 鏂囦欢鍒楄〃
+ fileList: [],
+ // 鏄惁鏄剧ず鏂囦欢鍒楄〃
+ flag: false,
+ // 澶氶��
+ multiple: false,
+ // 闄愬埗
+ limit: 4,
+ // 鏂囦欢鍒楄〃绫诲瀷
+ listType: "picture-card",
+ };
+ },
+ 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 / 1024 / 1024 > 5) {
+ this.$message.error("涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!");
+ return false;
+ }
+ return true;
},
- 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 / 1024 / 1024 > 5) {
- this.$message.error('涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!')
- return false
- }
- return true
- },
- // 涓婁紶鎴愬姛鍥炶皟
- handleSuccess(res, file, filelist) {
- if(res.data.url1){
- this.$emit('setPictureUrl',{url:res.data.url1});
- }
- 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});
- }
- },
- // 涓婁紶澶辫触鍥炶皟
- handleError(err, file, fileList) {
- this.$message({
- type:'error',
- message:err
- })
- },
- // 鑾峰彇token
- getToken() {
- const token = sessionStorage.getItem('token');
- const tokenHead = sessionStorage.getItem('tokenHead');
- if (token && tokenHead) {
- return { Authorization: tokenHead + token }
- }
- },
-
- handleDeletePicture(imageUrl) {
- this.$emit('delPictureUrl', { url: imageUrl });
- }
- },
- props: {
- pictureList: {
- type: Array,
- default: () => []
- },
- isShowUpload: {
- type: Boolean,
- default: () => true
+ // 涓婁紶鎴愬姛鍥炶皟
+ handleSuccess(res, file, filelist) {
+ if (res.data.url1) {
+ this.$emit("setPictureUrl", { url: res.data.url1 });
+ } 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 });
}
},
-}
+ // 涓婁紶澶辫触鍥炶皟
+ handleError(err, file, fileList) {
+ this.$message({
+ type: "error",
+ message: err,
+ });
+ },
+ // 鑾峰彇token
+ getToken() {
+ const token = sessionStorage.getItem("token");
+ const tokenHead = sessionStorage.getItem("tokenHead");
+ if (token && tokenHead) {
+ return { Authorization: tokenHead + token };
+ }
+ },
+
+ handleDeletePicture(imageUrl) {
+ this.$emit("delPictureUrl", { url: imageUrl });
+ },
+ },
+ props: {
+ pictureList: {
+ type: Array,
+ default: () => [],
+ },
+ isShowUpload: {
+ type: Boolean,
+ default: () => true,
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.my-upload {
@@ -116,7 +123,7 @@
width: 100px;
height: 100px;
- &:hover i{
+ &:hover i {
color: #409eff;
}
@@ -131,6 +138,7 @@
}
.image-box {
display: flex;
+ flex-wrap: wrap;
height: 100px;
margin: 0 10px;
@@ -144,10 +152,12 @@
left: calc(100% - 50px);
opacity: 0;
}
-
+ .image-box-item {
+ padding: 0px 10px;
+ }
.image-box-item:hover {
color: #ffffff;
- opacity: .5;
+ opacity: 0.5;
.image-delete-icon {
z-index: 2;
opacity: 1;
@@ -155,13 +165,13 @@
}
}
- :deep(.el-upload--picture-card) {
- width: 100px;
- height: 100px;
- }
- :deep(.el-upload-list__item){
- width: 100px;
- height: 100px;
- }
+ :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