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

1024问 2022-06-23 14:20:25 阅读数:933

javavueaxios实现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"; }

实现截图如下


版权声明:本文为[1024问]所创,转载请带上原文链接,感谢。 https://www.mscto.com/q/163894692348428288