295 lines
7.3 KiB
Vue
295 lines
7.3 KiB
Vue
<template>
|
||
<div>
|
||
<div class="upload-pic-thumb">
|
||
<vuedraggable
|
||
:list="uploadList"
|
||
:disabled="!draggable||!multiple"
|
||
:animation="200"
|
||
class="list-group"
|
||
ghost-class="thumb-ghost"
|
||
@end="onEnd"
|
||
>
|
||
<div class="upload-list" v-for="(item, index) in uploadList" :key="index">
|
||
<div v-if="item.status == 'finished'" style="height:60px;">
|
||
<img :src="item.url" />
|
||
<div class="upload-list-cover">
|
||
<Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
|
||
<Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
|
||
</div>
|
||
</div>
|
||
</vuedraggable>
|
||
<Upload
|
||
ref="upload"
|
||
:multiple="multiple"
|
||
:show-upload-list="false"
|
||
:on-success="handleSuccess"
|
||
:on-error="handleError"
|
||
:format="['jpg','jpeg','png','gif']"
|
||
:max-size="1024"
|
||
:on-format-error="handleFormatError"
|
||
:on-exceeded-size="handleMaxSize"
|
||
:before-upload="handleBeforeUpload"
|
||
type="drag"
|
||
:action="uploadFileUrl"
|
||
:headers="accessToken"
|
||
style="display: inline-block;width:58px;"
|
||
>
|
||
<div style="width: 58px;height:58px;line-height: 58px;">
|
||
<Icon type="md-camera" size="20"></Icon>
|
||
</div>
|
||
</Upload>
|
||
</div>
|
||
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
|
||
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
|
||
<div slot="footer">
|
||
<Button @click="viewImage=false">关闭</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { uploadFile } from "@/api/index";
|
||
import vuedraggable from "vuedraggable";
|
||
export default {
|
||
name: "uploadPicThumb",
|
||
components: {
|
||
vuedraggable
|
||
},
|
||
props: {
|
||
value: {
|
||
type: null
|
||
},
|
||
draggable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
multiple: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
limit: {
|
||
type: Number,
|
||
default: 10
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
accessToken: {}, // 验证token
|
||
uploadFileUrl: uploadFile, // 上传地址
|
||
uploadList: [], // 上传列表
|
||
viewImage: false, // 预览modal
|
||
imgUrl: "" // 图片地址
|
||
};
|
||
},
|
||
methods: {
|
||
// 拖拽结束事件
|
||
onEnd() {
|
||
this.returnValue();
|
||
},
|
||
// 初始化方法
|
||
init() {
|
||
this.setData(this.value, true);
|
||
this.accessToken = {
|
||
accessToken: this.getStore("accessToken")
|
||
};
|
||
},
|
||
// 预览图片
|
||
handleView(imgUrl) {
|
||
this.imgUrl = imgUrl;
|
||
this.viewImage = true;
|
||
},
|
||
// 移除图片
|
||
handleRemove(file) {
|
||
this.uploadList = this.uploadList.filter(i => i.url !== file.url);
|
||
this.returnValue();
|
||
},
|
||
// 上传成功
|
||
handleSuccess(res, file) {
|
||
if (res.success) {
|
||
file.url = res.result;
|
||
// 单张图片处理
|
||
if (!this.multiple && this.uploadList.length > 0) {
|
||
// 删除第一张
|
||
this.uploadList.splice(0, 1);
|
||
}
|
||
this.uploadList.push(file);
|
||
// 返回组件值
|
||
this.returnValue();
|
||
} else {
|
||
this.$Message.error(res.message);
|
||
}
|
||
},
|
||
// 上传失败
|
||
handleError(error, file, fileList) {
|
||
this.$Message.error(error.toString());
|
||
},
|
||
// 格式校验
|
||
handleFormatError(file) {
|
||
this.$Notice.warning({
|
||
title: "不支持的文件格式",
|
||
desc:
|
||
"所选文件‘ " +
|
||
file.name +
|
||
" ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
|
||
});
|
||
},
|
||
// 上传文件大小校验
|
||
handleMaxSize(file) {
|
||
this.$Notice.warning({
|
||
title: "文件大小过大",
|
||
desc:
|
||
"所选文件大小过大，不能超过1M."
|
||
});
|
||
},
|
||
// 上传之前钩子
|
||
handleBeforeUpload() {
|
||
if (this.multiple && this.uploadList.length >= this.limit) {
|
||
this.$Message.warning("最多只能上传" + this.limit + "张图片");
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
// 返回组件值
|
||
returnValue() {
|
||
if (!this.uploadList || this.uploadList.length < 1) {
|
||
if (!this.multiple) {
|
||
this.$emit("input", "");
|
||
this.$emit("on-change", "");
|
||
} else {
|
||
this.$emit("input", []);
|
||
this.$emit("on-change", []);
|
||
}
|
||
return;
|
||
}
|
||
if (!this.multiple) {
|
||
// 单张
|
||
let v = this.uploadList[0].url;
|
||
this.$emit("input", v);
|
||
this.$emit("on-change", v);
|
||
} else {
|
||
let v = [];
|
||
this.uploadList.forEach(e => {
|
||
v.push(e.url);
|
||
});
|
||
this.$emit("input", v);
|
||
this.$emit("on-change", v);
|
||
}
|
||
},
|
||
// 传入值变化时改变值
|
||
setData(v, init) {
|
||
if (typeof v == "string") {
|
||
// 单张
|
||
if (this.multiple) {
|
||
this.$Message.warning("多张上传仅支持数组数据类型");
|
||
return;
|
||
}
|
||
if (!v) {
|
||
return;
|
||
}
|
||
this.uploadList = [];
|
||
let item = {
|
||
url: v,
|
||
status: "finished"
|
||
};
|
||
this.uploadList.push(item);
|
||
this.$emit("uploadchange", v);
|
||
this.$emit("on-change", v);
|
||
} else if (typeof v == "object") {
|
||
// 多张
|
||
if (!this.multiple) {
|
||
this.$Message.warning("单张上传仅支持字符串数据类型");
|
||
return;
|
||
}
|
||
this.uploadList = [];
|
||
if (v.length > this.limit) {
|
||
for (let i = 0; i < this.limit; i++) {
|
||
let item = {
|
||
url: v[i],
|
||
status: "finished"
|
||
};
|
||
this.uploadList.push(item);
|
||
}
|
||
this.$emit("on-change", v.slice(0, this.limit));
|
||
if (init) {
|
||
this.$emit("input", v.slice(0, this.limit));
|
||
}
|
||
this.$Message.warning("最多只能上传" + this.limit + "张图片");
|
||
} else {
|
||
v.forEach(e => {
|
||
let item = {
|
||
status: "finished",
|
||
...e
|
||
};
|
||
this.uploadList.push(item);
|
||
});
|
||
this.$emit("on-change", v);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
this.setData(val);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.upload-pic-thumb{
|
||
display: flex;
|
||
}
|
||
.upload-list {
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 60px;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
position: relative;
|
||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
margin-right: 5px;
|
||
vertical-align: middle;
|
||
}
|
||
.upload-list img {
|
||
width: 100%;
|
||
height: -webkit-fill-available;
|
||
}
|
||
.upload-list-cover {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
.upload-list:hover .upload-list-cover {
|
||
display: block;
|
||
}
|
||
.upload-list-cover i {
|
||
color: #fff;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
margin: 0 2px;
|
||
}
|
||
.list-group {
|
||
display: inline-block;
|
||
}
|
||
.thumb-ghost {
|
||
opacity: 0.5;
|
||
background: #c8ebfb;
|
||
}
|
||
</style>
|