调用:
<cardHead title="申报证明材料" />
<files
:key="keys.file"
:disabled="['check', 'shenhe', 'view'].includes(type)"
:upload-url="url_upload"
:data="files"
:formdata="{
bxzx0008: 'xcp01',
bxzx0009: hap43.bxcp0001,
bxzx0010: '申报证明材料'
}"
@load="loadInfo"
@remove="remove"
/>
loadInfo (data) {
if (data && JSON.stringify(data) != '{}') {
data.url =
this.baseURL + 'little-business-zljff/zljff/common/down/' + data.id
this.files.push(data)
this.keys.file = this.$generateKey()
}
},
// 删除已经上传的文件
remove (data) {
this.files.forEach(f => {
if (f.uid == data.uid) {
console.log(f)
this.files.splice(this.files.indexOf(f), 1)
}
}) console.log(this.files) },
fileupload.vue:
<template>
<div>
<el-upload
:disabled="disabled"
:action="baseURL + uploadUrl"
list-type="picture-card"
:auto-upload="true"
:on-success="initData"
:headers="headers"
:data="formdata"
:file-list="data"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
v-if="visible.preview"
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- <span
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span> -->
<span
v-if="visible.remove"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<!-- 预览文件上传信息 -->
<el-dialog :visible.sync="visible.dialog" z-index="2000" :modal="true">
<img width="100%" :src="URLS.image" alt="" />
</el-dialog>
</div>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
},
uploadUrl: {
type: String,
required: true
},
removeUrl: {
type: String,
default: null
},
showUrl: {
type: String,
default: null
},
data: {
type: Array,
default: new Array()
},
formdata: {
type: Object,
default: function () {
return {}
}
},
type: {
type: String,
default: '1'
}
},
mounted () {
if (this.disabled) {
this.visible.remove = false
} else {
this.visible.remove = true
}
this.visible.preview = true
},
data () {
return {
// 文件下载地址
baseURL: _CONFIG_.BASEURL,
headers: {
accessToken: localStorage.token
}, // 文件上传头文件
URLS: {
image: '', // 预览文件地址
upload: '', // 上传文件地址
down: '' // 下载文件地址
},
// 状态控制
visible: {
dialog: false, // 弹窗控制
remove: true, // 删除按钮控制
preview: true // 预览按钮控制
}
}
},
methods: {
// 回调父页面方法传输数据
initData (response, file, fileList) {
if (file.response.code == 'success') {
var info = {
uid: file.uid,
url: file.url,
type: this.type
}
Object.assign(info, response.data)
this.$emit('load', info)
}
},
// 点击删除按钮事件
handleRemove (file) {
this.$emit('remove', { uid: file.uid, data: file })
},
// 点击预览按钮事件
handlePictureCardPreview (file) {
debugger
this.URLS.image = file.url
this.visible.dialog = true
},
// 点击下载按钮事件
handleDownload (file) {
console.log(file)
}
}
}
</script>
<style scoped></style>
