【vue+antd-design-vue】a-upload-dragger 支持拖拽上传同时支持点击上传
先看文档,change事件以及参数,文档写的真的很详细再看代码,beforeUpload文件上传前返回false停止上传,file-list已经上传的文件列表<a-upload-dragger :multiple="false" :file-list="fileList" :beforeUpload="beforeUpload" @change="handleChange"><p
·
先看文档,change事件以及参数,文档写的真的很详细
再看代码,beforeUpload文件上传前返回false停止上传,file-list已经上传的文件列表
<a-upload-dragger :multiple="false" :file-list="fileList" :beforeUpload="beforeUpload" @change="handleChange">
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
<p class="ant-upload-hint">
支持扩展名:.rar .zip .doc .docx .pdf .jpg ...
<br />
文件大小:最大支持30M
</p>
</a-upload-dragger>
</a-form>
<template slot="footer">
<a-button @click="handleCancel">取消</a-button>
<a-button :disabled="fileList.length <= 0" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
</template>
最主要的是change事件
beforeUpload(file) {
return false
},
handleChange({ file, fileList }) {
console.log(file,'file');
const { $message } = this
if (file.status === 'removed') {
this.fileList = []
} else {
const isLt30M = file.size / 1024 / 1024 < 30
if (!isLt30M) {
$message.warning('资源包不能超过30MB')
} else {
this.fileList = [file]
}
}
},
打印一下file,当前操作的文件对象
当移除文件后
文件上传之后点击确认按钮,调后台的接口
在data中定义
resourceData: {},
fileList: []
handleSubmit() {
const {
$message,
resourceData
} = this
if (this.fileList.length <= 0) {
$message.warning('请选择上传的资源包')
return false
}
this.loading = true
const file = this.fileList[0]
const formData = new FormData()
if (resourceData.fPkResourcePacketId) {
formData.append('ResourcePacketId', resourceData.ResourcePacketId)
} else {
formData.append('DataPacketId', resourceData.DataPacketId)
}
formData.append('ResourceName', resourceData.ResourceName)
formData.append('ResourceFormat', resourceData.ResourceFormat)
formData.append('file', file)
saveOrUpdate(formData)
.then(res => {
if (res && res.code == 0) {
this.$emit('ok')
this.visible = false
this.fileList = []
} else {
$message.error(res.msg || '上传资源包失败')
}
})
.catch(err => {
$message.error('请求失败,请稍后重试')
})
.finally(() => {
this.loading = false
})
}
调完接口上传成功后,headers的Form Data中的参数如下,把接口需要的参数,通过 formData.append的方式添加
更多推荐
已为社区贡献35条内容
所有评论(0)