【Vue】vue element 上传组件进行多文件上传时，before-upload和http-request没有响应？

Z时代
2024-01-10
分类：技术分享

在使用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("默认上传")},