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

实现截图如下

来源：https://blog.csdn.net/zcxbd/article/details/89404600