vue+ springboot 实现本地文件上传快速示例（整流程代码）

vue布局

 <el-upload
            class="upload-demo"
            ref="upload"
            :show-file-list="showList"
            action="no"
            accept="image/jpeg,image/gif,image/png"
            
            :http-request="onChange"
            >
            <el-button size="small" type="primary">本地新增</el-button>
          </el-upload>

同页面下对应的 js 方法

import {
    
     addFromStranger } from "@/api/business/duty/feature";

 //本地上传input触发事件
    onChange(file) {
    
    
      console.log(file)

      let formData = new FormData()
      formData.append('file', file.file)
      formData.append('userId',this.$route.params.userId)
      console.log(formData)
      
      addFeature(formData).then(res => {
    
    
        console.log(res);
        this.msgSuccess("添加成功");
        this.getAllImg()
      })
    },

api
headers: { 'content-type': 'multipart/form-data' }会与 @RequestBody 冲突，不能用@RequestBody 接取数据

export function addFeature(data) {
    
    
  return request({
    
    
    url: '/duty/feature',
    method: 'post',
    data: data,
    headers: {
    
     'content-type': 'multipart/form-data' },
  })
}

SpringBoot 后端

@RestController
@RequestMapping("/duty/feature")
public class CcccCheckonworkFaceFeatureController extends BaseController
{
    
    
@PreAuthorize("@ss.hasPermi('system:feature:add')")
    @PostMapping()
    public AjaxResult add(@RequestParam("file") MultipartFile file, @RequestParam("userId") String userId){
    
    
        FaceFeatureDto faceFeatureDto = new FaceFeatureDto();
        faceFeatureDto.setUserId(Long.valueOf(userId));
        faceFeatureDto.setFile(file);
        return toAjax(ccccCheckonworkFaceFeatureService.insertCcccCheckonworkFaceFeature(faceFeatureDto));
    }