Skip to content

Commit 5b51b89

Browse files
author
QM303176530
committed
Merge branch 'develop' of https://github.com/flipped-aurora/gin-vue-admin into gva_gormv2_dev
2 parents 316f02c + f1ecd76 commit 5b51b89

File tree

4 files changed

+237
-20
lines changed

4 files changed

+237
-20
lines changed

‎web/public/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6+
<meta name="renderer" content="webkit">
67
<meta http-equiv="X-UA-Compatible" content="IE=edge">
78
<meta name="viewport" content="width=device-width,initial-scale=1.0">
89
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
@@ -17,4 +18,4 @@
1718
<!-- built files will be auto injected -->
1819
</body>
1920

20-
</html>
21+
</html>

‎web/src/components/upload/image.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!--
2+
<div>
3+
带压缩的上传
4+
<upload-image v-model="imageUrl" :fileSize="512" />
5+
已上传文件 {{ imageUrl }}
6+
</div>
7+
8+
9+
-->
10+
11+
<template>
12+
<div>
13+
<el-upload
14+
class="image-uploader"
15+
:action="`${path}/fileUploadAndDownload/upload`"
16+
:show-file-list="false"
17+
:on-success="handleImageSuccess"
18+
:before-upload="beforeImageUpload"
19+
:multiple="false"
20+
>
21+
<img v-if="imageUrl" :src="imageUrl" class="image" />
22+
<i v-else class="el-icon-plus image-uploader-icon"></i>
23+
</el-upload>
24+
</div>
25+
</template>
26+
<script>
27+
const path = process.env.VUE_APP_BASE_API;
28+
import ImageCompress from "@/utils/image.js";
29+
export default {
30+
name: "upload-image",
31+
model: {
32+
prop: "imageUrl",
33+
event: "change",
34+
},
35+
props: {
36+
imageUrl: {
37+
type: String,
38+
default: "",
39+
},
40+
fileSize: {
41+
type: Number,
42+
default: 2048, // 2M 超出后执行压缩
43+
},
44+
maxWH: {
45+
type: Number,
46+
default: 1920, // 图片长宽上限
47+
},
48+
},
49+
data() {
50+
return {
51+
path: path,
52+
};
53+
},
54+
methods: {
55+
beforeImageUpload(file) {
56+
let isRightSize = file.size / 1024 < this.fileSize;
57+
if (!isRightSize) {
58+
// 压缩
59+
let compress = new ImageCompress(file, this.fileSize, this.maxWH);
60+
return compress.compress();
61+
}
62+
return isRightSize;
63+
},
64+
handleImageSuccess(res, file) {
65+
// this.imageUrl = URL.createObjectURL(file.raw);
66+
const { code, msg, data } = res;
67+
if (data.file) {
68+
this.$emit("change", data.file.url);
69+
}
70+
},
71+
},
72+
};
73+
</script>
74+
75+
<style lang="scss" scoped>
76+
.image-uploader {
77+
border: 1px dashed #d9d9d9;
78+
width: 180px;
79+
border-radius: 6px;
80+
cursor: pointer;
81+
position: relative;
82+
overflow: hidden;
83+
}
84+
.image-uploader {
85+
border-color: #409eff;
86+
}
87+
.image-uploader-icon {
88+
font-size: 28px;
89+
color: #8c939d;
90+
width: 178px;
91+
height: 178px;
92+
line-height: 178px;
93+
text-align: center;
94+
}
95+
.image {
96+
width: 178px;
97+
height: 178px;
98+
display: block;
99+
}
100+
</style>

‎web/src/utils/image.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
export default class ImageCompress {
2+
constructor(file, fileSize, maxWH = 1920) {
3+
this.file = file
4+
this.fileSize = fileSize
5+
this.maxWH = maxWH // 最大长宽
6+
}
7+
8+
compress() {
9+
// 压缩
10+
const fileType = this.file.type
11+
const fileSize = this.file.size / 1024
12+
return new Promise(resolve => {
13+
const reader = new FileReader();
14+
reader.readAsDataURL(this.file);
15+
reader.onload = () => {
16+
const canvas = document.createElement('canvas');
17+
const img = document.createElement('img');
18+
img.src = reader.result;
19+
img.onload = () => {
20+
const ctx = canvas.getContext('2d');
21+
let _dWH = this.dWH(img.width, img.height, this.maxWH)
22+
canvas.width = _dWH.width
23+
canvas.height = _dWH.height
24+
25+
// 清空后, 重写画布
26+
ctx.clearRect(0, 0, canvas.width, canvas.height)
27+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
28+
29+
let newImgData = canvas.toDataURL(fileType, 0.90)
30+
31+
// 压缩宽高后的图像大小
32+
let newImgSize = this.fileSizeKB(newImgData)
33+
34+
if (newImgSize > this.fileSize) {
35+
console.log('图片尺寸太大!' + fileSize + " >> " + newImgSize)
36+
reject(`图片尺寸太大!`)
37+
}
38+
39+
let blob = this.dataURLtoBlob(newImgData, fileType)
40+
let nfile = new File([blob], this.file.name);
41+
resolve(nfile)
42+
};
43+
};
44+
});
45+
}
46+
47+
/*
48+
* 长宽等比缩小
49+
* 图像的一边(长或宽)为最大目标值
50+
* */
51+
dWH(srcW, srcH, dMax) {
52+
53+
let defaults = {
54+
width: srcW,
55+
height: srcH
56+
}
57+
if (Math.max(srcW, srcH) > dMax) {
58+
if (srcW > srcH) {
59+
defaults.width = dMax
60+
defaults.height = Math.round(srcH * (dMax / srcW))
61+
return defaults
62+
} else {
63+
defaults.height = dMax
64+
defaults.width = Math.round(srcW * (dMax / srcH))
65+
return defaults
66+
}
67+
} else {
68+
return defaults
69+
}
70+
}
71+
72+
fileSizeKB(dataURL) {
73+
let self = this
74+
75+
let sizeKB = 0
76+
sizeKB = Math.round((dataURL.split(',')[1].length * 3 / 4) / 1024)
77+
return sizeKB
78+
}
79+
80+
/*
81+
* 转为Blob
82+
* */
83+
dataURLtoBlob(dataURL, fileType) {
84+
let self = this
85+
86+
let byteString = atob(dataURL.split(',')[1])
87+
let mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0]
88+
let ab = new ArrayBuffer(byteString.length)
89+
let ia = new Uint8Array(ab)
90+
for (let i = 0; i < byteString.length; i++) {
91+
ia[i] = byteString.charCodeAt(i)
92+
}
93+
if (fileType) {
94+
mimeString = fileType
95+
}
96+
return new Blob([ab], { type: mimeString, lastModifiedDate: new Date() })
97+
}
98+
99+
}

