vue+elements----el-upload文件上传/类型限制。上传单个文件/多个文件

本文链接：https://blog.csdn.net/DcTbnk/article/details/115693788

该博客介绍了如何在Vue.js项目中使用Element-UI的upload组件，限定用户只能上传.xls和.xlsx格式的Excel文件。在beforeUpload回调函数中，通过检查文件的扩展名来实现文件类型的限制，并提供了文件上传成功后的处理逻辑，包括调用自定义接口UploadFiles及展示成功消息。

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

element-ui upload组件上传文件类型限制

原链接 → 点击可查看
原链接 → 点击可查看
在这里插入图片描述

beforeUpload(file) {
            console.log(file)
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是 xls、xlsx格式!',
                    type: 'warning'
                });
            }
            // if(!isLt2M) {
            //     this.$message({
            //         message: '上传文件大小不能超过 10MB!',
            //         type: 'warning'
            //     });
            // }
            // return (extension || extension2) && isLt2M
            return extension || extension2
}

el-upload 实现文件的上传

原链接 → 点击可查看

// 文件提交
    UploadImage (param) {
      const formData = new FormData()
      formData.append('ModelName', param.file) // 要提交给后台的文件
      formData.append('projectFolder', this.routeProjectId) // 这个接口必要的项目id
      formData.append('subFolder', this.routeFloorId) // 这个接口必要的其他的id
      UploadFiles(formData).then(response => {  // UploadFiles 是封装的接口
        if (response !== undefined) {
          Message({
            message: response.Msg,
            type: 'success',
            duration: 5 * 1000
          })
          param.onSuccess()
          this.$store.state.basics.ShuxinTable = true
        }
      })
    }