java form怎么传递给map参数 java发送form表单

首先先从java接口开始
RandomStringUtils.randomAlphanumeric(10) 就是使用了第三方随机生成的字符串 然后在加上系统生成的时间戳

@PostMapping("/addFileImg")
    public R addFile(@RequestParam("file") MultipartFile file) {
        try {
            /*上传文件位置*/
            String filePath = "/Users/";
            /*获取上传文件名*/
            String fileName = file.getOriginalFilename();
            System.out.println(fileName);
            System.out.println(fileName.substring(fileName.lastIndexOf(".")));
            /*获取上传文件并进行随机起名*/
            fileName = RandomStringUtils.randomAlphanumeric(10) + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
            ;
            File file1 = new File(filePath + fileName);
            file.transferTo(file1);
            return R.success("/file/" + fileName);
        } catch (Exception e) {
            return R.status(false);
        }
    }

上传文件成功后肯定需要对上传的文件的映射 在yml 里添加

spring:
  mvc:
#    映射路径
    static-path-pattern: /file/**
#    物理路径
  resources:
    static-locations: file:C:/Users/

我们可以通过postman来进行测试一下

然后我们得到了文件的的访问路径这个时候我们的都可以访问到。

下面就是vue的上传方式，因为如果每次点击都要上传的话，会浪费掉服务器资源

<!--
       :auto-upload="false" 关闭自动上传
      :on-change="addFileSuccess" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
-->
          <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :file-list="fileList"
            :on-change="addFileSuccess"
          >
            <el-button>上传文件</el-button>
          </el-upload>

addFileSuccess(file, fileLists) {
      console.log("amdyes")
      console.log(fileLists);
      /*获取文件的集合*/
      this.contractEnclosure = fileLists;
    },

这个时候我们看一下他获取到的数据

这些数据具体是啥我也不太清楚因为我也是接触vue没有多久 这个数据结构他已经很明显我们获取他的raw属性就可以

在点击确定的时候执行这个方法

onSubmit(e) {
      /*创建一个formData对象*/
      let formData = new FormData();
      /*this.contractEnclosure[0].raw 这个因为我获取的是集合 获取他的第一个的raw属性
      *给formDate进行添加 类似与java map.put(key,value) 如果后面还要其他参数可以不断的添加*/
      formData.append("file", this.contractEnclosure[0].raw);
      /*给formDate这个就是根据file key值进行赋值  */
      /*formData.set("file", this.contractEnclosure[0].raw);*/
      /*formData.get("file") 根据key值获取对应的value*/
      console.log(formData.get("file"));
      console.log(this.contractEnclosure[0].raw);
      addFiles(formData).then(req => {
        this.addFrom.contractEnclosure = req.msg;

      })

下面就是api 接口因为这个应该算第二次封装 他axios默认的差不多

let urlDate = "/addFileImg";

/*上传文件*/
export function addFiles(data) {

  return request({
    url: urlDate,
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data;charset=utf-8'
    },
    data
  },)
}

这边一定要主义以下的
headers: {
‘Content-Type’: ‘multipart/form-data;charset=utf-8’
}
一般的要使用这种请求头
data
传数据 不要加
params: {
file: data
}
data:data
着一类 要不会错误一种是请求头过多因为当时忘记截图了一般加上这个
错误里面有这个 Current request is not a multipart request

如果出现不断重复类似于这种

这种问题我第一次看都在怀疑人生 游览器上只显示掉用了一次但是实际上调用了两次因为他是404 如果他能正常访问的会调用第三次

那么就是两个原因造成的一个是我无意中测出来的把@Controller 这个换成 @RestController 或者在上传 文件上加这个 @RequestBody
如果不是那就路由问题这个是我百度下来的 可能是这个React-router BrowserRouter 路由 造成的因为重复的换一个接口民就可以具体可以看一下这个链接的http://www.bubuko.com/infodetail-3298021.html