From d69b46a92af5473813d95fe4786464cece69e5a2 Mon Sep 17 00:00:00 2001
From: luobisheng <727299681@qq.com>
Date: 星期三, 30 十一月 2022 11:42:24 +0800
Subject: [PATCH] 上传组件修改
---
src/components/myUpload/index.vue | 96 ++++++++++++++++++++++++++---------------------
1 files changed, 53 insertions(+), 43 deletions(-)
diff --git a/src/components/myUpload/index.vue b/src/components/myUpload/index.vue
index 2eba7da..ba7ab88 100644
--- a/src/components/myUpload/index.vue
+++ b/src/components/myUpload/index.vue
@@ -2,26 +2,21 @@
<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>
+ <span v-if="isShowUpload" @click="handleDeletePicture(image)" class="image-delete-icon el-icon-delete"></span>
<el-image :key="image" class="image-content" :src="image"></el-image>
</div>
</div>
<el-upload
- v-if="isShowUpload"
+ v-if="isShowUpload && pictureList.length < limit"
:file-list="fileList"
- action="/sccg/file/medias"
+ action=""
:multiple="multiple"
:show-file-list="flag"
- :before-upload="beforeUpload"
:limit="limit"
- :on-success="handleSuccess"
- :on-error="handleError"
:list-type="listType"
- :headers="getToken()"
+ :auto-upload="true"
+ :http-request="handleUpload"
+ style="margin-left: 14px;"
>
<div class="upload-btn">
<i class="el-icon-plus"></i>
@@ -31,6 +26,8 @@
</div>
</template>
<script>
+import imageManagement from "@/api/operate/imageManagement";
+
export default {
data() {
return {
@@ -44,43 +41,48 @@
limit: 4,
// 鏂囦欢鍒楄〃绫诲瀷
listType: "picture-card",
+ loading: false
};
},
methods: {
- // 涓婁紶涔嬪墠鍥炶皟
- beforeUpload(rawFile) {
+ // 楠岃瘉涓婁紶鏂囦欢
+ validateFile(file) {
if (
- rawFile.type !== "image/png" &&
- rawFile.type !== "image/svg+xml" &&
- rawFile.type !== "image/jpg" &&
- rawFile.type !== "image/jpeg"
+ file.type !== "image/png" &&
+ file.type !== "image/svg+xml" &&
+ file.type !== "image/jpg" &&
+ file.type !== "image/jpeg"
) {
this.$message.error("鍥剧墖蹇呴』鏄� jpg/svg/jpeg/png 鏍煎紡!");
- return false;
- } else if (rawFile.size / 1024 / 1024 > 5) {
+ this.loading = false;
+ return false;
+ }
+
+ 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 });
- } 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 });
+
+ handleUpload(data) {
+ this.loading = true;
+ const { file } = data;
+ const validate = this.validateFile(file);
+ if (!validate) {
+ return;
}
- },
- // 涓婁紶澶辫触鍥炶皟
- handleError(err, file, fileList) {
- this.$message({
- type: "error",
- message: err,
- });
+ 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 });
+ })
+ .catch(err => {
+ this.$message.error(err);
+ })
},
// 鑾峰彇token
getToken() {
@@ -140,27 +142,35 @@
display: flex;
flex-wrap: wrap;
height: 100px;
- margin: 0 10px;
.image-content {
width: 100px;
height: 100px;
}
+
.image-delete-icon {
- position: relative;
- bottom: calc(100% - 50px);
- left: calc(100% - 50px);
+ position: absolute;
+ top: 45px;
+ left: 45px;
opacity: 0;
}
+
.image-box-item {
- padding: 0px 10px;
+ position: sticky;
}
+
.image-box-item:hover {
- color: #ffffff;
- opacity: 0.5;
+ .image-content {
+ box-shadow: #ffffff;
+ opacity: 0.5;
+ }
+
.image-delete-icon {
+ color: red;
+ font-size: 14px;
z-index: 2;
opacity: 1;
+ cursor: pointer;
}
}
}
--
Gitblit v1.8.0