Vue多个图片同时上传到SpringBoot

Vue多个图片同时上传到SpringBoot

先睹为快

vue页面程序

 

  

    
      
    
  
  

    
            
                取 消
                下一步
            
    
  

 

  export default {
    data() {
      return {
        formPicsData: "",
        multiple: true,
      }
    },
    methods: {
      uploadFile(file) {
        this.formPicsData.append('file', file.file);
      },
      addSomePeoplePicsForm: function () {
        let self = this;
        this.formPicsData = new FormData();
        this.$refs.uploadPic.submit();
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        //this.$ajax.post这个地方需要在main.js进行简单配置
        this.$ajax.post("/uploadPics", this.formPicsData, config).then(res => {
            //TODO：具体自己逻辑部分
        }).catch(res => {
          this.$message.info("服务器走丢了!");
        });
      },
    }
  }

main.js配置

 

import axios from 'axios'
Vue.prototype.$ajax = axios

SpringBoot接收

 

@ResponseBody
@RequestMapping("/uploadPics")
public void uploadPics(HttpServletRequest request,
                         @RequestParam("file") MultipartFile[] file) {
    if (file != null && file.length > 0) {
        for (MultipartFile temp : file) {
            //将文件先保存下来
            try{
                temp.transferTo(new File(目录路径+ temp.getOriginalFilename()));
                //TODO：自己后续的处理
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}