element 手动上传覆盖原来的方法

最新推荐文章于 2024-07-30 15:32:11 发布

csstmg

最新推荐文章于 2024-07-30 15:32:11 发布

阅读量432

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/csstmg/article/details/130149987

版权

该文章展示了如何使用Vue.js的el-upload组件实现Excel文件的上传，包括限制文件大小、检查文件类型、自定义上传逻辑以及使用axios处理HTTP请求。在onChange事件中进行文件验证，而在http-request属性中覆盖默认上传行为，进行自定义的文件提交。

摘要由CSDN通过智能技术生成

 <el-upload
          ref="myupload"
          class="upload-demo"
          drag
          :fileList="fileList"
          :action="actionPath"
          :headers="headers"
          :on-error="fileError"
          :on-progress="onProgress"
          :before-upload="beforeUpload"
          :http-request="toUpload"
          :show-file-list="false"
          accept=".xls,.xlsx"
          :on-change="onChange"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">拖拽文件至此处或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip" style="margin-bottom: 12px">
            支持xls、xlsx表格的excel表格，大小不超过100MB
          </div>
        </el-upload>

通过http-request 实现
:http-request="toUpload"

onChange 判断文件  并获取需要展示的数据
onChange(file) {
      // this.uploadLoading = true
      if (this.allowType) {
        const isLt2M = file.size / 1024 / 1024 > 100
        if (isLt2M) {
          this.$message.warning('文件大小不能超过 100MB!')
          this.uploadLoading = false
          return false
        }
        var index = this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.')).toLowerCase())
        if (index < 0) {
          this.$message({
            message: '文件格式不正确',
            type: 'warning'
          })
          this.uploadLoading = false
          return false
        }
      }
      this.fileList = [file]
      
      this.fileInfoParams = [
        {
          name: file.name,
          size: file.size
        }
      ]
    },

手动点击上传
clickConfirmImport(){
 this.$refs.myupload.submit()  // 会执行toUpload()
}

 toUpload(param) {
      // 覆盖原本的上传
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      axios({
        url: param.action,   // 上传的action
        method: 'post',
        data: formData,
        headers: { 'X-Token': getToken() }  //项目token
      }).then((res) => {
        console.log(res)
      })
    },