文件上传

前端

        <template>
          <div>
            <!-- 选择要上传的文件 -->
            <input type="file" ref="uploadInput">
            <!-- 点击按钮触发文件上传事件 -->
            <button @click="handleUpload">上传</button>
          </div>
        </template>
         
        <script>
        import axios from 'axios';
         
        export default {
          methods: {
            handleUpload() {
              // 获取到选择的文件对象
              const file = this.$refs.uploadInput.files[0];
              if (file) {
                // 创建 FormData 对象并将文件添加到其中
                let formData = new FormData();
                formData.append('file1', file);
                // 发送 POST 请求，将文件数据作为表单数据提交
                axios.post('http://localhost:8082/springmvcstudy/upload', formData).then(response => {
                  console.log(res);
                  // 这里可以根据服务器返回的结果进行相应操作
                }).catch(error => {
                  console.error('文件上传失败', error);
                });
              } else {
                console.warn('未选择任何文件');
              }
            }
          }
        }
        </script>

controller##

    @RestController
    public class UploadController {
        /* file1跟前台的name属性对应*/
        @PostMapping("upload")
        public String upload(MultipartFile file1){
            //获取原始文件名
            System.out.println(file1.getOriginalFilename());
            
            return "success";
        }
    
    }