|
|
@@ -1,10 +1,5 @@
|
|
|
<template>
|
|
|
- <el-upload
|
|
|
- class="single-upload"
|
|
|
- :action="url"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="onSuccess"
|
|
|
- :before-upload="beforeUpload">
|
|
|
+ <el-upload class="single-upload" :action="url" :show-file-list="false" :on-success="onSuccess" :before-upload="beforeUpload">
|
|
|
<div></div>
|
|
|
<div class="wrapper">
|
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
@@ -17,122 +12,134 @@
|
|
|
</el-upload>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {imageUrlPrefix} from '../config'
|
|
|
+import { imageUrlPrefix } from '../config'
|
|
|
|
|
|
- const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
|
|
|
- export default {
|
|
|
- created() {
|
|
|
- this.updateImageUrl(this.value);
|
|
|
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
|
|
|
+export default {
|
|
|
+ created() {
|
|
|
+ this.updateImageUrl(this.value);
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: String,
|
|
|
+ usePrefix: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
},
|
|
|
- props: {
|
|
|
- value: String,
|
|
|
- usePrefix: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- prefix: {
|
|
|
- type: String,
|
|
|
- default: imageUrlPrefix
|
|
|
- },
|
|
|
- url: {
|
|
|
- type: String,
|
|
|
- default: baseUrl + '/assets/uploadFile'
|
|
|
+ prefix: {
|
|
|
+ type: String,
|
|
|
+ default: imageUrlPrefix
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ type: String,
|
|
|
+ default: baseUrl + '/assets/uploadFile'
|
|
|
+ },
|
|
|
+ maxSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: '',
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSuccess(res, file) {
|
|
|
+ this.loading = false;
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ var newVal = '';
|
|
|
+ if (res.data instanceof Array) {
|
|
|
+ newVal = res.data[0];
|
|
|
+ } else {
|
|
|
+ newVal = res.data;
|
|
|
}
|
|
|
+ this.$emit('input', newVal);
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imageUrl: '',
|
|
|
- loading: false
|
|
|
- };
|
|
|
+ onError(err, file, fileList) {
|
|
|
+ this.loading = false;
|
|
|
},
|
|
|
- methods: {
|
|
|
- onSuccess(res, file) {
|
|
|
- this.loading = false;
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
- var newVal = '';
|
|
|
- if (res.data instanceof Array) {
|
|
|
- newVal = res.data[0];
|
|
|
- } else {
|
|
|
- newVal = res.data;
|
|
|
- }
|
|
|
- this.$emit('input', newVal);
|
|
|
- },
|
|
|
- onError(err, file, fileList) {
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
- beforeUpload(file) {
|
|
|
- this.loading = true;
|
|
|
- return true;
|
|
|
- },
|
|
|
- updateImageUrl(url) {
|
|
|
- if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
|
|
|
- this.imageUrl = this.prefix + url;
|
|
|
- } else {
|
|
|
- this.imageUrl = url;
|
|
|
+ beforeUpload(file) {
|
|
|
+ if (this.maxSize) {
|
|
|
+ if (file.size > this.maxSize) {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '为了更好的展示体验,图片大小应控制在5M以内。'
|
|
|
+ });
|
|
|
+ return false
|
|
|
}
|
|
|
}
|
|
|
+ this.loading = true;
|
|
|
+ return true;
|
|
|
},
|
|
|
- watch: {
|
|
|
- value(val) {
|
|
|
- this.updateImageUrl(val);
|
|
|
+ updateImageUrl(url) {
|
|
|
+ if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
|
|
|
+ this.imageUrl = this.prefix + url;
|
|
|
+ } else {
|
|
|
+ this.imageUrl = url;
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value(val) {
|
|
|
+ this.updateImageUrl(val);
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- line-height: 178px;
|
|
|
- text-align: center;
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fbfdff;
|
|
|
- &:hover {
|
|
|
- border-color: #409EFF;
|
|
|
- }
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fbfdff;
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .avatar {
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- display: block;
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- &:hover {
|
|
|
- border-color: #409EFF;
|
|
|
- }
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .wrapper {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+.wrapper {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
- .single-upload .el-upload {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .loading {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
- color: #333;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
+.single-upload .el-upload {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
+.loading {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ color: #333;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
</style>
|