Ant Design Vue Upload自定义上传
参考官方文档API重写a-upload的文件上传方式,使用axios来进行上传前端:选择文件后立即上传,前端接受后端成功上传的文件name和UId,并构建一个downloadFiles实例,用于a-upload组件的已上传文件列表回显。后端:提供一个统一上传接口,上传路径暂定为本地路径,并将文件数据信息写入数据库表中。话不多说,上代码:vue 前端代码,Api请参照官方文档<a-form :
·
参考官方文档API重写a-upload的文件上传方式,使用axios来进行上传
前端:选择文件后立即上传,前端接受后端成功上传的文件name和UId,并构建一个downloadFiles实例,用于a-upload组件的已上传文件列表回显。
后端:提供一个统一上传接口,上传路径暂定为本地路径,并将文件数据信息写入数据库表中。
话不多说,上代码:
vue 前端代码,Api请参照官方文档
<a-form :form="form">
<a-form-item label="名称" style="margin-bottom: 0;">
<a-input v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" />
</a-form-item>
<a-form-item>
<a-upload
:multiple="true" // 多文件上传,默认false
:fileList="downloadFiles" // 返回文件列表
:remove="handleDownloadFileRemove" // 删除文件事件
:customRequest="downloadFilesCustomRequest" // 重写上传方法
>
<a-button class="upload-btn"> <a-icon type="upload" /> 上传附件 </a-button>
</a-upload>
</a-form-item>
</a-form>
export default {
name: 'demoForm',
data () {
form: this.$form.createForm(this), // 表单数据初始化
downloadFiles: [] // 已经上传的文件列表
},
methods: {
// 重写a-upload的文件上传处理方式
downloadFilesCustomRequest (data) {
this.saveFile(data)
},
// 上传并保存文件
saveFile (data){
const formData = new FormData()
formData.append('file', data.file)
formData.append('TempleteFile', data.file.name)
uploadAction('/demo/upload', formData).then((res) => { // 发送http请求
if (res.code === 0){
let file = this.fileFormatter(res.data)
// 上传单个文件后,将该文件会先到a-upload组件的已上传文件列表中的操作
this.downloadFiles.push(file)
} else {
this.$message.error(res.msg)
}
})
},
// 对上传成功返回的数据进行格式化处理,格式化a-upload能显示在已上传列表中的格式(这个格式官方文档有给出的)
fileFormatter(data) {
let file = {
uid: data.uuid, // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
name: data.name, // 文件名
status: 'done', // 状态有:uploading done error removed
response: '{"status": "success"}', // 服务端响应内容
}
return file
},
// 删除
handleDownloadFileRemove (file) {
const index = this.downloadFiles.indexOf(file)
const newFileList = this.downloadFiles.slice()
newFileList.splice(index, 1)
this.downloadFiles = newFileList
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)