headerObj中添加了token请求头,注意修改
// 引用组件
import EleUpload from '@/components/upload/ele-upload'
<ele-upload
ref="uploadRef"
:fileList="回显使用的文件列表List"
:associateId="关联条目的id"
businessType="业务代码(用以区分同一个id条目下的多种类型的附件)"/>
// 获取组件内的文件列表
const fileList = this.$refs.uploadRef.getFileList()
组件内容
<template>
<div>
<el-upload
:headers="headerObj"
:limit="limitCount"
:action="$http.adornUrl('/common/uploadFile')"
list-type="picture-card"
:file-list="childFileList"
:data="{
associateId: associateId,
businessType: businessType
}"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-error="onError">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false" width="60%">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: 'ele-upload',
props: {
fileList: {
type: Array,
required: true
},
associateId: {
type: Number
},
businessType: {
type: String,
required: true
},
maxSize: {
type: Number,
default: 2
// 文件最大尺寸,单位MB,默认2MB
},
limitCount: {
type: Number,
default: 9
}
},
data () {
return {
headerObj: {
token: this.$cookie.get('token')
},
childFileList: [],
dialogVisible: false,
dialogImageUrl: ''
}
},
watch: {
fileList () {
this.childFileList = []
this.fileList.forEach(item => {
if (item) {
this.childFileList.push({
name: item.fileOriginName,
url: this.fileUploadPreUrl + item.virPath
})
}
})
}
},
computed: {
fileUploadPreUrl () {
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? ('/proxyApi') : window.SITE_CONFIG.baseUrl)
}
},
mounted () {
},
methods: {
getFileList () {
let fList = []
this.childFileList.forEach(childFile => {
fList.push({
fileOriginName: childFile.name,
virPath: childFile.url
})
})
return fList
},
handleAvatarSuccess (res, file) {
res.result.forEach(item => {
this.childFileList.push({
name: item.fileOriginName,
url: this.fileUploadPreUrl + item.virPath
})
})
},
beforeAvatarUpload (file) {
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
const isLtM = file.size / 1024 / 1024 < this.maxSize
if (!isJPG) {
this.$message.error('图片只能是 JPG, PNG 格式!')
}
if (!isLtM) {
this.$message.error('图片大小不能超过 ' + this.maxSize + 'MB!')
}
return isJPG && isLtM
},
onError () {
this.$message.error('图片上传失败!')
},
handleRemove (file, fileList) {
this.childFileList = fileList
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
}
}
}
</script>