Vue多个图片同时上传到SpringBoot

Vue多个图片同时上传到SpringBoot

先睹为快

vue页面程序

 

  <div>
    <el-upload
      :multiple="multiple"
      action="/uploadPics"
      list-type="picture-card"
      :auto-upload="false"
      :http-request="uploadFile"
      ref="uploadPic"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
  <div>
    <center>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddSomePicsInfo = false">取 消</el-button>
                <el-button type="primary" @click="addSomePeoplePicsForm">下一步</el-button>
            </span>
    </center>
  </div>

 

  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();
            }
        }
    }
}