在本文的示例中，Vue共享了用于实现附件上传的具体代码。 具体内容如下
前言
前端UI使用了element-ui的上传功能
本文主要记录代码，下次复制&； 方便粘贴
前端部分
HTML
limit :限制一个文件
on-remove :删除附件时的挂接函数主要在控制台输出中
on-error :用于上载异常后的处理。 本人主要用于关闭弹匣或全屏等待
文件-list :绑定附件
自动上传：禁止自动上传，如果为真，选择文件后自动上传
http-request :自定义文件上传请求的方式。 默认方法会导致mock和XML请求重新生成，从而导致找不到文件的问题。 虽然对mock发表了评论，但保持原样。 没有具体讨论
action :由于原始上传文件的路径使用自定义上传文件请求，即http-request，因此可以自由写入该字段，但似乎必须写入
ref='upload '
:limit='1'
:on-remove='handleRemove '
:on-error='onError '
:file-list='fileList '
:auto-upload='false '
:http-request='uploadFile '
action=' https://JSON placeholder.typ icode.com/posts/'
class='upload-demo '
选择文档
支持{{strrebuild(filetype ) }}格式的上传，{{ fileSize }}M JS以下
import { strRebuild，last substring } from ' @/utils/str util '
import { message } from ' @/utils/message '
导出默认值{
数据()。
返回{
//附件清单
文件列表： [ ]，
//允许的文件类型
fileType: ['xls '、' xlsx '、' pdf '、' doc '、' docx '、' txt '、' jpg '、' jpeg']，
//执行上传文件的大小，单位m
fileSize: 10，
}
(，
methods: {
//清空表单
clear ()。
//清空附件
this.$refs.upload.clearFiles (
(，
//附件检查
//检查附件是否为可上传类型
//检查附件是否超过限制大小
检查文件() }
var flag=true
var tip=' '
var files=this.$ refs.upload.uploadfiles
Files.Foreach(item={
//文件太大
if (item.size this.filesize * 1024 * 1024 ) ) }
flag=false
tip='文件超过了' this.fileSize 'M '
}
//文件类型不是可上传的类型
if (！ this.filetype.includes{
flag=false
tip='文件类型不可上传'
}
() )
if (！ flag ) {
消息(错误)、tip )。
}
返回标志
(，
//提交附件
提交上载
if(this.checkfile () ) ) )。
console.log ('上传附件.')
this.$refs.upload.submit (
} else {
console.log ('取消上传) )。
}
(，
//自定义文件上传方法
uploadfile(file ) {
//文件放入FormData提交
常数param=new formdata (
param.append('files '，file.file ) )。
上载
File(param).then(response => {// TODO 一些关闭弹框，上传成功提示等
})
},
// 移除附件
handleRemove(file, fileList) {
console.log('移除附件...')
},
// 附件上传失败，打印下失败原因
onError(err) {
message('error', '附件上传失败')
console.log(err)
},
// 字符串重组
strRebuild(str) {
return strRebuild(str)
}
}
}
工具类 JS
strUtil.js
// 字符串相关工具类
// 数组根据分隔符重组为字符串
export function strRebuild(arr, split) {
if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) {
return ''
}
if (split === undefined || split === null) {
split = '，'
}
var str = ''
arr.forEach((v, i) => {
if (i === arr.length - 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 str.substring(str.lastIndexOf(split) + 1)
}
message.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
// 附件上传
export function uploadFile(file) {
return request({
url: '/uploadFile',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data; charset=utf-8'
},
data: file
})
}
后端接口
/**
* 单文件上传
* @param files 接收文件要以数组接收
* @return
*/
@PostMapping(value="/uploadFile")
public void uploadFile(@RequestBody MultipartFile[] files) {
// TODO
}
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
本文标题: Vue实现附件上传功能
本文地址: http://www.cppcns.com/wangluo/javascript/314412.html