Vue实现附件上传功能

时间：2025-03-10 11:11:13

当前记录的都是在工作中自己遇到的问题，记录下来是希望再次遇到时，可以直接应用，不需要花费很多的时间查找资料，当然，以下的方法大部分都是参照网上已有的资源，只是略作整合，引用时根据自己的实际情况做一下扩展。

vue前端，上传按钮--> 上传选择对话框js

<el-button
  size="mini"
  type="text"
  icon="el-icon-document-add"
  @click="handleUpload()"
>上传
</el-button>

<el-dialog :title="Title" :="open" width="600px" append-to-body
           :close-on-click-modal=false>
  <el-upload
    ref="upload"
    :limit="1"
    :on-remove="handleRemove"
    :on-error="onError"
    :file-list="fileList"
    :auto-upload="false"
    :http-request="uploadFile"
    action="/posts/"
    class="upload-demo">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">支持上传 {{ strRebuild(fileType) }} 格式，且不超过 {{ fileSize }}M</div>
  </el-upload>
</el-dialog>

js代码

import { lastSubstring, strRebuild } from '@/utils/strUtil'
import { message } from '@/utils/message'

export default {
  data() {
    return {
      title: '',
      open: false,
      // 附件列表
     fileList: [],
    // 允许的文件类型,可依据实际需求增加格式
    // fileType: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt', 'jpg', 'png', 'jpeg', 'zip'],
   fileType: ['pdf', 'doc', 'zip'],
   // 运行上传文件大小，单位 M
   fileSize: 10,
}
},
methods{
handleUpload() {
   = 'XXXX'
   = true
},
// 清空表单
clear() {
  // 清空附件
  this.$()
},

// 附件检查
// 检查附件是否属于可上传类型
// 检查附件是否超过限制大小
checkFile() {
  var flag = true
  var tip = ''
  var files = this.$
  (item => {
    // 文件过大
    if ( >  * 1024 * 1024) {
      flag = false
      tip = ' 文件超过' +  + 'M'
    }

    // 文件类型不属于可上传的类型
    if (!(lastSubstring(, '.'))) {
      flag = false
      tip = ' 文件类型不可上传'
       = false
    }
  })

  if (!flag) {
    message('error', tip)
  }
  return flag
},

// 提交附件
submitUpload() {
  if (()) {
    ('上传附件...')
    this.$()
  } else {
    ('取消上传')
  }
},

// 自定义文件上传方法
uploadFile(file) {
  // 把文件放入 FormData 进行提交
  const name = 'XXXX'
  const param = new FormData()
  ('files', )
//传递其他信息
  ('name', name)
  uploadFile(param).then(response => {
    if ( === 200) {
       = false
      ('上传成功')
    } else {
      ('上传失败')
       = false
    }
  })
},

// 移除附件
handleRemove(file, fileList) {
  ('移除附件...')
},

// 附件上传失败，打印下失败原因
onError(err) {
  message('error', '附件上传失败')
  (err)
},

// 字符串重组
strRebuild(str) {
  return strRebuild(str)
}
},

工具类 JS

，创建js 文件

// 字符串相关工具类
// 数组根据分隔符重组为字符串
export function strRebuild(arr, split) {
  if (arr === undefined || arr === null || !(arr instanceof Array) ||  === 0) {
    return ''
  }

  if (split === undefined || split === null) {
    split = '，'
  }

  var str = ''
  ((v, i) => {
    if (i ===  - 1) {
      str = str + v
    } else {
      str = str + v + split
    }
  })
  return str
}

// 截取最后一个特定字符后面的字符串
export function lastSubstring(str, split) {
  if (str === undefined || str === null || split === undefined || split === null) {
    return ''
  }
  return ((split) + 1)
}

，创建js 文件

import { Message } from 'element-ui'

// 提示封装 type 提示类型， msg 提示信息，duration 持续时间
export function message(type, msg, duration) {
  Message({
    message: msg || 'success',
    type: type || 'success',
    duration: duration || 5 * 1000
  })
}

// 带删除键提示，duration 为 0 时，不会自动消失
// 提示封装 type 提示类型， msg 提示信息，duration 持续时间
export function messageShowClose(type, msg, duration) {
  Message({
    message: msg || 'success',
    type: type || 'success',
    duration: duration || 0,
    showClose: true
  })
}

API，接口的具体地址按实际情况来填写，内容可以不变，因为vue传的是param = new FormData()数据，所以在这里只要一个参数就可以了

export function uploadFile(file) {
  return request({
    url: '/uploadFile',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data; charset=utf-8'
    },
    data:file,
  })
}

后端接口

很多人参照网上的方法都会提示 (dest) 这个错误，对这个错误我也不过多的解释，有兴趣的可以自己查阅，我以下代码给出最终的解决方案。

自定义保存路径

private String destfileDir = ".XXXXXX/XXX/XXX";//（根据实际情况而定）

/**
     * 上传客户端文件并保存
     * @param
     * @return
     */
    @PostMapping(value = "/uploadFile")
    public AjaxResult uploadFile(@RequestParam("files") MultipartFile[] files, @RequestParam("name") String name) {
        // 先设定一个放置上传文件的文件夹(该文件夹可以不存在，下面会判断创建)
        TCertmanagerinfo tCertmanagerinfo = new TCertmanagerinfo();
        for (MultipartFile file : files) {
            // 判断文件是否有内容
            if (()) {
                ("该文件无任何内容!!!");
            }
            // 获取附件原名(有的浏览器如chrome获取到的是最基本的含 后缀的文件名,如)
            // 获取附件原名(有的浏览器如ie获取到的是含整个路径的含后缀的文件名，如C:\\Users\\images\\)
            String fileName = ();
            // 如果是获取的含有路径的文件名，那么截取掉多余的，只剩下文件名和后缀名
            if (("\\") > 0) {
                int index = ("\\");
                fileName = (index + 1);
            }
            // 判断单个文件大于1M
            long fileSize = ();
            if (fileSize > 1024 * 1024) {
                ("文件大小为(单位字节):" + fileSize);
                ("该文件大于1M");
            }
            // 当文件有后缀名时 自定义文件名name
            if ((".") >= 0) {
                // split()中放正则表达式; 转义字符"\\."代表 "."
                String[] fileNameSplitArray = ("\\.");
                // 加上random戳,防止附件重名覆盖原文件
//                fileName = fileNameSplitArray[0] + (int) (() * 100000) + "." + fileNameSplitArray[1];
                fileName = name+ "." + fileNameSplitArray[1];
            }
            // 当文件无后缀名时(如C盘下的hosts文件就没有后缀名)
            if ((".") < 0) {
                // 加上random戳,防止附件重名覆盖原文件
                fileName = name;
            }

            // 根据文件的全路径名字(含路径、后缀),new一个File对象dest
            File dest = new File(new File(destfileDir).getAbsolutePath() + "/" + fileName);
            // 如果pathAll路径不存在，则创建相关该路径涉及的文件夹;
            if (!().exists()) {
                ().mkdirs();
            }
            try {
                // 将获取到的附件file,transferTo写入到指定的位置(即:创建dest时，指定的路径)
                (dest);
            } catch (IllegalStateException | IOException e) {
                ();
            }
        }
        return ();
    }

这样上传附件功能就实现了，更多的操作可以依据实际情况添加自己的业务。

相关文章