前端ui框架element Upload 上传文件-限制上传文件类型

 <el-upload
    class="upload-demo upPic"
    :action="upload_file_urlroot"
     multiple
     :limit="1"
     accept=".pdf"
     :on-success="handleAvatarSuccess"
     :on-error="handleQuesError"
     :before-remove="beforeRemove"
     :before-upload="beforeUpload"
     style="margin-top: 0;"
                    >
<el-button size="small" type="primary">选择本地文件上传</el-button>
accept:接受上传的文件类型(thumbnail-mode 模式下此参数无效)。

我本想只上传pdf格式的文件,但是!!!

当选择所有文件时,别的文件也可以上传。所以在上传之前做了如下限制:

beforeUpload(file){
  var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
  const extension = testmsg === 'pdf'
  if(!extension) {
    this.$message({
      message: '您上传的文件格式不符合要求!只支持pdf格式的文件',
      type: 'warning'
    });
  }
  return extension;
},

 

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
你可以使用SSM(Spring+SpringMVC+MyBatis)作为后端框架Element UI作为前端组件库,通过阿里云的文件功能将文件前端到后端的数据库中。 首先,在前端页面中使用Element UI的上组件来实现文件选择和上功能。你可以参考Element UI的文档,使用`el-upload`组件来创建一个文件的按钮,并设置相应的属性,比如上地址、上方式等。 在后端,你需要编写相应的接口来处理文件的请求。可以使用Spring MVC来处理前端的请求,接收文件并将其存储到数据库中。你可以使用MyBatis来操作数据库。 在接收文件的后端接口中,你可以使用`MultipartFile`类型的参数来接收前端文件。你可以通过该参数获取文件的相关信息,比如文件名、大小等。然后,你可以将文件保存到数据库中,可以将文件内容直接以二进制形式存储,或者将文件存储到服务器的文件系统中,并将文件路径存储到数据库中。 在处理文件的过程中,你需要注意文件大小的限制文件类型限制等,以保证上文件符合你的需求。 总结起来,你可以使用SSM作为后端框架Element UI作为前端组件库,通过阿里云的文件功能将文件前端到后端的数据库中。前端使用Element UI的上组件来实现文件选择和上功能,后端编写相应的接口来处理文件的请求,使用MultipartFile来接收前端文件,并将文件保存到数据库中。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值