vue에서 el-upload 구성 요소를 사용하여 여러 파일을 완료하고 한 번에 일괄 업로드를 요청하십시오.
코드를 직접 붙여넣기:
<el-upload
class="upload-demo"
ref="uploadFile"
name="filedatas"
:headers="{ Authorization: `${$store.state.user.userInfo.token}`}"
:action="$interfaces.api.uploadBatch"
: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">提交到后台</el-button>
</el-upload>
public submitUpload() {
//@ts-ignore
let {
uploadFiles, action, data} = this.$refs.uploadFile;
//@ts-ignore
this.uploadFiles({
uploadFiles,
data,
action,
success: (response:any) => {
//@ts-ignore
this.$refs.uploadFile.clearFiles();
},
error: (error:any) => {
console.log('失败了', error)
}
})
}
public uploadFiles({
uploadFiles, headers, data, action, success, error}) {
let form = new FormData()
// 文件对象
//@ts-ignore
uploadFiles.map(file => form.append("files", file.raw))
// 附件参数
for (let key in data) {
form.append(key, data[key])
}
let xhr = new XMLHttpRequest()
// 异步请求
xhr.open("post", action, true)
// 设置请求头
xhr.setRequestHeader("Authorization", this.$store.state.user.userInfo.token);
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)
}