antd 解决Upload组件before-upload无效的问题
使用antd+Vue的时候,有个上传视频的操作,当使用upload组件上传时,参考官网简单的实例,并不能手动上传。研究一番后发现使用before-upload属性可行,但是碰到了点问题:我的需求是在上传到服务器之前,判断是否存在同名文件,存在则直接将同名文件地址写入表单,免去上传。初步编码如下:beforeUpload (file, fileList) {return this.$http.get
·
使用antd+Vue的时候,有个上传视频的操作,当使用upload组件上传时,参考官网简单的实例,并不能手动上传。研究一番后发现使用before-upload属性可行,但是碰到了点问题:
我的需求是在上传到服务器之前,判断是否存在同名文件,存在则直接将同名文件地址写入表单,免去上传。初步编码如下:
beforeUpload (file, fileList) {
return this.$http.get('/cms/charge/material/isCopy?name=' + file.name)
.then(res => {
if (res === 1) {
this.videoList = this.videoIntroList = fileList;
return false;
}
});
},
调用后发现仍然上传了文件,原来直接调用方法,会触发@change。
<a-upload
name="file"
action="/api/file/upload/video/"
:file-list="videoList"
:before-upload="beforeUpload"
@change="handleChange"
>
解决办法是直接返回Promise对象,代码修改如下:
beforeUpload (file, fileList) {
return new Promise((resolve, reject) => {
this.$http.get('/cms/charge/material/isCopy?name=' + file.name)
.then(res => {
if (res === 1) {
<!-- 重复则直接赋值,此处省略了表单赋值 -->
this.videoList = this.videoIntroList = fileList;
return false;
} else if (res === 0) {
<!-- 不重复则上传 -->
return resolve(true);
}
});
});
}
如此就能在上传之前调用后端接口对文件做一些处理。
更多推荐
已为社区贡献1条内容
所有评论(0)