|
|
|
@ -1,36 +1,16 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="UploadFile-container">
|
|
|
|
|
<template v-if="fileList.length">
|
|
|
|
|
<transition-group
|
|
|
|
|
class="el-upload-list el-upload-list--picture-card"
|
|
|
|
|
tag="ul"
|
|
|
|
|
name="el-list"
|
|
|
|
|
>
|
|
|
|
|
<li
|
|
|
|
|
class="el-upload-list__item is-success"
|
|
|
|
|
v-for="(file, index) in fileList"
|
|
|
|
|
:key="file.fileId"
|
|
|
|
|
>
|
|
|
|
|
<el-image
|
|
|
|
|
:src="define.comUrl + file.url"
|
|
|
|
|
class="el-upload-list__item-thumbnail"
|
|
|
|
|
:preview-src-list="getImgList(fileList)"
|
|
|
|
|
:z-index="10000"
|
|
|
|
|
:ref="'image' + index"
|
|
|
|
|
>
|
|
|
|
|
<transition-group class="el-upload-list el-upload-list--picture-card" tag="ul" name="el-list">
|
|
|
|
|
<li class="el-upload-list__item is-success" v-for="(file, index) in fileList" :key="index">
|
|
|
|
|
<el-image :src="define.comUrl + file.url" class="el-upload-list__item-thumbnail"
|
|
|
|
|
:preview-src-list="getImgList(fileList)" :z-index="10000" :ref="'image' + index">
|
|
|
|
|
</el-image>
|
|
|
|
|
<span class="el-upload-list__item-actions">
|
|
|
|
|
<span
|
|
|
|
|
class="el-upload-list__item-preview"
|
|
|
|
|
@click="handlePictureCardPreview(index)"
|
|
|
|
|
>
|
|
|
|
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(index)">
|
|
|
|
|
<i class="el-icon-zoom-in"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
|
|
|
|
v-if="!disabled"
|
|
|
|
|
class="el-upload-list__item-delete"
|
|
|
|
|
@click="handleRemove(index)"
|
|
|
|
|
>
|
|
|
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
|
|
|
|
|
<i class="el-icon-delete"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
@ -38,20 +18,16 @@
|
|
|
|
|
</transition-group>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="!detailed">
|
|
|
|
|
<el-upload
|
|
|
|
|
:action="define.comUploadUrl + '/' + type"
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
:data="params"
|
|
|
|
|
ref="elUpload"
|
|
|
|
|
:on-success="handleSuccess"
|
|
|
|
|
:multiple="limit !== 1"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
accept="image/*"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
:disabled="disabled"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
class="upload-btn"
|
|
|
|
|
>
|
|
|
|
|
<!-- <el-upload :action="define.comUploadUrl + '/' + type" :headers="uploadHeaders" :data="params"
|
|
|
|
|
ref="elUpload" :on-success="handleSuccess" :multiple="limit !== 1" :show-file-list="false"
|
|
|
|
|
accept="image/*" :before-upload="beforeUpload" :disabled="disabled" list-type="picture-card"
|
|
|
|
|
class="upload-btn">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</el-upload> -->
|
|
|
|
|
<el-upload :action="define.comUploadUrl + '/' + type" :headers="uploadHeaders" ref="elUpload"
|
|
|
|
|
:on-success="handleSuccess" :multiple="limit !== 1" :show-file-list="false" accept="image/*"
|
|
|
|
|
:before-upload="beforeUpload" :disabled="disabled" list-type="picture-card"
|
|
|
|
|
class="upload-btn">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</template>
|
|
|
|
@ -78,9 +54,13 @@ export default {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [],
|
|
|
|
|
},
|
|
|
|
|
// type: {
|
|
|
|
|
// type: String,
|
|
|
|
|
// default: "annexpic",
|
|
|
|
|
// },
|
|
|
|
|
type: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "annexpic",
|
|
|
|
|
default: "uploadImg",
|
|
|
|
|
},
|
|
|
|
|
disabled: {
|
|
|
|
|
type: Boolean,
|
|
|
|
@ -129,7 +109,11 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
fileList: [],
|
|
|
|
|
uploadHeaders: { Authorization: this.$store.getters.token },
|
|
|
|
|
// uploadHeaders: { Authorization: this.$store.getters.token },
|
|
|
|
|
uploadHeaders: {
|
|
|
|
|
authorization: this.define.uploadKey,
|
|
|
|
|
contentType: "multipart/form-data"
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -149,6 +133,10 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted: function () {
|
|
|
|
|
// console.log(this.define)
|
|
|
|
|
// console.log(this.detailed)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
beforeUpload(file) {
|
|
|
|
|
if (this.fileList.length >= this.limit) {
|
|
|
|
|