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>
|