el-upload上传多张图片
时间: 2023-08-14 15:13:57 浏览: 171
用element的upload组件实现多图片上传和压缩的示例代码
要使用`el-upload`组件上传多张图片,您可以使用`multiple`属性并将其设置为`true`。这将允许用户选择并上传多个文件。
以下是一个示例代码,演示如何使用`el-upload`上传多张图片:
```html
<template>
<el-upload
action="/upload"
:multiple="true"
:on-success="handleUploadSuccess"
:on-remove="handleRemove"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
// 上传成功的回调函数
console.log(response, file, fileList);
},
handleRemove(file, fileList) {
// 移除文件的回调函数
console.log(file, fileList);
}
}
}
</script>
```
在上面的示例中,我们设置了`action`属性为`/upload`,这是文件上传的接口地址。通过设置`:multiple="true"`,我们允许用户选择多个文件进行上传。在成功上传后,会触发`handleUploadSuccess`方法,并将响应、当前上传的文件和文件列表作为参数传递给该方法。同样地,当用户移除某个文件时,会触发`handleRemove`方法,并将被移除的文件和更新后的文件列表作为参数传递给该方法。
您可以根据您的需求修改上传的接口地址和回调函数的逻辑。希望这可以帮助到您!如果您还有其他问题,请随时提问。
阅读全文