vue axios 多图片上传之前端及springBoot接口param篇

结合了好多资料（查百度）终于把自己的需求 “拼” 好了。（注：全栈小白，养成中...）

需求：不仅要传多个图片，还要额外携带好多个属性参数，用这些属性实现别的逻辑。

首先，上前端代码！（耐心看逻辑，想简单直接拿是不中滴！）

          const data = {  // 额外的一堆参数param
            token: this.token,
            uuid: this.userId,
            proName: this.form.proName,
            proTypeId: this.form.proTypeId,
            price: this.form.price,
            maxBatch: this.form.maxBatch,
            shopName: this.form.shopName,
            address: this.form.address
          };
          
          let fd = new FormData();
          for(let i in data) {
            fd.append(i, data[i]);
          }
          // el-upload的fileList，这个不用多说（想办法把多个图片装在fileList里）
          this.fileList.forEach( file => {
            fd.append('file', file.raw);
          })

          this.$http({  // this.$http <==相当于==> this.axios
            method: "POST",
            url: this.$url.addProDetail,  // 接口放这里
            headers: {
              'Content-Type': "multipart/form-data",
            },
            data: fd,
            params: fd
          }).then(res => {
            console.log(res);
          });

然后，上后端接口（本篇主要说明前端怎么给后端图片文件及多个参数）

    @PostMapping("/addPro")
    public Response addPro(@RequestParam MultipartFile[] file, ParamQO param) {
        return productService.addPro(file, param);
    }

本人遇到的难点：

                由于对参数接收的注解，理解不是很深，所以之前我把QO加上了@RequestParam，这时候就很矛盾了，既要传一堆参数，还要 - - 对应，我总不能写上一堆参数列表吧（直接挠头！）

不过好在理解了，参数的接收，用对象接收就解决了！

最后结果，上图！

 一堆参数成功到手！（东西到手，啥都好说！拿着想要的参数使劲琢磨吧）

// 因为咱也要继续琢磨咋上传了。