vue+elementui+springboot实现文件上传
2021/7/2 6:21:35
本文主要是介绍vue+elementui+springboot实现文件上传,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前端代码
elupload.vue文件
- 属性action是文件上传的地址,也就是平时我们调用的接口
- el-upload自带了一个submit方法是用来上传文件的
- 如果要自定义submit的话el-upload需要加上:http-request="submit"
<template> <el-form :model="form"> <el-form-item label="上传文件" :label-width="formLabelWidth"> <el-upload ref="uploadDemo" action="/api/elupload" :auto-upload="false" multiple :file-list="fileList"> <el-button size="small" type="primary">选择文件</el-button> </el-upload> </el-form-item> <el-form-item> <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button> <el-button size="small">取消</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formLabelWidth: '80px', form: { file: '' }, fileList: [] } }, methods: { uploadFile() { this.$refs.uploadDemo.submit() } // submit(params) { // 如果要自定义submit的话el-upload需要加上:http-request="submit" // console.log(params) // const form = new FormData() // form.append('xml', params.file) // this.$http.post('/elupload', form, { // headers: { // 'Content-Type': 'multipart/form-data' // } // }).then(() => { // this.$notify({ // title: '成功', // message: '导入成功', // type: 'success', // duration: 2000 // }) // }) // } } } </script>
vue.config.js文件用来代理跨域
- 这个demo的代理路径需要rewrite到根路径'/'
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:7070', secure: false, changeOrigin: true, pathRewrite: { '^/api': '/' } } } } }
后端代码
@RestController @CrossOrigin public class ElUpload { @Value("${filepath}") public String filePath; @RequestMapping("/elupload") public String elUpload(MultipartFile file){ String fileName = file.getOriginalFilename(); File dest = new File(filePath + fileName); try { file.transferTo(dest); return "上传成功"; } catch (IOException e) { e.printStackTrace(); } return "上传失败!"; } }
这篇关于vue+elementui+springboot实现文件上传的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现