1.子组件封装
<template>
<!-- 批量上传樂 -->
<el-upload
class="upload-demo"
ref="uploadFile"
name="filedatas"
:headers="importHeaders"
:action="uploadAdminHost"
:auto-upload="false"
:data="otherData"
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>
</template>
<script>
export default {
props: {
importHeaders: Object,
uploadAdminHost: String,
otherData: Object
},
methods: {
submitUpload() {
const { uploadFiles, action, data } = this.$refs.uploadFile
this.uploadFiles({
uploadFiles,
data,
action,
success: (response) => {
console.log(response)
// 上传成功后，将里面的内容删除
this.$refs.uploadFile.clearFiles()
this.$emit('uploadSuccess', response)
},
error: (error) => {
console.log('失败了', error)
}
})
},
uploadFiles({ uploadFiles, headers, data, action, success, error }) {
let form = new FormData()
// 文件对象
uploadFiles.map((file) => form.append('file', file.raw))
// 附件参数
for (let key in data) {
form.append(key, data[key])
}
let xhr = new XMLHttpRequest()
// 异步请求
xhr.open('post', action, true)
// 设置请求头
for (let header in headers) {
xhr.setRequestHeader(header, headers[header])
}
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)
}
}
}
</script>
<style>
.upload-demo {
display: inline-block;
margin-right: 20px;
}
</style>
2.父组件调用
<template>
<div>
<leBatchUpload
:importHeaders="otherDataBatch"
:uploadAdminHost="fileUploadUrl"
:otherData="otherDataBatch"
@uploadSuccess="uploadSuccessFunc"
></leBatchUpload>
</div>
</template>
<script>
import leBatchUpload from '@/components/leBatchUpload.vue';
export default {
components: {
leBatchUpload
},
data() {
return {
fileUploadUrl: 'http://example.com/upload', // 文件上传接口地址
otherDataBatch: {
// 其他需要传递的参数
},
uploadResult: null
};
},
methods: {
uploadSuccessFunc(res) {
console.log('上传成功', res);
this.uploadResult = res;
}
}
};
</script>
