axios 上传文件_Spring Boot + Vue前后端分离实现图片上传功能

点击上方 web项目开发，选择 设为星标

优质文章，及时送达

效果图

前端页面

上传第一张图片

上传第二张图片

提示：图片直接上传保存到本地。

环境介绍

前端：vue

后端：springboot

完整源码获取

扫码关注回复【图片上传】获取源码

如果你在运行这个代码的过程中有遇到问题，请加小编微信xxf960513，我拉你进对应微信学习群！！帮助你快速掌握这个功能代码！

核心代码介绍

pox.xml

          <dependency>            <groupId>org.slf4jgroupId>            <artifactId>slf4j-apiartifactId>            <version>1.7.25version>        dependency>        <dependency>            <groupId>org.slf4jgroupId>            <artifactId>slf4j-simpleartifactId>            <version>1.7.25version>            <scope>compilescope>        dependency>

ImageController.java

package com.example.demo.controller;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import com.alibaba.fastjson.JSON;@RestController@RequestMapping("/fileUpload")public class ImageController {  private static final String imagePath = "/root/images";  @RequestMapping(value = "/uploadImage")  public void uploadImage(@RequestParam MultipartFile file, HttpServletRequest request,      HttpServletResponse response) {    Map result = new HashMap();    try {      String name = file.getName();      SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");      String format = sdf.format(new Date());      String fileName = file.getOriginalFilename();      String path = imagePath + File.separator + fileName;      File storeImage = new File(path);      if (!storeImage.exists()) {        storeImage.mkdirs();      }      file.transferTo(storeImage);      result.put("status", "0");      result.put("msg", "上传成功");      result.put("fileName", fileName);      result.put("path", path);    } catch (Exception e) {      result.put("status", "1");      result.put("msg", "上传失败");    }    String json = JSON.toJSONString(result);    PrintWriter writer = null;    try {      response.setHeader("Content-type", "application/json;charset=UTF-8");      writer = response.getWriter();      writer.write(json);    } catch (IOException e) {      e.printStackTrace();    } finally {      if (null != writer) {        writer.close();      }    }  }}

main.js

import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);import $ from 'jquery'axios.defaults.baseURL = 'http://127.0.0.1:8080';Vue.prototype.HOST='/email'Vue.config.productionTip = falseVue.prototype.$axios = axios/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: ''})

Helloworld.vue

<template>   <div>     <el-upload       class="upload-demo"       action="http://127.0.0.1:8003/fileUpload/uploadImage"       :on-preview="handlePreview"       :on-remove="handleRemove"       :file-list="fileList"       list-type="picture">       <el-button type="primary" round>点击上传el-button>       <div slot="tip" class="el-upload__tip" style="color:#fff;">只能上传jpg/png文件，且不超过500kbdiv>     el-upload>   div>template><script>import {  quillEditor} from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'export default {  data() {    return {      fileList: []    };  },  methods: {    handleRemove(file, fileList) {      console.log(file, fileList);    },    handlePreview(file) {      console.log(file);    },    uploadFile(){      console.log(this.fileList);    }  }}script>

--完--

如果你觉得这个案例以及我们的分享思路不错，对你有帮助，请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦！

推荐案例

1、springboot+mybatis+vue前后端分离实现用户登陆注册功能

2、SpringBoot+Vue前后分离实现邮件发送功能

3、SpringBoot+Spring Data JPA+Vue前后端分离实现分页功能

4、SpringBoot+Spring Data JPA+Vue前后端分离实现Excel导出功能

温暖提示

为了方便大家更好的学习，本公众号经常分享一些完整的单个功能案例代码给大家去练习，如果本公众号没有你要学习的功能案例，你可以联系小编(微信：xxf960513)提供你的小需求给我，我安排我们这边的开发团队免费帮你完成你的案例。注意：只能提单个功能的需求不能要求功能太多，比如要求用什么技术，有几个页面，页面要求怎么样？