‎web/src/view/example/upload/upload.vue

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
11
<template>
22
<div v-loading.fullscreen.lock="fullscreenLoading">
33
<div class="upload">
4-
<el-upload
5-
:action="`${path}/fileUploadAndDownload/upload`"
6-
:before-upload="checkFile"
7-
:headers="{ 'x-token': token }"
8-
:on-error="uploadError"
9-
:on-success="uploadSuccess"
10-
:show-file-list="false"
11-
>
12-
<el-button size="small" type="primary">点击上传</el-button>
13-
<div class="el-upload__tip" slot="tip">
14-
只能上传jpg/png文件，且不超过500kb
15-
</div>
16-
</el-upload>
4+
<el-row>
5+
<el-col :span="12">
6+
<el-upload
7+
:action="`${path}/fileUploadAndDownload/upload`"
8+
:before-upload="checkFile"
9+
:headers="{ 'x-token': token }"
10+
:on-error="uploadError"
11+
:on-success="uploadSuccess"
12+
:show-file-list="false"
13+
>
14+
<el-button size="small" type="primary">点击上传</el-button>
15+
<div class="el-upload__tip" slot="tip">
16+
只能上传jpg/png文件，且不超过500kb
17+
</div>
18+
</el-upload>
19+
</el-col>
20+
<el-col :span="12">
21+
带压缩的上传, (512(k)为压缩限制)
22+
<upload-image v-model="imageUrl" :fileSize="512" :maxWH="1080" />
23+
已上传文件 {{ imageUrl }}
24+
</el-col>
25+
</el-row>
26+
1727
<el-table :data="tableData" border stripe>
1828
<el-table-column label="预览" width="100">
1929
<template slot-scope="scope">
20-
<CustomPic picType="file" :picSrc="scope.row.url"/>
30+
<CustomPic picType="file" :picSrc="scope.row.url" />
2131
</template>
2232
</el-table-column>
2333
<el-table-column label="日期" prop="UpdatedAt" width="180">
@@ -30,7 +40,11 @@
3040
prop="name"
3141
width="180"
3242
></el-table-column>
33-
<el-table-column label="链接" prop="url" min-width="300"></el-table-column>
43+
<el-table-column
44+
label="链接"
45+
prop="url"
46+
min-width="300"
47+
></el-table-column>
3448
<el-table-column label="标签" prop="tag" width="100">
3549
<template slot-scope="scope">
3650
<el-tag
@@ -72,26 +86,29 @@ import infoList from "@/components/mixins/infoList";
7286
import { getFileList, deleteFile } from "@/api/fileUploadAndDownload";
7387
import { downloadImage } from "@/utils/downloadImg";
7488
import { formatTimeToStr } from "@/utils/data";
75-
import CustomPic from '@/components/customPic'
89+
import CustomPic from "@/components/customPic";
90+
import UploadImage from "@/components/upload/image.vue";
7691
export default {
7792
name: "Upload",
7893
mixins: [infoList],
7994
components: {
80-
CustomPic
81-
},
95+
CustomPic,
96+
UploadImage,
97+
},
8298
data() {
8399
return {
84100
fullscreenLoading: false,
85101
listApi: getFileList,
86102
path: path,
87103
tableData: [],
104+
imageUrl: "",
88105
};
89106
},
90107
computed: {
91108
...mapGetters("user", ["userInfo", "token"]),
92109
},
93110
filters: {
94-
formatDate: function(time) {
111+
formatDate: function (time) {
95112
if (time != null && time != "") {
96113
var date = new Date(time);
97114
return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");

0 commit comments

Comments
 (0)