【前端開發】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" style="display:none" />
        <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" />
          </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 = content.file.type
    content.file.description = content.file.name
    let description = content.file.name
    let params = {
      reportId: this.reportId,
      description: description
    }
    let file = new FormData()
    file.append('file', content.file)try {
      let res = await addReportTemplate(params, file, content)
      this.getReportTemplate()
      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 / progressEvent.total) * 100) | 0
      // 調用onProgress方法來顯示進度條，需要傳遞個對象 percent為進度值
      content.onProgress({ percent: percent })
    },
    data: file,
    baseURL: buseBaseUrl
  })
}