vue element 上传组件进行多文件上传时,before-upload和http-request没有响应?
在使用element得上传组件,进行多文件上传时,参考了文章:https://www.jb51.net/article/...
具体代码如下:
1、template代码:
<el-upload
class="upload-image"
ref="upload"
multiple
:action="url"
list-type="picture"
:auto-upload="false"
:before-upload="beforeImageUpload"
:http-request="ImageRequest"
accept="image/*">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip">只能上传jpg、png、gif 格式,大小不超过500KB的图片</div>
</el-upload>
2、methods代码:
// 上传文件前的钩子对文件进行校验
beforeImageUpload(file) {
console.log("上传前测试")
const size = file.size / 1024 < 500
if (!size) {
this.$message.error('上传图片大小不能超过 500KB!')
}
return size
},
//http-request的钩子
ImageRequest (file) {
console.log("屏蔽默认上传")
this.formData.append('image[]', file.file)
},
//上传图片:上传到服务器
submitUpload() {
console.log("默认上传")
},
3、点击上传后
4、只响应了submitUpload方法,beforeImageUpload和ImageRequest都没响应,是什么问题呢?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不是应该点击获取文件嘛
submitUpload
里面漏了一句this.$refs.upload.submit();
,否则不会触发文件上传