Vue添付ファイルのアップロードを実現
Vue添付ファイルアップロード例前言 先端部 HTML JS ツール類JS API バックエンドインタフェース 前言
フロントエンドUIはelement-uiのアップロード機能を使用しています
本文は主にコードを記録して、次回のコピーと貼り付けを便利にします
先端部
HTML limit:制限ファイル数1個 on-remove:添付ファイルを削除する際のフック関数は、主にconsole出力の下 について on-error:アップロード異常後の処理に使用され、本人は主に弾窓を閉じて を待つために使用されます. file-list:添付ファイル をバインド auto-upload:自動アップロード禁止、trueならファイルを選んだら自動アップロード http-request:カスタムアップロードファイルリクエストメソッド、デフォルトメソッドはmockとXmlRequestを生成して再生成してファイルの問題が見つからないため、mockはやはりそうであることを注釈して、具体的な研究は ありません action:元のアップロードファイルのパスは、カスタムアップロードファイルリクエスト、すなわちhttp-requestを使用しているので、このフィールドは勝手に書けばいいので、書かないと のようです.
JS
ツールクラスJS
strUtil.js
message.js
API
バックエンドインタフェース
フロントエンドUIはelement-uiのアップロード機能を使用しています
本文は主にコードを記録して、次回のコピーと貼り付けを便利にします
先端部
HTML
<el-upload
ref="upload"
:limit="fileLimit"
: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 }}Mdiv>
el-upload>
JS
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,
//
fileLimit: 1,
}
},
methods: {
//
clear() {
//
this.$refs.upload.clearFiles()
},
//
//
//
checkFile() {
var flag = true
var tip = ''
var files = this.$refs.upload.uploadFiles
files.forEach(item => {
//
if (this.size !== null && this.size !== '' && item.size > this.fileSize * 1024 * 1024) {
flag = false
tip = ' ' + this.fileSize + 'M'
}
//
if (this.fileType !== null && this.fileType !== '' && !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
}