Springboot+Vue实现上传文件显示进度条效果功能

package com.example.demo.controller;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.springframework.beans.factory.annotation.Value;import org.springframework.web.bind.annotation.PostMapping;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 java.io.File;import java.io.IOException;import java.util.HashMap;import java.util.Map;@Api(description = "文件接口", tags = {"文件接口管理"})@RequestMapping("/file")@RestControllerpublic class FileController {    @Value("${file.path}")    private String PATH;    @ApiOperation(value = "文档操作", notes = "文档操作")    @PostMapping("/saveFile")    public Map saveFile(@RequestParam("file") MultipartFile file) {        Map map = new HashMap();        String originalFilename = file.getOriginalFilename();        File fileExist = new File(PATH);        if (!fileExist.exists()) {            fileExist.mkdirs();        }        try {            file.transferTo(new File(PATH + originalFilename));            map.put("code", "0000");            map.put("msg", "成功");        } catch (IOException e) {            e.printStackTrace();            map.put("code", "9999");            map.put("msg", "失败");        }        return map;    }}

package com.example.demo.config;
import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;//解决跨域问题@Configurationpublic class CrosConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("*")                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")                .allowCredentials(true)                .maxAge(3600)                .allowedHeaders("*");    }}

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'import store from './store'import router from './router'
import '@/icons' // iconimport '@/permission' // permission control
/** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online ! ! ! */if (process.env.NODE_ENV === 'production') {  const { mockXHR } = require('../mock')  mockXHR()}// set ElementUI lang to ENVue.use(ElementUI, { locale })// 如果想要中文版 element-ui，按如下方式声明// Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  store,  render: h => h(App)})

<template>  <div>    <div class="upload">      <h3>Web项目开发_上传文件+进度条显示h3>      <el-upload        class="upload-demo"        :action="uploadUrl"        :show-file-list="false"        :auto-upload="false"        ref="upload"        :on-success="handleSuccess"        :on-progress="uploadProcess"        :on-change="handleChange"      >        <el-button          type="primary"          class="video-btn"          slot="trigger"          size="small"        >          选取文件        el-button>        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件<i class="el-icon-upload el-icon--right">i>el-button>      el-upload>      <div class="file" v-if="fileName"><i class="el-icon-document">i> {{fileName}}div>      <el-progress        v-if="isPercentage"        class="progress"        :stroke-width="10"        :percentage="percentage"      >el-progress>    div>  div>template><script>export default {  props: {},  data() {    return {      uploadUrl: "http://139.159.147.237:9533/file/saveFile",      isPercentage: false, //是否显示进度条      percentage: 0,      fileName: ''    };  },  mounted() {},  methods: {    // 上传按钮    submitUpload() {      this.$refs.upload.submit();    },
    // 上传列表    handleChange(file, fileList) {      this.fileName = file.name;    },
    //进度条    uploadProcess(event, file, fileList) {      console.log(file.percentage)      this.isPercentage = true;      this.percentage = file.percentage.toFixed(0) * 1;    },
    //上传成功回调    handleSuccess(res, file) {      this.isPercentage = true;      this.percentage = file.percentage.toFixed(0) * 1;      if (res.code == "0000") {        this.$message("上传成功!");      } else {        this.$message.error("上传失败，请重新上传！");      }    }  }};script>
<style scoped lang="scss">.upload {  width: 350px;}
.progress {  margin-top: 20px;}
.file {  color: #606266;  font-size: 14px;  margin-top: 10px;}style>