element-plus拖拽上传
时间: 2023-08-06 09:04:26 浏览: 344
拖拽上传文件
对于element-plus的拖拽上传,你可以使用el-upload组件来实现。下面是一个简单的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/your-upload-url"
:drag="true"
:multiple="true"
:on-success="handleUploadSuccess"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
// 上传成功的回调函数
console.log(response);
},
},
}
</script>
<style>
.upload-demo {
border: 1px dashed #409eff;
border-radius: 6px;
padding: 20px;
text-align: center;
color: #999;
}
.upload-demo em {
color: #f90;
}
</style>
```
在上面的示例中,`el-upload`组件被设置为可拖拽(`drag`属性为true),并且可以同时上传多个文件(`multiple`属性为true)。上传成功后,会调用`handleUploadSuccess`方法进行处理。
你需要将`action`属性设置为你的上传接口的URL。在`handleUploadSuccess`方法中,你可以处理上传成功后的响应(`response`参数),例如显示成功消息或者更新文件列表等。
请根据你的具体需求进行适当的修改。希望这能帮到你!如果有任何其他问题,请随时提问。
阅读全文