vue input 框限制上传文件，或者限制上传图片，或者两个都可以上传

1.限制图片

<!-- 图片 -->
      <div>
        <input
          style="display: none"
          type="file"
          id="uploadInputone"
          accept="image/*" //限制图片
          @change="handleChange($event)"
        />
      </div>

2.限制文件

<div>
        <input
          style="display: none"
          type="file"
          id="uploadInput"
          accept="application/msword,text/plain,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

            //限制文件标识
          multiple="multiplt"
          @change="handleChange($event)"
        />
      </div>

3.都可以上传

<div>
        <input
          style="display: none"
          type="file"
          id="uploadInput"
          multiple="multiplt"
          @change="handleChange($event)"
        />
      </div>

在需要的地方调取方法

 scwenjian(val) {
      this.tupianfalg = val;
      let fileDom = document.querySelector("#uploadInput"); 
        //切记标签id保持一致
      fileDom.click();
    },
    // 上传文件

    handleChange(e) {
      // this.chuandi.title = e.target.files[0].name;
//转成了formdata格式，//上传给后台。下面代码根据需求
      var formData = new FormData();
      formData.append("side", "front");
      formData.append("file", e.target.files[0]);
      shangchuanfali(formData).then((res) => {
        if (this.tupianfalg == 0) {
          this.zhanxian.pictureurls.push(res);
          this.chuandi.pictureurl = this.zhanxian.pictureurls.join(",");
        } else {
          this.zhanxian.urls.push(res);
          this.chuandi.url = this.zhanxian.urls.join(",");
        }
        
      });
    },