文件上传组件的使用a-upload
<a-upload
name="taskFlowpicName"
accept=".jpg" // 可接受的文件
//v-model="baseInfo.taskFlowpicUrl" // 绑定的url
:fileList="FlowPicList" // 上传的文件信息 相当于v-model双向绑定
:remove="FlowPicRemove" // 移除文件的方法
:beforeUpload="beforeFlowPicFileUpload" // 上次之前的函数钩子
:customRequest="uploadFlowPic" // 上次文件的函数钩子
list-type="picture"
class="upload-list-inline"
>
<a-button> <a-icon :component="IconUpload" /> 上传文件 </a-button>
</a-upload>
//this.FlowPicList = this.FlowPicList = [{
// uid: this.baseInfo.taskFlowpicUrl,
// name: this.baseInfo.taskFlowpicName,
// status: 'done',
// url: this.baseInfo.taskFlowpicUrl
//}]
// 上传办理流程图文件前的狗子
beforeFlowPicFileUpload (file) {
let isAllowed = true
if (file && file.size === 0) {
isAllowed = false
this.$message.error('文件大小不能为0!')
return isAllowed
}
const type = ['jpg']
if (!type.includes((file.name.split('.')[file.name.split('.').length - 1]).toLowerCase())) {
isAllowed = false
this.$message.error('格式不正确')
return isAllowed
}
if (this.FlowPicList.length >= 1) {
isAllowed = false
this.$message.error('已存在办理流程图,只允许上传1个!')
return isAllowed
}
return isAllowed
},
// 上传办理流程图文件方法
uploadFlowPic (file) {
const form = new FormData()
form.append('file', file.file)
itemApi.uploadFile(form).then(res => {
if (res.success) {
// 调用组件内方法, 设置为成功状态
file.onSuccess(res, file.file)
file.status = 'done'
this.FlowPicList = [{
uid: res.data.fileUrl,
name: file.file.name,
status: 'done',
url: res.data.fileUrl
}]
this.baseInfo.taskFlowpicName = file.file.name
this.baseInfo.taskFlowpicUrl = res.data.fileUrl
} else {
file.onError()
file.status = 'error'
}
})
this.fileChange = true
},
// 删除办理流程图
FlowPicRemove (file) {
this.FlowPicList.forEach((item, index) => {
if (item.uid === file.uid) {
this.FlowPicList.splice(index, 1)
}
})
this.baseInfo.taskFlowpicUrl = ''
this.baseInfo.taskFlowpicName = ''
this.fileChange = true
},
如果下面图标要显示,需要将上传的文件信息数据赋值
this.FlowPicList = [{
uid: res.data.fileUrl,
name: file.file.name,
status: 'done',
url: res.data.fileUrl
}]
标签:
ant-design-vue
, vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2021-10-13 区分不同环境变量