【vue】框架之el-upload使用
2.upload.vue 页面<template><div class="app-container"><form id="upload" enctype="multipart/form-data" method="post">&
·
1.upload.vue 页面
<template>
<div class="app-container">
<form id="upload" enctype="multipart/form-data" method="post">
<el-upload
class="upload-demo"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:http-request="handlePost"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</form>
</div>
</template>
<
script
>
'use strict'
;
// import splitPane from 'vue-splitpane'
import
{
postUpload
}
from
'@/api/api'
// import waves from '@/directive/waves' // 水波纹指令
export
default
{
data
() {
return
{
fileList:
[
{
name:
'food.jpeg'
,
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},
{
name:
'food2.jpeg'
,
url:
'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
]
};
},
methods:
{
handleRemove
(
file
,
fileList
) {
console
.
log
(
file
,
fileList
);
},
handlePreview
(
file
) {
console
.
log
(
file
);
},
handleExceed
(
files
,
fileList
) {
this
.
$message
.
warning
(
`当前限制选择 3 个文件，本次选择了
${
files
.
length
}
个文件，共选择了
${
files
.
length
+
fileList
.
length
}
个文件`
);
},
beforeRemove
(
file
,
fileList
) {
return
this
.
$confirm
(
`确定移除
${
file
.
name
}
？`
);
},
handlePost
(
file
) {
// action="/docmanager/external/upload"
var
data
=
document
.
getElementById
(
'upload'
);
const
fd
=
new
window
.
FormData
(
data
)
fd
.
append
(
'categoryId'
,
1
)
fd
.
append
(
'tag'
,
2
)
fd
.
append
(
'description'
,
3
)
fd
.
append
(
'prefix'
,
4
)
fd
.
append
(
'file'
,
file
)
// 配置post请求的参数。参数名file,后面跟要传的文件，参数名fileType，值为category（看后端的具体要求）
// fd.append('file', file)
postUpload
(
fd
).
then
(
response
=>
{
console
.
log
(
1
);
console
.
log
(
response
);
console
.
log
(
file
);
console
.
log
(
2
);
})
}
}
}
</
script
>
<
style
lang
=
"stylus"
scoped
>
</
style
>
2.api.js
postUpload ：最终请求的rest路径
export
const
postUpload
=
params
=>
{
return
service
.
post
(
'/docmanager/file'
,
params
).
then
(
res
=>
res
.
data
)
}
3.FileController.java 后台接口
@RestController @RequestMapping("/file") public class FileController {
@AuthInterceptor @RequestMapping(value = "", method = RequestMethod.POST) public String upload(int categoryId, String tag, String description, String prefix, @RequestParam("file") MultipartFile multipartFile) { User user = (User) request.getSession().getAttribute(ValueConsts.USER_STRING); return ControllerUtils.getResponse( fileService.upload(categoryId, tag, description, prefix, multipartFile,user)); }
}
注意：自己在开发中遇到的问题
e1：action="/docmanager/file" 这样可以自动提交，当我想自己写方法处理，于是查看了el-upload的官方文档，
提供了http-request="自己的function名称"
e2:action提交的时候可以请求到后台接口，但是自己写的函数post的提交的时候却不能，问题出现在几个方面
a1： 请求头部格式enctype="multipart/form-data";
a2： 请求利用FormData提交;
var data = document.getElementById('upload');
提供了http-request="自己的function名称"
e2:action提交的时候可以请求到后台接口，但是自己写的函数post的提交的时候却不能，问题出现在几个方面
a1： 请求头部格式enctype="multipart/form-data";
a2： 请求利用FormData提交;
var data = document.getElementById('upload');
const
fd
=
new
window
.
FormData
(
data
)
fd
.
append
(
'categoryId'
,
1
)
fd
.
append
(
'tag'
,
2
)
fd
.
append
(
'description'
,
3
)
fd
.
append
(
'prefix'
,
4
)
fd
.
append
(
'file'
,
file
)
postUpload(fd).then(response => {
postUpload(fd).then(response => {
console
.
log
(
1
);
console
.
log
(
response
);
console
.
log
(
file
);
console
.
log
(
2
);
})
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)