From c5d408958de4cd76c26ae939401675f0bfa24fa3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 22 十一月 2022 22:34:10 +0800
Subject: [PATCH] 文书目标优化
---
src/components/myUpload/index.vue | 94 +++++++++++++++++++++++++++++++++-------------
1 files changed, 67 insertions(+), 27 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index d51b510..a7f4acb 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -1,17 +1,25 @@
<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" :headers="getToken()">
- <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
- <i class="el-icon-plus"></i>
- <span>涓婁紶鍥剧墖</span>
+ <el-upload
+ :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"
+ :on-remove="handleRemove"
+ :headers="getToken()">
+ <div class="upload-btn">
+ <i class="el-icon-plus"></i>
+ <span>涓婁紶鍥剧墖</span>
</div>
</el-upload>
</div>
</template>
<script>
-
export default {
data() {
return {
@@ -22,11 +30,7 @@
// 澶氶��
multiple: false,
// 闄愬埗
- limit: 50,
- // 鎸夐挳楂樺害
- btnHeight: '120px',
- // 鎸夐挳瀹藉害
- btnWidth: '120px',
+ limit: 4,
// 鏂囦欢鍒楄〃绫诲瀷
listType: 'picture-card'
};
@@ -34,23 +38,36 @@
methods: {
// 涓婁紶涔嬪墠鍥炶皟
beforeUpload(rawFile) {
- console.log(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!')
+ } else if (rawFile.size / 1024 / 1024 > 5) {
+ this.$message.error('涓婁紶鍥剧墖涓嶈兘瓒呰繃 5MB!')
return false
}
return true
},
// 涓婁紶鎴愬姛鍥炶皟
handleSuccess(res, file, filelist) {
- console.log(res);
+ 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) {
- console.log(err);
+ this.$message({
+ type:'error',
+ message:err
+ })
},
// 鑾峰彇token
getToken() {
@@ -59,34 +76,52 @@
if (token && tokenHead) {
return { Authorization: tokenHead + token }
}
+ },
+ // 绉婚櫎鏂囦欢
+ handleRemove(file, fileList){
+ this.$emit('delPictureUrl',{url:file.response.data.url1});
}
},
props: {
-
- }
+ // 杩斿洖涓婁紶鎴愬姛鍥剧墖鍦板潃
+ setPictureUrl:{
+ type:Function,
+ default:()=>{}
+ },
+ delPictureUrl:{
+ type:Function,
+ default:()=>{}
+ },
+ pictureList: {
+ type: Array,
+ default: () => []
+ }
+ },
}
</script>
<style lang="scss" scoped>
.my-upload {
- .upload-demo {
- display: flex;
- }
:deep(.el-upload--picture-card) {
- width: 120px;
- height: 120px;
+ width: 100px;
+ height: 100px;
}
:deep(.el-upload-list__item){
- width: 120px;
- height: 120px;
+ width: 100px;
+ height: 100px;
}
+ //.file-list {
+ // display: flex;
+ // flex-wrap: nowrap;
+ //}
.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{
color: #409eff;
@@ -101,5 +136,10 @@
line-height: 22px;
}
}
+ .uploaded-image {
+ width: 0;
+ height: 100px;
+ display: flex;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0