Vue ElementUI中Upload組件批量上傳的實(shí)現(xiàn)代碼
ElementUI中Upload組件如何批量上傳
首先就是upload組件
<el-upload
class="upload-demo"
ref="uploadFile"
name="filedatas"
:headers="importHeaders"
:action="uploadAdminHost"
:auto-upload="false"
multiple
>
<el-button slot="trigger" size="small" type="primary">選取博客文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到服務(wù)器</el-button>
</el-upload>然后是上傳邏輯,首先獲取到upload組件上的dom,然后獲取文件,上傳地址和數(shù)據(jù)
// 文件上傳
submitUpload() {
let {uploadFiles, action, data} = this.$refs.uploadFile
this.uploadFiles({
uploadFiles,
data,
action,
success: (response) => {
console.log(response)
// 上傳成功后,將里面的內(nèi)容刪除
this.$refs.uploadFile.clearFiles();
this.$refs.uploadPicture.clearFiles();
},
error: (error) => {
console.log('失敗了', error)
}
})
},下面封裝了一個(gè) uploadFiles 方法,這里uploadFiles 就可以是多文件,通過(guò)封裝ajax方式
/**
* 自定義上傳文件
* @param fileList 文件列表
* @param data 上傳時(shí)附帶的額外參數(shù)
* @param url 上傳的URL地址
* @param success 成功回調(diào)
* @param error 失敗回調(diào)
*/
uploadFiles({uploadFiles, headers, data, action, success, error}) {
let form = new FormData()
// 文件對(duì)象
uploadFiles.map(file => form.append("filedatas", file.raw))
// 附件參數(shù)
for (let key in data) {
form.append(key, data[key])
}
let xhr = new XMLHttpRequest()
// 異步請(qǐng)求
xhr.open("post", action, true)
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader("Authorization", getToken());
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
success && success(xhr.responseText)
} else {
error && error(xhr.status)
}
}
}
xhr.send(form)
}最后后臺(tái)接口,同時(shí)接受多個(gè)文件
@PostMapping("/pictures")
public Object uploadPics(HttpServletRequest request, List<MultipartFile> filedatas) {
// 邏輯代碼
}最后查看請(qǐng)求,會(huì)同時(shí)攜帶多個(gè)文件,并且返回多個(gè)上傳成功的結(jié)果
到此這篇關(guān)于Vue ElementUI中Upload組件如何批量上傳的文章就介紹到這了,更多相關(guān)Vue ElementUI Upload組件批量上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue transx組件切換動(dòng)畫(huà)庫(kù)示例詳解
這篇文章主要為大家介紹了Vue transx組件切換動(dòng)畫(huà)庫(kù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
Vues中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn)的步驟詳解
在Vue應(yīng)用中,利用Vue?Router進(jìn)行頁(yè)面間的導(dǎo)航是一個(gè)常見(jiàn)需求,本篇博客將通過(guò)示例代碼詳細(xì)介紹如何在Vue組件中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn),需要的朋友可以參考下2024-05-05
vue中復(fù)用vuex.store對(duì)象的定義
這篇文章主要介紹了vue中復(fù)用vuex.store對(duì)象的定義,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

