Vue 利用元素input元素进行pdf上传 可限制大小格式

1. 点击一个上传图片按钮 调用input的点击事件

<div class="pic"  style="margin-bottom: 30px;"  @click="selectFile()">
     <img class="user-img" src="../../../static/image/coverWork/upload.png" alt/>
</div>

selectFile(){
    document.getElementById("fileName").click();
}

2. 利用input的type属性 隐藏input框 进行被动调用事件

<input type="file" id="fileName" @change="uploading($event)" style="display: none" accept=".pdf" />

3. 调用上传方法

      // 上传作品
      async uploading(event) {
        let file = event.target.files[0];
        let fileName = file.name; //拿到文件名
        let fileSize = file.size;
        if (fileName.indexOf(".pdf") == -1) {
          this.$message.error('文件格式必须为pdf！', 2000)
          document.getElementById("fileName").value = ""
          return false;
        }
        if (fileName.length > 50) {
          this.$message.error('文件名称过长，请求改！', 2000)
          document.getElementById("fileName").value = ""
          return false;
        }
        if (fileSize > 1024 * 1024 * 2) {
          this.$message.error('上传文件大小不能超过2M！', 2000)
          document.getElementById("fileName").value = ""
          return false;
        }
        let data = {
          biz: 'temp',
          file: fileName
        }

        let formData = new FormData()  //创建一个formdata对象
        formData.append('fileName', fileName)
        formData.append('file', file)
        //调用上传方法
        let res = await manage.uploadAction('/api/common/upload', formData)
        this.message = res.data.message
        let obj = {
          "fileName": fileName,
          "pdfUrl": res.data.message,
          "size": fileSize
        }
        this.pdfList.push(obj)
        if (res.data.code == 200) {
          this.$message.success('上传成功', 1000)
          if (document.getElementById("fileName") != null) { //可以上传同名pdf文件
            document.getElementById("fileName").value = ""
          }
          this.imageUrl = res.data.message;
        } else {
          this.$message.error(res.message, 1000)
        }
      },