源码搜藏网

因为我是vue+springboot前后分离，要跨域，就不能用默认的action写请求地址，我用axios时最困扰的就是怎么拿到那个真实的文件，然后给传给后台。

其实可以通过自带的onchanne触发方法获得文件列表，文件信息中那个raw就是真实的文件。

写的时候，刚开始我是直接把el-upload里面的button中加了点击事件，但是每次文件还没选，就已经向后台发出请求了，当然传不过去，于是外面套了个form。

element-ui组件使用可以查看文档

upload.vue

<template>
  <el-form>
   
    <el-form-item label="姓名" prop="name">
      <el-input v-model="name"></el-input>
    </el-form-item>
   
    <el-form-item>
      <el-upload ref="upfile"
        style="display: inline"
        :auto-upload="false"
        :on-change="handleChange"
        :file-list="fileList"
        action="#">
        <el-button type="success">选择文件</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="upload">点击上传</el-button>
    </el-form-item>
  </el-form>
 
</template>
<script>
export default {
  name:'UploadUi',
  data(){
    return{
      name:'',
      fileList:[]
    }
  },
  methods:{
    //通过onchanne触发方法获得文件列表
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(fileList)
    },
    upload(){
     
      let fd = new FormData();
      fd.append("name",this.name);
      this.fileList.forEach(item=>{
        //文件信息中raw才是真的文件
        fd.append("files",item.raw);
        //console.log(item.raw)
      })
      this.$axios.post('/uploadUi',fd).then(res=>{
        if (res.data.code === 200) {
          //console.log(res);
          this.$message('上传成功')
        }else{
          this.$message('失败')
        }
      })
    },
  }
}
</script>

springboot后台 uploadController.java

package com.example.demo.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.example.demo.entity.ListParam;
import com.example.demo.entity.MyUser;
import com.example.demo.entity.Result;

@RestController
@ResponseBody
@CrossOrigin
@RequestMapping("/api")
public class UploadController {
 
 @PostMapping("/uploadUi")
 public Result upFile(@RequestParam("name")String name,@RequestParam("files") MultipartFile[] files ) {
   System.out.println("开始");
   System.out.println(name);
   if(files != null) {
    for(MultipartFile file : files) {
    String fileName = file.getOriginalFilename();
    System.out.println(fileName);
    try{
     File mkdir = new File("F:\\app\\file");
     if(!mkdir.exists()) {
      mkdir.mkdirs();
     }
     //定义输出流，将文件写入硬盘
      FileOutputStream os = new FileOutputStream(mkdir.getPath()+"\\"+fileName);
       InputStream in = file.getInputStream();
       int b = 0;
       while((b=in.read())!=-1){ //读取文件
        os.write(b);
       }
       os.flush(); //关闭流
       in.close();
       os.close();
       
    }catch(Exception e) {
     e.printStackTrace();
     return new Result(401,"失败");
    }
   }
    return new Result(200,"成功");
   }else {
    return new Result(401,"文件找不到");
   }
  
 }
 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。