vue 前端传图片文件，后端接收

---

vue端

1、在 main.js 文件中添加

const upload = axios.create({
  //这里配置你自己的url
  baseURL: 'http://localhost:8096/reconciliation/',
  timeout: 50000,
});
Vue.prototype.$upload = upload;

2、在需要上传文件的vue文件中

uploadImg(file){
    var _this = this;
    var formData = new FormData();
    formData.append("file", file.raw);
    _this.$upload.post("file/upload", formData)
        .then(res => {
            _this.$message(res.data.userInfo, 'success');
        }).catch(data=>{
            console.log(data);
        })
}

3、在后台controller中

@RestController
@RequestMapping("file")
public class FileDataController {
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
        // 将图片转为base64
        BASE64Encoder encoder = new BASE64Encoder();
        String imgData = encoder.encode(file.getBytes());
        String url = null;
        //这里要进行的图片操作
        return url1;
    }
}