vue+axios+java實(shí)現(xiàn)文件上傳功能

更新時(shí)間：2022年06月23日 10:11:02 作者：鐵打的阿秀

這篇文章主要為大家詳細(xì)介紹了vue+axios+java實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+axios+java實(shí)現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

背景

vue.js + axios + element前端，Java后臺(tái)實(shí)現(xiàn)的文件上傳，簡(jiǎn)單例子

前端代碼

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="上傳時(shí)間" 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, // 新增彈出框顯示標(biāo)識(shí)：默認(rèn)不顯示
? ? ? gtsDocument: {
? ? ? ? // 隨附單據(jù)表單
? ? ? ? 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;
? ? ? ? }
? ? ? });
? ? },
? ? // 新增按鈕點(diǎn)擊事件
? ? add() {
? ? ? this.editvisible = true;
? ? ? this.$nextTick(() => {
? ? ? ? this.isupdate = false;
? ? ? ? this.$refs.gtsDocument.resetFields();
? ? ? });
? ? },
? ? // 文件超出個(gè)數(shù)限制時(shí)的校驗(yàn)
? ? exceedFile(files, fileList) {
? ? ? this.$notify.warning({
? ? ? ? title: this.$t("com.warning"),
? ? ? ? message: this.$t("com.onlySelect") + `${this.limitNum} ` + this.$t("com.someFile")
? ? ? });
? ? },
? ? // 文件狀態(tài)改變時(shí)的事件
? ? 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('請(qǐng)選擇上傳附件');
? ? ? ? ? }
? ? ? ? ? create(formData).then(resp => {
? ? ? ? ? ? if ("ok" == resp.data.msg) {
? ? ? ? ? ? ? this.editvisible = false;
? ? ? ? ? ? ? this.$message.success('數(shù)據(jù)保存成功');
? ? ? ? ? ? ? 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 })
}

后臺(tái)代碼

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");
? ? ? ? }
? ? ? ? // 獲取文件的擴(kuò)展名
? ? ? ? // 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(); // 目錄不存在的情況下，創(chuàng)建目錄
? ? ? ? }
? ? ? ? File newFile = new File(newDir, fileName);
? ? ? ? //通過(guò)CommonsMultipartFile的方法直接寫文件（注意這個(gè)時(shí)候）
? ? ? ? file.transferTo(newFile);
? ? ? ? return "ok";
?}

實(shí)現(xiàn)截圖如下