【vue】フレームワークのel-upload使用

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ファイルのみアップロードでき、500 kbを超えない
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、後から転送するファイル、パラメータ名file Type、値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.jspostUpload:最終リクエストの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));
}

}
注意:自分が開発中に遭遇した問題
e 1:action=「/docmanager/file」のように自動的にコミットできます.自分で書き方をしようとするとel-uploadの公式ドキュメントを見て、http-request=「自分のfunction名」e 2:actionコミットを提供したときにバックグラウンドインタフェースにリクエストできますが、自分で書いた関数postのコミットはできません.問題はいくつかの態様a 1に現れる:ヘッダフォーマットenctype=「multipart/form-data」を要求する;a 2: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 => {
    
console
.
log
(
1
);
    
console
.
log
(
response
);
    
console
.
log
(
file
);
    
console
.
log
(
2
);
     })