Vue多个图片同时上传到SpringBoot

骑猪看日落 2022-01-22 10:25 485阅读 0赞

# Vue多个图片同时上传到SpringBoot #

### 先睹为快 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70]: /images/20220122/74e425209c8d4ecdbfe27835df3605ad.png