element-ui 中手动上传文件

最新推荐文章于 2025-03-17 09:52:17 发布

xiaoShengSanYue

最新推荐文章于 2025-03-17 09:52:17 发布

阅读量997

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Element-UI Vue 文章标签： vue.js element-ui 手动上传文件

本文链接：https://blog.csdn.net/yehuaner33/article/details/120017353

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

Element-UI

3 篇文章

订阅专栏

这篇博客介绍了如何利用Vue.js结合Element UI库的<el-upload>组件实现文件上传功能。通过设置`auto-upload=false`和`http-request`属性，可以自定义上传逻辑。点击上传按钮时，调用`this.$refs.upload.submit()`触发上传，并在`uploadWord`方法中处理上传参数，例如打印文件信息。这为开发者提供了灵活的文件上传控制方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    代码如下<el-upload ref="upload" :auto-upload="false" :http-request="uploadWord">
	<el-button size="small" type="primary">选择文件</el-button>
</el-upload>

<el-button size="small" type="primary" @click='upload'>点击上传</el-button>

其中 http-request 中写具体的上传逻辑, 而该方法具体执行是放在 upload 的点击事件中methods:{
	upload() {
		// 其中 upload 对应的是上传组件中的 ref 的值, submit() 是固定的
		this.$refs.upload.submit()
	},
	uploadWord(params) {
		console.log(params.file)
		...
	}
}