vueフロントエンドは画像ファイルを転送し、バックエンドは受信する。

1099 ワード

vue端
1、メール.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;
    }
}