vue+axios+java实现文件上传功能

 更新时间:2022年06月23日 10:11:02   作者:铁打的阿秀  
这篇文章主要为大家详细介绍了vue+axios+java实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下

背景

vue.js + axios + element前端,Java后台实现的文件上传,简单例子

前端代码

document.vue

<template>
  <div>
    <el-row class="action-row">
      <el-col :span="9">
        <el-button type="primary" icon="el-icon-plus" @click="add" size="medium">新增</el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-row>
      <el-table :data="docs" ref="docs" style="width: 100%" stripe @sort-change="sort" v-loading="loading">
        <el-table-column prop="docFileName" label="文件名称" sortable align="center" min-width="10%"></el-table-column>
        <el-table-column prop="docFileType" label="文件类型" sortable align="center" min-width="10%"></el-table-column>
        <el-table-column prop="createTime" label="上传时间" sortable align="center" min-width="10%"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="page"
          :page-size="limit"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
        ></el-pagination>
      </div>
    </el-row>
    
    <!-- 新建按钮弹出框 -->
    <el-dialog title="上传附件" :visible.sync="editvisible" :append-to-body="true" width="450px">
      <el-form :model="gtsDocument" :rules="rules" ref="gtsDocument" label-width="120px" label-position="left" size="small" class="edit-form">
        <el-form-item label="上传附件" prop="file">
          <el-upload ref="upload" action="doUpload" :limit="limitNum" :auto-upload="false" :on-change="fileChange" :on-exceed="exceedFile" :file-list="fileList">
            <el-button size="small" plain>选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editvisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, del, create } from "@/api/gts/document";

export default {
  name: "GtsDocument",
  data() {
    return {
      editvisible: false, // 新增弹出框显示标识:默认不显示
      gtsDocument: {
        // 随附单据表单
        docType: "",
        docNo: "",
        gtsId: "",
        taskId: "",
        file: ""
      },
      isupdate: false,
      limitNum: 1,
      fileList: [],
      docs: [],
      loading: false,
      page: 1,
      limit: 10,
      total: 0,
      rules: {},
    };
  },
  created: function() {
    this.search();
  },
  methods: {
    search() {
      // 初始化列表 
      list(this.page, this.limit, this.$route.query.gtsId).then(v => {
        if ("ok" == v.data.msg) {
          this.docs = v.data.rows;
          this.total = v.data.total;
        }
      });
    },
    // 新增按钮点击事件
    add() {
      this.editvisible = true;
      this.$nextTick(() => {
        this.isupdate = false;
        this.$refs.gtsDocument.resetFields();
      });
    },
    // 文件超出个数限制时的校验
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: this.$t("com.warning"),
        message: this.$t("com.onlySelect") + `${this.limitNum} ` + this.$t("com.someFile")
      });
    },
    // 文件状态改变时的事件
    fileChange(file, fileList) {
      this.gtsDocument.file = file.raw;
    },
    // 保存
    save() {
      this.$refs["gtsDocument"].validate(valid => {
        if (valid) {
          let formData = new FormData();
          let file = this.gtsDocument.file;
          formData.append("file", file);
          if (!file) {
            return this.$message.warning('请选择上传附件');
          }
          create(formData).then(resp => {
            if ("ok" == resp.data.msg) {
              this.editvisible = false;
              this.$message.success('数据保存成功');
              this.search();
              this.$refs.upload.clearFiles();
            } else {
              this.$message.error('保存失败');
            }
          });
        }
      });
    },
    handlePageChange(i) {
      this.page = i;
      this.search();
    },
    handleSizeChange(i) {
      this.limit = i;
      this.search();
    },
  }
};
</script>

<style rel="stylesheet/css">
.setting-form .el-form-item__label {
  padding-right: 30px;
}
</style>

document.js

import http from '@/utils/request'
import axios from 'axios'

export function create(formData) {
  return axios({
    url: 'http://localhost:8080/solvay-ecustoms//gts/documents/add',
    method: 'post',
    data: formData,
    withCredentials: true // cros with cookie
  })
}
export function list(page, limit, id) {
  return http.post('gts/documents', { page, limit, id })
}

后台代码

controller层

 /**
     * <p>Description: 附件上传</p>
     * @param file    上传附件
     * @return
     */
    @ResponseBody
    @PostMapping("/documents/add")
    public String addAttach(@RequestParam("file") MultipartFile file) throws IOException {
        // 获取文件名称
        String fileName = file.getOriginalFilename();
        if (StringUtils.isBlank(fileName)) {
            return jsonfailed("文件不能为空");
        }
        // 获取文件的大小
        long fileSize = file.getSize();
        if (fileSize > 10 * 1024 * 1024) {
            return jsonfailed("上传文件大小超出限定大小10M");
        }
        // 获取文件的扩展名
        // String extension = FilenameUtils.getExtension(fileName);
        // 获取配置路径
        String path = "D:/home/ecustoms/upload/";
        String newPath = path + UUID.randomUUID().toString().replaceAll("-", "") + "\\";
        File newDir = new File(newPath);
        if (!newDir.exists()) {
            newDir.mkdirs(); // 目录不存在的情况下,创建目录
        }
        File newFile = new File(newDir, fileName);
        //通过CommonsMultipartFile的方法直接写文件(注意这个时候)
        file.transferTo(newFile);
        return "ok";
 }

实现截图如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈vue限制文本框输入数字的正确姿势

    浅谈vue限制文本框输入数字的正确姿势

    这篇文章主要介绍了vue限制文本框输入数字的正确姿势,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能

    vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能

    这篇文章主要介绍了vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue 使用print-js 打印渲染不出来问题

    vue 使用print-js 打印渲染不出来问题

    这篇文章主要介绍了vue 使用print-js 打印渲染不出来问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3.0结合bootstrap创建多页面应用

    Vue3.0结合bootstrap创建多页面应用

    这篇文章主要介绍了Vue3.0结合bootstrap创建多页面应用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 一个手写的vue放大镜效果

    一个手写的vue放大镜效果

    这篇文章主要介绍了一个手写的vue放大镜,组件使用less,文中给出了示例代码,需要的朋友可以参考下
    2019-08-08
  • vue3 teleport的使用案例详解

    vue3 teleport的使用案例详解

    这篇文章主要介绍了vue3 teleport的使用demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • 如何使用Webstorm和Chrome来调试Vue项目

    如何使用Webstorm和Chrome来调试Vue项目

    这篇文章主要介绍了如何使用Webstorm和Chrome来调试Vue项目,对Vue感兴趣的同学,一定要看一下
    2021-05-05
  • Vue2 模板template的四种写法总结

    Vue2 模板template的四种写法总结

    下面小编就为大家分享一篇Vue2 模板template的四种写法总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • AntV F2和vue-cli构建移动端可视化视图过程详解

    AntV F2和vue-cli构建移动端可视化视图过程详解

    这篇文章主要介绍了AntV F2和vue-cli构建移动端可视化视图过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • vue如何动态修改$router参数

    vue如何动态修改$router参数

    这篇文章主要介绍了vue如何动态修改$router参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论