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";
 }

实现截图如下

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