VUE中使用el-upload上传文件

最新推荐文章于 2025-05-19 11:35:48 发布

原创最新推荐文章于 2025-05-19 11:35:48 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue

本文详细介绍了一种基于Element UI的文件上传组件实现方案，包括前端Vue.js代码配置与自定义上传方法，以及后端Java Spring框架下MultipartFile的接收处理方式。前端通过自定义的http-request属性调用uploadFile方法，将文件数据封装为FormData对象，利用axios发送POST请求到指定接口；后端通过@RequestParam注解接收上传文件，并进行初步处理。

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

一：前端代码

<el-upload
    action=""//上传文件的请求路径
    multiple
    :limit="2"
    :http-request="uploadFile"//自定义的方法，用于自定义文件上传处理
    >
         <el-button size="small" type="primary">选择文件上传</el-button>
         <span class="fc-red">
         		{{'请上传桌面上的'+fileName+'.jpg图片和'+fileName+'.dwg文件'}}
         </span>
</el-upload>

二：js方法

uploadFile(file){
    var formData = new FormData();
    formData.append('file', file.file);
    // api.updateFile(formData)
    axios.post(`/extBspServer/cad/upload`,formData);
}

三：java后端controller层接收代码

	@RequestMapping("/upload")
	@ResponseBody
	public boolean dwgUpload(@RequestParam("file") MultipartFile file) {
		System.out.println(file);
		return true;
	}