【前端开发】js上传⽂件组件封装当前页使⽤，element ui组件为例
1、html
<el-upload
class="upload-template"
:class="{ 'no-files': !fileList.length }"
action="#"
:accept="accept"
:file-list="fileList"
:http-request="uploadSectionFile"
:before-upload="beforeUpload"
>
<div slot="tip" class="el-upload__tip el-mt-2">请上传doc/docx⽂件</div>
<el-button slot="trigger" type="primary">上传模板</el-button>
<el-button class="el-ml-3" @click="clearFile">清空模板</el-button>
<input id="editTemplate" type="file" />
<template slot="file" slot-scope="scope">
<a
v-if="scope.file.status !== 'uploading'"
class="el-upload-list__item-name"
@click="handleFileClick(scope.file)"
>
<svg-icon icon-class="icc-files-doc" class="el-mr-2" />{{ scope.file.description }}
</a>
<label class="el-upload-list__item-status-label">
<i
:class="{
'el-icon-upload-success': true,
'el-icon-circle-check': true
}"
/>
</label>
<i
slot="trigger"
class="update-icon list-item-icon el-primary"
title="更新模板"
@click="handleEditFile(scope.file)"
>
<svg-icon icon-class="ic-upload" />
inputtypefile不上传文件</i>
<el-tooltip class="item-btn" content="删除模板" placement="top">
<i class="el-icon-delete list-item-icon btn-delete" @click="handleRemoveFile(scope.file)" />
</el-tooltip>
<el-progress
v-if="scope.file.status === 'uploading'"
type="line"
:stroke-width="2"
:percentage="parsePercentage(scope.file.percentage)"
/>
</template>
</el-upload>
2、js
限制上传⽂件类型
private accept: string = '.doc,.docx'
上传事件触发
// 上传模板
async uploadSectionFile(content: any) {
let type = pe
content.file.description = content.file.name
let description = content.file.name
let params = {
reportId: portId,
description: description
}
let file = new FormData()
file.append('file', content.file)try {
let res = await addReportTemplate(params, file, content)
this.$message.success('新增模板成功')
}
}
3、上传接⼝注意
// 新增报表模板
export function addReportTemplate(params: { reportId: string; description: string }, file: any, content: any) { return request({
method: 'post',
url: 'admin/reportTemplate',
params: params,
onUploadProgress: progressEvent => {
let percent = ((progressEvent.loaded / al) * 100) | 0
// 调⽤onProgress⽅法来显⽰进度条，需要传递个对象 percent为进度值
},
data: file,
baseURL: buseBaseUrl
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。