308 lines
10 KiB
Vue
308 lines
10 KiB
Vue
<template>
|
||
<div class="upload-file-wrap">
|
||
<el-row :gutter="24">
|
||
<el-col :span="span" v-if="isInCount">
|
||
<div class="el-col-ctn-box-name">
|
||
<div class="el-col-upload-box-name">
|
||
<el-upload
|
||
class="el-upload-box-name"
|
||
ref="upload"
|
||
action=""
|
||
:accept="accept"
|
||
:show-file-list="false"
|
||
:http-request="httpRequest"
|
||
>
|
||
<div class="upload-file">
|
||
<i class="el-icon-plus uploader-file-icon"></i>
|
||
<div class="f14 color-text-secondary text-center">上传材料</div>
|
||
</div>
|
||
</el-upload>
|
||
<div class="f14 text-center color-text-regular line-height-30">{{uploadName}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
<!--上传的图片预览-->
|
||
<el-col :span="span" v-for="(item,i) in lists" :key="i" >
|
||
<div class="el-col-ctn-box-name ">
|
||
<div class="el-col-upload-box-name">
|
||
<div class="upload-preview-box" @click="handlePreview(item)">
|
||
<img v-if="item.deletable && !readOnly"
|
||
class="upload-delete-icon" src="../assets/image/icon_close.png" alt=""
|
||
@click.stop.prevent="handleDelete(item, i)">
|
||
<div class="upload-file">
|
||
<el-image class="el-image-upload" :src="item.iconFrontSrc" fit="scale-down"></el-image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="f14 text-center color-text-regular line-height-30">
|
||
<!-- {{showFileName ? item.fileName : uploadName}} -->
|
||
<el-input v-model.trim="item.fileName"
|
||
size="small"
|
||
clearable
|
||
@change="handleChangeName(lists)"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import projectConfig from "../services/projectConfig";
|
||
export default {
|
||
name: "uploadFile",
|
||
props: {
|
||
span: {
|
||
// layout组件参数，每排排列几个
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
accept: {
|
||
type: String,
|
||
default: '*',
|
||
},
|
||
imageHeight: {
|
||
// 图片、上传框的高度
|
||
type: String,
|
||
default: ''
|
||
},
|
||
imageMode: {
|
||
// 图片裁剪、缩放的模式,具体参考uni image
|
||
type: String,
|
||
default: 'aspectFit'
|
||
},
|
||
readOnly: {
|
||
// 只读，true-是，false-否
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
fileList: {
|
||
// 已上传的文件列表
|
||
type: [Array, Object],
|
||
default: () => {
|
||
return [
|
||
//{ url:文件地址, fileName: 文件名}
|
||
]
|
||
}
|
||
},
|
||
uploadName: {
|
||
// 要上传的文件昵称
|
||
type: String,
|
||
default: '上传'
|
||
},
|
||
maxCount: {
|
||
// 允许上传文件的最大总数
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
selectCount: {
|
||
// 每次上传时，允许用户选择的文件数量
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
customUpload: {
|
||
// 自定义上传按钮的样式
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
autoUpload: {
|
||
// 是否自动上传
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showFileName: {
|
||
// 是否显示文件名
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
splitFileTitle: {
|
||
// 是否在显示效果上分割文件、文件名
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
lists: [
|
||
//{url: 文件地址, fileName: 文件名, deletable: 是否可删除, readStatus: 是否显示阅读状态, iconFrontSrc: 图标样式}
|
||
],
|
||
srcList: [],
|
||
}
|
||
},
|
||
computed: {
|
||
isInCount() {
|
||
return (this.lists.length < this.maxCount) && !this.readOnly
|
||
},
|
||
},
|
||
watch: {
|
||
// 监听文件列表的变化，重新整理内部数据
|
||
fileList: {
|
||
immediate: true,
|
||
handler() {
|
||
this.formatFileList()
|
||
}
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
formatFileList() {
|
||
let fileList = this.fileList || []
|
||
this.srcList = []
|
||
fileList = JSON.parse(JSON.stringify(fileList))
|
||
console.log('upload===========formatFileList()方法==========fileList：', fileList)
|
||
const lists = fileList.map(item => {
|
||
let obj = Object.assign(item)
|
||
obj.deletable = typeof(obj.deletable) === 'boolean' ? obj.deletable : true
|
||
let text = obj.url || obj.fileName
|
||
obj.fileType = this.$util.getFileExtension(text)
|
||
// 统一显示文件对应的图标(前端图片地址)
|
||
obj.iconFrontSrc = this.$util.getIcon(obj)
|
||
|
||
// let previewUrl = `${projectConfig.fileHost}${obj.url}`
|
||
let previewUrl = `/mediate/minio/preview/${obj.url}`
|
||
if(obj.url.includes('http')){
|
||
previewUrl = obj.url
|
||
}
|
||
obj.previewUrl = previewUrl
|
||
if(this.$util.getFileType(text) === 'image') {
|
||
// 如果是图片，直接显示图片
|
||
obj.iconFrontSrc = obj.previewUrl
|
||
}
|
||
this.srcList.push(obj.iconFrontSrc)
|
||
|
||
obj.fileName = item.fileName
|
||
return obj
|
||
});
|
||
this.lists = lists
|
||
console.log('uploadFile----:', this.lists)
|
||
},
|
||
async httpRequest(param) {
|
||
console.log('httpRequest上传文件：',param)
|
||
let fileType = this.$util.getFileExtension(param.file.name)
|
||
if(this.accept !== '*' && this.accept.indexOf(fileType) === -1) {
|
||
this.$message.warning(`不能上传${fileType}格式的文件`)
|
||
return
|
||
}
|
||
|
||
try{
|
||
let formData = new FormData()
|
||
formData.append('file', param.file)
|
||
let uploadFileRes = await this.$fetchApi.uploadFile(formData);
|
||
// console.log(uploadFileRes)
|
||
let fileList = JSON.parse(JSON.stringify(this.fileList))
|
||
// let time = this.$util.getTimestamp()
|
||
// let fileType = this.$util.getFileExtension(uploadFileRes.url)
|
||
// let fileName = `${time}.${fileType}`
|
||
fileList.push({
|
||
url: uploadFileRes.url,
|
||
fileName:uploadFileRes.fileName
|
||
})
|
||
this.$emit('handleUploadFile', fileList)
|
||
|
||
}catch (e) {
|
||
this.$message.error(e.msg)
|
||
}
|
||
},
|
||
async handlePreview(item) {
|
||
console.log(item)
|
||
try {
|
||
let res = await this.$fetchApi.getMinioToken({objectName: item.url})
|
||
console.log(res)
|
||
window.open(`${item.previewUrl}?token=${res}`, '_target')
|
||
}catch (e) {
|
||
this.$message.error(e.msg || e)
|
||
}
|
||
},
|
||
handleChangeName(list){
|
||
console.log('名字===',list)
|
||
let listData = list.map((item,i) => {
|
||
return {
|
||
url: item.url,
|
||
fileName:item.fileName
|
||
}
|
||
})
|
||
this.$emit('handleUploadFile', listData)
|
||
},
|
||
handleDelete(item, i) {
|
||
this.lists.splice(i, 1)
|
||
let fileList = JSON.parse(JSON.stringify(this.fileList))
|
||
fileList.splice(i, 1)
|
||
this.$emit('handleUploadFile', fileList)
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.el-col-ctn-box-name{
|
||
width: 100%;
|
||
height: 180px;
|
||
}
|
||
.el-col-upload-box-name{
|
||
width: 120px;
|
||
height: 180px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.el-upload-box-name{
|
||
width: 100%;
|
||
height: 120px;
|
||
background: #F5F7FA;
|
||
border: 1px dashed #EBEEF5;
|
||
margin-bottom: 10px;
|
||
}
|
||
.el-col-ctn-box-name .el-upload,
|
||
.el-col-ctn-box-name .upload-file{
|
||
width: 100% !important;
|
||
|
||
}
|
||
.el-col-ctn-box-name .upload-preview-box{
|
||
position: relative;
|
||
height: 120px;
|
||
border: 1px dashed #EBEEF5;
|
||
margin-bottom: 10px;
|
||
}
|
||
.el-col-ctn-box-name .upload-delete-icon{
|
||
width: 30px;
|
||
height: auto;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
cursor: pointer;
|
||
z-index: 11111;
|
||
}
|
||
.el-col-ctn-box-name .upload-file{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 120px;
|
||
}
|
||
.el-col-ctn-box-name .uploader-file-icon{
|
||
font-size: 32px;
|
||
color: $color-text-secondary;
|
||
}
|
||
.el-col-ctn-box-name .el-image-upload{
|
||
border-radius: 4px;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
.el-col-ctn-box-name .txt-center{
|
||
height: 40px;
|
||
line-height: 20px;
|
||
}
|
||
.line-height-30{
|
||
line-height: 30px;
|
||
}
|
||
|
||
// .el-input__inner{
|
||
// text-align: center;
|
||
// }
|
||
</style> |