大家好，又见面了，我是你们的朋友全栈君。
antd vue 文件上传实例
说明
该实例是后端进行文件上传至minio服务器 这里仅仅是展示前端antd vue得代码
限制文件类型配置查看 这里
代码语言：javascript复制<template>
<a-upload
:headers="headers"
:action="url"
:fileList="fileList"
@change="handleChange"
:beforeUpload="beforeUpload"
>
<a-button :disabled="isShow"> <a-icon type="upload" /> Upload </a-button>
</a-upload>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'MinioUplode',
// 此处接收仅仅针对有有父组件得情况，如果直接使用a-upload则不需要
props: {
url: {
type: String,
default: 'api/storage/upload'
},
fileListTemp: {
type: Array,
default: () => []
},
isShow: {
type: Boolean,
default: false
}
},
data () {
return {
fileList: this.fileListTemp,
// 请求头里要携带token用来识别身份
headers: {
'Authorization': 'Bearer' this.token()
}
}
},
methods: {
...mapGetters(['token']),
// 此方法主要用来处理回显列表，以及去除没有实际上传得文件
// 图片一旦长传在file中会有status字段，如果没有则没有实际上传
// status有四种状态 'uploading' 'done' 'error' 'removed'
handleChange (info) {
let fileList = [...info.fileList]
// 这里用来处理，页面中展示已经上传得个数
// .slice(),括号里是负数是从尾部开始截取 限制最长15
fileList = fileList.slice(-15)
// 此处去除fileList中status为undefined得对象
// 注意此处不是null！！！！
fileList = fileList.filter(item => item.status !== undefined)
// 从后端得回调 response 中获取url，并复制给fileList对象得url
// 作用，有了url 前端才可以下载查看
fileList = fileList.map(file => {
if (file.response) {
// 获取回调url
file.url = file.response.data.url
}
return file
})
this.fileList = fileList
},
beforeUpload (file) {
// 此处针对修改操作时，如果之前没有数据this.fileList时null 进行...this.fileList会报错
// 错误类型： Invalid attempt to spread non-iterable instance
if (this.fileList === null) {
this.fileList = []
}
const list = [...this.fileList]
// 限制最多只能穿15个文件
const listLength = list.length > 14
console.log(list.length, 'list.length')
if (listLength) {
this.$message.warning('最多上传15个文件')
}
// 限制单个文件的大小不大于100MB
const size = file.size / 1024 / 1024 > 100
if (size) {
this.$message.warning('上传文件不能大于100MB')
}
// 返回时注意，此处要把所有得标识flag全部返回并且使用&
// 原因：有一个条件不满足，就不能进行文件上传
return !size && !listLength
}
},
// 此处监听仅仅针对有有父组件得情况，如果直接使用a-upload则不需要
watch: {
fileList (val) {
this.fileList = val
// 向父组件更新
this.$emit('updateFileList', val)
},
fileListTemp (val) {
this.fileList = val
}
}
}
</script>
<style scoped>
</style>发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170645.html原文链接：https://javaforall.cn
