|
|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
|
<div class="component-upload-image">
|
|
|
<el-upload
|
|
|
+ v-if="type === 'more'"
|
|
|
multiple
|
|
|
- :action="uploadImgUrl"
|
|
|
+ action="#"
|
|
|
list-type="picture-card"
|
|
|
:on-success="handleUploadSuccess"
|
|
|
:before-upload="handleBeforeUpload"
|
|
|
@@ -15,48 +16,78 @@
|
|
|
:headers="headers"
|
|
|
:file-list="fileList"
|
|
|
:on-preview="handlePictureCardPreview"
|
|
|
- :class="{hide: this.fileList.length >= this.limit}"
|
|
|
- >
|
|
|
+ :http-request="uploadImage"
|
|
|
+ :class="{hide: fileList.length >= limit}">
|
|
|
<i class="el-icon-plus"></i>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
|
+ <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
|
+ 的文件
|
|
|
+ </div>
|
|
|
</el-upload>
|
|
|
|
|
|
- <!-- 上传提示 -->
|
|
|
- <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
- 请上传
|
|
|
- <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
|
- <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
|
- 的文件
|
|
|
- </div>
|
|
|
+ <el-upload
|
|
|
+ v-if="type === 'alone'"
|
|
|
+ drag
|
|
|
+ action="#"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :limit="2"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ ref="imageUpload"
|
|
|
+ :show-file-list="false"
|
|
|
+ :file-list="fileList"
|
|
|
+ :http-request="uploadImage">
|
|
|
+ <div v-if="fileList.length > 0" class="img-box">
|
|
|
+ <img style="width:100%;height: 100%;" :src="fileList[0].url" alt="" >
|
|
|
+ <div class="img-model" @click.stop="clickImg">
|
|
|
+ <span>预览</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
|
+ <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
|
+ 的文件
|
|
|
+ </div>
|
|
|
+<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件,且不超过500kb</div>-->
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
|
|
|
<el-dialog
|
|
|
:visible.sync="dialogVisible"
|
|
|
title="预览"
|
|
|
width="800"
|
|
|
- append-to-body
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="dialogImageUrl"
|
|
|
- style="display: block; max-width: 100%; margin: 0 auto"
|
|
|
- />
|
|
|
+ append-to-body>
|
|
|
+ <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto"/>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
-import {getFile} from "@/api/system/public";
|
|
|
+import { upload } from "@/api/system/public"
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
value: [String, Object, Array],
|
|
|
- // 图片数量限制
|
|
|
+ //两种模式:more(多选)、alone(单选)
|
|
|
+ type:{
|
|
|
+ type:String,
|
|
|
+ default: 'more',
|
|
|
+ },
|
|
|
+ // 图片数量限制(单选模式下失效)
|
|
|
limit: {
|
|
|
type: Number,
|
|
|
default: 5,
|
|
|
},
|
|
|
// 大小限制(MB)
|
|
|
fileSize: {
|
|
|
- type: Number,
|
|
|
+ type: Number,
|
|
|
default: 5,
|
|
|
},
|
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
|
@@ -81,7 +112,8 @@ export default {
|
|
|
headers: {
|
|
|
Authorization: "Bearer " + getToken(),
|
|
|
},
|
|
|
- fileList: []
|
|
|
+ fileList: [],
|
|
|
+ file:null
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -113,6 +145,31 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ //单传模式下的预览
|
|
|
+ clickImg(){
|
|
|
+ this.dialogImageUrl = this.fileList[0].url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ //自定义上传方式(自带的成功回调及失败回调会失效)
|
|
|
+ uploadImage(fileObj){
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('file',fileObj.file);
|
|
|
+ upload(formData,'image').then(res=>{
|
|
|
+ /*上传成功*/
|
|
|
+ this.$modal.closeLoading();
|
|
|
+ let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
|
|
|
+ let arr = [];
|
|
|
+ arr.push({ name: res.data.name, url: imgUrl})
|
|
|
+ this.fileList = arr;
|
|
|
+ this.$emit("input", this.listToString(this.fileList));
|
|
|
+ }).catch(err=>{
|
|
|
+ /*上传失败*/
|
|
|
+ this.$modal.closeLoading();
|
|
|
+ //this.$modal.msgError(res.msg);
|
|
|
+ this.$refs.imageUpload.handleRemove(fileObj.file);
|
|
|
+ //this.uploadedSuccessfully();
|
|
|
+ })
|
|
|
+ },
|
|
|
// 上传前loading加载
|
|
|
handleBeforeUpload(file) {
|
|
|
let isImg = false;
|
|
|
@@ -143,6 +200,7 @@ export default {
|
|
|
}
|
|
|
this.$modal.loading("正在上传图片,请稍候...");
|
|
|
this.number++;
|
|
|
+ this.file = file;
|
|
|
},
|
|
|
// 文件个数超出
|
|
|
handleExceed() {
|
|
|
@@ -152,7 +210,7 @@ export default {
|
|
|
handleUploadSuccess(res, file) {
|
|
|
console.log(res,'res')
|
|
|
if (res.code === 200) {
|
|
|
- let imgUrl = process.env.VUE_APP_BASE_API + res.data.url
|
|
|
+ let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
|
|
|
this.uploadList.push({ name: res.data.name, url: imgUrl});
|
|
|
this.uploadedSuccessfully();
|
|
|
|
|
|
@@ -175,6 +233,7 @@ export default {
|
|
|
this.fileList.splice(findex, 1);
|
|
|
this.$emit("input", this.listToString(this.fileList));
|
|
|
}
|
|
|
+ console.log( this.listToString(this.fileList),'删除图片')
|
|
|
},
|
|
|
// 上传失败
|
|
|
handleUploadError() {
|
|
|
@@ -187,7 +246,6 @@ export default {
|
|
|
this.fileList = this.fileList.concat(this.uploadList);
|
|
|
this.uploadList = [];
|
|
|
this.number = 0;
|
|
|
- console.log(this.listToString(this.fileList),'ppppp')
|
|
|
this.$emit("input", this.listToString(this.fileList));
|
|
|
this.$modal.closeLoading();
|
|
|
}
|
|
|
@@ -213,8 +271,8 @@ export default {
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
// .el-upload--picture-card 控制加号部分
|
|
|
-::v-deep.hide .el-upload--picture-card {
|
|
|
- display: none;
|
|
|
+::v-deep .hide .el-upload--picture-card {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
// 去掉动画效果
|
|
|
::v-deep .el-list-enter-active,
|
|
|
@@ -226,5 +284,31 @@ export default {
|
|
|
opacity: 0;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
+.img-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .img-model{
|
|
|
+ width: 100%;
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ align-items: center;
|
|
|
+ >span{
|
|
|
+ background-color: rgba(30, 30, 30, .3);
|
|
|
+ display: block;
|
|
|
+ padding: 5px;
|
|
|
+ color:#fff;
|
|
|
+ text-shadow: 0 0 2px #1e1e1e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ .img-model{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
|
|
|