【前端开发】vue上传模板文件demo

<el-upload
class="upload-demo upload-template-btn"
accept=".doc,.docx"
action="#"
:file-list="fileList"
:http-request="uploadSectionFile"
>
<el-button v-is-system-admin type="text" icon="el-icon-upload2" class="op-btn el-mr-2">上传 </el-button>
</el-upload>

  // 上传模板
  async uploadSectionFile(content: any) {
    // let type = content.file.type
    content.file.description = content.file.name
    const description = content.file.name
    // 不是word格式
    if (!(description.endsWith('.doc') || description.endsWith('.docx'))) {
      MsgBox.error('请上传word格式的模板')
      this.fileList2 = []
      return
    }
    const params = {
      templateType: this.editForm.templateType || '',
      templateId: this.editForm.templateId || '',
      templateName: this.editForm.templateName || description.substring(0, description.lastIndexOf('.'))
    }

    const file = new FormData()
    file.append('file', content.file)
    this.curFile = file
    await addTemplate(params, file, content)
    this.docTimeListFun()
    MsgBox.success('模板上传成功')
  }


// 新增发文模板
export function addTemplate(params: any, file: any, content: any) {
  return request({
    method: 'post',
    url: '/admin/template',
    params: params,
    onUploadProgress: (progressEvent: { loaded: number; total: number }) => {
      const percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
      // 调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
      content.onProgress({ percent: percent })
    },
    data: file,
    // data: { file: null },
    // headers: { 'Content-Type': 'multipart/form-data; boundary=<calculated when request is sent>' }
    baseURL: docBaseUrl
  })
}

 

 这是一个常见的上传word等文件的demo