williamhuanguk

[williamhuanguk]

Post Form Data With Axios in Vue

in the vue file the methods is below:

function() { run().catch(err => console.log(err)); async function run() {   const blob = await fetch(imgDataUrl).then(res => res.blob());   const formData = new FormData();   formData.append('png', blob);

  // Post the form, just make sure to set the 'Content-Type' header   const res = await axios.post('/api/upload/png', formData, {     headers: {       'Content-Type': 'multipart/form-data'     }   });   console.log(res.data); } }

you must import axios before the vue:

var axios = require('axios')

in the java backend:(/api will be rewrite in vue.config.js)

@PostMapping("/upload/png") @ResponseBody public Result pngUpload(HttpServletRequest request) { MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request; MultipartFile mulFile = multipartHttpServletRequest.getFile("png"); System.out.println("png file:" + mulFile);

// get file name String fileName = mulFile.getOriginalFilename();

[williamhuanguk]

VUE4 Import CSS From node_modules in One Vue

The notation \@import "../../../node_modules/xx" is deprecated, the correct notation is \@import "xx";

You can see simple exemple of generated vue project with external bulma and buefy css import there : https://github.com/vuejs-templates/webpack