【vue】框架之el-upload使用
1.upload.vue 页面
< template >
< 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)); }}
注意：自己在开发中遇到的问题
提供了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
);
})