125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<el-upload
|
||
action="#"
|
||
:limit="limit"
|
||
:file-list="fileList"
|
||
:show-file-list="true" :auto-upload="false"
|
||
list-type="picture-card"
|
||
:accept="accept"
|
||
:on-change="fileChange"
|
||
:class="{ disabled: uploadDisabled }"
|
||
>
|
||
<!-- 文件格式下载，图片格式预览 -->
|
||
<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="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
||
<i class="el-icon-download" />
|
||
</span>
|
||
<span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
|
||
<i class="el-icon-zoom-in" />
|
||
</span>
|
||
<span class="el-upload-list__item-delete" @click="fileRemove(file)">
|
||
<i class="el-icon-delete" />
|
||
</span>
|
||
</span>
|
||
</div>
|
||
|
||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { downloadFile } from '@/utils/download'
|
||
export default {
|
||
name: "uploadFile",
|
||
data() {
|
||
return {
|
||
fileList:[],
|
||
|
||
}
|
||
},
|
||
props: {
|
||
limit: {
|
||
type: [String, Number],
|
||
default: ""
|
||
},
|
||
uploadList: {
|
||
type: Array,
|
||
default: function() {
|
||
return []
|
||
}
|
||
},
|
||
accept: {
|
||
type: String,
|
||
default: ".png, .jpg, .jpeg"
|
||
},
|
||
},
|
||
computed: {
|
||
//图片上传超出限制，隐藏上传框
|
||
uploadDisabled() {
|
||
return this.fileList.length >= Number(this.limit)
|
||
},
|
||
},
|
||
methods: {
|
||
fileChange(file, fileList){
|
||
if(file.size > 1024 * 1024 * 10){
|
||
this.$message.warning('文件大小不能超过10Mb')
|
||
fileList = fileList.filter(item => {
|
||
return item.uid != file.uid
|
||
})
|
||
}
|
||
fileList.forEach(file=>{
|
||
if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
|
||
file.url = require('../../assets/file.png')
|
||
}
|
||
})
|
||
this.fileList = fileList;
|
||
this.$emit('update:uploadList',this.fileList)
|
||
},
|
||
fileRemove(file) {
|
||
let sum = 0
|
||
this.fileList.forEach((item, index) => {
|
||
if (item.uid == file.uid) { sum = index }
|
||
})
|
||
this.fileList.splice(sum, 1)
|
||
// this.$emit('uploadList', this.fileList)
|
||
this.$emit('update:uploadList',this.fileList)
|
||
},
|
||
handleDownload(file) {
|
||
downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
|
||
},
|
||
//上传组件-图片查看
|
||
picturePreview(file) {
|
||
this.$emit('picturePreview', file)
|
||
},
|
||
// 判断文件类型,图片预览，文件下载
|
||
updataIf(e) {
|
||
if (e.fileName) {
|
||
if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
} else {
|
||
if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep.disabled {
|
||
.el-upload--picture-card {
|
||
display: none;
|
||
}
|
||
}
|
||
</style> |