100 lines
3.2 KiB
Vue
100 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="public-upload-img fix">
|
|
<li v-for="(item, index) in uploadList">
|
|
<template v-if="item.status === 'finished'">
|
|
<img :src="item.url" alt="" />
|
|
<div class="upload-list-cover">
|
|
<Icon type="ios-eye-outline" size="24" title="预览图片" @click.native="handleView(item.url)"></Icon>
|
|
<Icon size="24" class="ml-10" title="删除图片" type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<Progress v-if="item.showProgress" :percent="item.percentage" class="mt-24" hide-info></Progress>
|
|
</template>
|
|
</li>
|
|
<li class="add-li">
|
|
<Upload
|
|
ref="upload"
|
|
:show-upload-list="false"
|
|
:on-success="handleSuccess"
|
|
:format="['jpg', 'jpeg', 'png', 'gif']"
|
|
accept="image/gif,image/jpeg,image/jpg,image/png"
|
|
:max-size="2048"
|
|
:on-format-error="handleFormatError"
|
|
:on-exceeded-size="handleMaxSize"
|
|
:default-file-list="defaultList"
|
|
type="drag"
|
|
:action="uploadUrl"
|
|
>
|
|
<div class="add-box">
|
|
<Icon type="ios-add" size="50"></Icon>
|
|
</div>
|
|
</Upload>
|
|
</li>
|
|
</ul>
|
|
<Modal title="图片预览" v-model="visible" footer-hide>
|
|
<img :src="imgName" v-if="visible" style="width: 100%" />
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
baseUrl: { type: String, default: "" },
|
|
imgList: { type: Array, default: [] },
|
|
uploadUrl: { type: String, default: "" },
|
|
},
|
|
data() {
|
|
return {
|
|
imgName: "",
|
|
visible: false,
|
|
uploadList: [],
|
|
defaultList: [],
|
|
};
|
|
},
|
|
created() {
|
|
let arr = [];
|
|
|
|
this.imgList.forEach(element => {
|
|
arr.push({
|
|
name: "",
|
|
url: this.baseUrl + element,
|
|
});
|
|
});
|
|
this.defaultList = arr;
|
|
},
|
|
mounted() {
|
|
console.log(this.$refs.upload.fileList);
|
|
this.uploadList = this.$refs.upload.fileList;
|
|
},
|
|
methods: {
|
|
handleView(name) {
|
|
this.imgName = name;
|
|
this.visible = true;
|
|
},
|
|
handleRemove(index) {
|
|
this.$refs.upload.fileList.splice(index, 1);
|
|
this.imgList.splice(index, 1);
|
|
},
|
|
handleSuccess(res, file) {
|
|
console.log(res, file);
|
|
file.url = this.baseUrl + res.data;
|
|
this.imgList.push(res.data);
|
|
},
|
|
handleFormatError(file) {
|
|
console.error(file);
|
|
},
|
|
handleMaxSize(file) {
|
|
this.$Notice.warning({
|
|
title: "图片过大",
|
|
desc: "图片最大上传大小为20M.",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |