我的文件上传的需求是只上传.NC的文件并且在上传的时候显示上传进度

结果图片:

 我是将上传写在表格中,这个是操作一列的代码,这里面用到了element-plus的el-upload和el-progress:

accept:接受上传的文件类型

action:请求url

before-upload:上传文件之前的钩子

http-request:允许自行实现上传文件的请求

show-file-list:是否显示已上传文件列表

<el-table-column prop="" label="操作" align="center">
   <template #default="scope">
      <el-upload v-if="!isShow" :accept="'.nc'" class="upload-demo" action="" :before-upload="beforezipUpload(scope.row.user_name)" :http-request="zipUpload" :show-file-list="false">
          <el-button link size="small" type="primary">上传</el-button>
       </el-upload>
       <el-progress v-if="isShow" :percentage="progressShu" />
   </template>
</el-table-column>

<script  setup lang="ts">
//这个是我的接口请求
import { uloadFile } from '@/api/ncDataUpload.js'
const progressShu = ref(0) //控制进度条
const isShow = ref(false) //控制上传按钮和进度条的显示
const uploadForm = reactive({
    userName: '' //给后端传过去的值
})

const zipUpload = async (file: any) => {
    //允许自行实现上传文件的请求
    var fd = new FormData();
    fd.append("file", file.file)
    fd.append("userName", uploadForm.userName)

    const { data } = await uloadFile(fd, (e) => {
        isShow.value = true;
        //计算进度条的值e.loaded当前进度 ,e.total总进度
        progressShu.value = Number((e.loaded / e.total * 100).toFixed(0))
      
    })

    isShow.value = false;
}
const beforezipUpload = (userName) => {
    //上传文件之前首先获取道userName 
    uploadForm.userName = userName
}

</script>




ncDataUpload.js
//上传NC文件  
//(data,onUploadProgress)这两个参数 第一个是给后端传的,第二个是获取上传时的信息,好计算进度条的值
export const uloadFile = (data,onUploadProgress) => {
    return request({
      url: '/admin/NcFile/uloadFile',
      method: 'post',
      data,
      onUploadProgress:onUploadProgress
    })
}

这个进度条我只需要数字,所以我给设置了css样式来隐藏不需要的地方 

//设置进度条的样式
.el-progress-bar { display: none;  }
.el-progress__text { margin: auto !important; }