vue+java文件上传前后端

前端

使用element ui的上传组件

<el-dialog title="上传文件" :visible="uploadDialog" :before-close="closeDialog">
        <el-upload :action="action" :http-request="modeUpload">
          <el-button size="small" type="primary">点击选择文件</el-button>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="importLoading" @click="imports">{{ importText }}</el-button>
          <el-button @click="uploadDialog = false">取 消</el-button>
        </div>
</el-dialog>

export default {
	data() {
    	return {
    		uploadDialog: false,
      		action: 'https://jsonplaceholder.typicode.com/posts/',
      		mode: {}
    	}
    },
    methods: {
    	modeUpload(item) {
      		this.mode = item.file
    	},
    	imports() {
      		const data = new window.FormData()
      		data.append('anewfile', this.mode)
      		data.append('cid', this.$route.query.cid)
      		this.axios.post('/api/step/imports', data, { headers: { 'Content-Type': 'multipart/form-data' }}).then((response) => {
        		if (response.data) {
          			this.$message({
            			message: '导入成功',
            			type: 'success'
          			})
        		} else {
          			this.$message.error('导入失败')
        		}
      		})
    	}
   	}
}

说明：

后端

@RequestMapping("/imports")//导入文件
    public boolean imports(@RequestParam("anewfile") MultipartFile files[], String cid) {
        try {
            String filename = files[0].getOriginalFilename();

后端可接收到文件参数

后端接口是原有项目提供的，开发了能适配这个接口的前端部分