下面是用springboot实现的一个简单文件上传例子
1.文件上传是使用@RequestPart注解,和MultipartFile类来接受,MultipartFile类中有很多属性供我们使用。话不多说先创建一个Controller

/**
 * @Author zxm
 * @Date 2022/01/07 10:24
 */
@Controller
@RequestMapping("/count")
public class ContextController {

    /*上传文件的接口*/
    @PostMapping("/uplode")
    @ResponseBody
    public String getUplode(@RequestPart("one") MultipartFile mf,
                            @RequestPart("any") MultipartFile[] mfs) throws IOException {

        System.out.println("单文件上传信息为:"+mf.getOriginalFilename());
        System.out.println("多文件个数:"+mfs.length);
        for (MultipartFile m:mfs){
            System.out.println("多文件信息:文件名称:"+m.getOriginalFilename()+",文件大小:"+m.getSize()/1000+"kb");
        }

        /*将文件上传到指定文件夹*/
        if (!mf.isEmpty()){
            String fileName=mf.getOriginalFilename();
            //文件上传
            mf.transferTo(new File("E:\\"+fileName));
        }

        if (mfs.length>0){
            for (MultipartFile m: mfs) {
                m.transferTo(new File("E:\\"+m.getOriginalFilename()));
            }
        }
        return "成功";
    }
}

2.然后创建一个前端代码测试,如果需要多文件的话,给input标签添加multiple属性就表示这是个多文件的input。然后在from里面加enctype=“multipart/form-data” 表示这个请求有多文件请求。

<!--
多文件请求:enctype="multipart/form-data"
多文件:multiple
-->
<form action="/count/uplode" method="post" enctype="multipart/form-data" >
    <input type="file" value="上传单个文件" name="one" ><p>
    <input type="file" value="上传多个文件" name="any"  multiple><p>
    <input type="submit" value="提交" >
</form>

在这里基本上就可以上传文件了,但是相信有很多同学在这会一直报错,这是因为上传的文件太大或者文件太多导致的,遇到这样的请款只需要到配置文件里面加入相应的配置即可。

用elementui:

 <el-col :span="24">
                <el-form-item label="相关附件" prop="files">                 
                  <el-upload class="upload-demo" ref="upload" action="/api/blade-examine/upload" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">选择确认好后再上传</div>
                  </el-upload>
                </el-form-item>
              </el-col>

方法:

 submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },