当前位置：首页 > 建站教程 >

如何通过ajax实现文件上传(Vue实现附件上传的具体代码介绍)

GG网络技术分享 2025-03-18 16:14 10

如何通过ajax实现文件上传

大噶好，今天我们先简单的来了解一个非常实用的功能，通过ajax上传文件。

技能：vue + axios + servlet

视图

</div>

vue.js

var vue = new Vue({

el: \"#app\",

data:{

pimage:\"\"

}

methods:{

uploadPimage:function (event) {

//通过ajax 上传文件

var formData = new FormData();

formData.append(\"pimage\",event.target.files[0]);

axios({

url:\"${ pageContext.request.contextPath }/AdminProductServlet?method=uploadPimage\",

method: \'post\',

headers:{

\'Content-Type\': \'multipart/form-data\'

data:formData

}).then(function (resp) {

//将服务器的图片地址赋给 product.pimage

vue.pimage = resp.data;

})

}

})

</script>

核心的知识就是通过 FormData对象模拟一个form表单数据，我们知道表单提交必须设置表单属性enctype=\"multipart/form-data\"，并且提交方式为post。所以我们在通过axios提交数据时，需要设置请求头\'Content-Type\': \'multipart/form-data\'。

Servlet代码

public String uploadPimage(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

Part uploadPart = request.getPart(\"pimage\");

//获取文件名(来自于请求头 Content-Disposition: form-data; name=\"upload\"; filename=\"big.jpg\")

String contentDisposition = uploadPart.getHeader(\"Content-Disposition\");

int beginIndex = contentDisposition.indexOf(\"filename=\\\"\") + 10;

String fileName = contentDisposition.substring(beginIndex).replaceAll(\"\\\"\", \"\");

if (!fileName.isEmpty()) {

fileName = \"products/1/\" + UuidUtils.getUUID() + fileName;

String filePath = request.getServletContext().getRealPath(\"/\") + fileName;

//获取字节流

InputStream inputStream = uploadPart.getInputStream();

OutputStream outputStream = new FileOutputStream(filePath);

//保存文件

IOUtils.copy(inputStream, outputStream);

}

//向前端响应文件名

return fileName;

}

好，搞定。

Vue实现附件上传的具体代码介绍

前言

前端 UI 是用的是 element-ui 的上传功能

本文主要记录下代码，方便下次复制粘贴

前端部分

HTML

limit：限制文件个数 1 个

on-remove：移除附件时的钩子函数，主要就 console 输出下

on-error：用于处理上传异常后的处理，本人这主要用来关闭弹窗和全屏等待

file-list：绑定附件

auto-upload： 禁止自动上传，true的话选了文件就自动上传

http-request：自定义上传文件请求方法，默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题，我注释了 mock 还是那样，没具体研究

action：原上传文件的路径，由于使用了自定义上传文件请求，即http-request，因此这个字段随便写就好，不写不行好像

<el-upload

ref=\"upload\"

:limit=\"1\"

:on-remove=\"handleRemove\"

:on-error=\"onError\"

:file-list=\"fileList\"

:auto-upload=\"false\"

:http-request=\"uploadFile\"

action=\"https://jsonplaceholder.typicode.com/posts/\"

class=\"upload-demo\">

<el-button slot=\"trigger\" size=\"small\" type=\"primary\">选取文件</el-button>

<div slot=\"tip\" class=\"el-upload__tip\">支持上传 {{ strRebuild(fileType) }} 格式，且不超过 {{ fileSize }}M</div>

</el-upload>

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

import { message } from \'@/utils/message\'

export default {

data() {

return {

// 附件列表

fileList: [],

// 允许的文件类型

fileType: [\'xls\', \'xlsx\', \'pdf\', \'doc\', \'docx\', \'txt\', \'jpg\', \'png\', \'jpeg\'],

// 运行上传文件大小，单位 M

fileSize: 10,

}

methods: {

// 清空表单

clear() {

// 清空附件

this.$refs.upload.clearFiles()

// 附件检查

// 检查附件是否属于可上传类型

// 检查附件是否超过限制大小

checkFile() {

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(lastSubstring(item.name, \'.\'))) {

flag = false

tip = \' 文件类型不可上传\'

}

})

if (!flag) {

message(\'error\', tip)

}

return flag

// 提交附件

submitUpload() {

if (this.checkFile()) {

console.log(\'上传附件...\')

this.$refs.upload.submit()

} else {

console.log(\'取消上传\')

}

// 自定义文件上传方法

uploadFile(file) {

// 把文件放入 FormData 进行提交

const param = new FormData()

param.append(\'files\', file.file)

uploadFile(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实现附件上传的具体代码介绍 (https://www.wpmee.com/) javascript教程第1张

标签：

建站教程

如何通过ajax实现文件上传(Vue实现附件上传的具体代码介绍)