上传文件按钮 vue3（文件上传（模板导出、批量导入））

html部分

<b class="addBtn UseraddBtn" style="background: #3d7bde;right: 93px;">+ 批量导入</b>

          <input type="file" id="fileInput"

            style="opacity: 0;right: 93px;width: 88px;height:29px;position: absolute;top:-5px" οnchange="BatchImport()">

          <a href="./模板.xlsx" class="addBtn UseraddBtn" target="_blank"

            style="background-color: #0E9D5F;color: #fff;">导出模板</a>

限制文件上传格式：

1 
    
    
    、图片格式    

        accept="image/*"

        仅限制gif png格式   

        accept="image/gif,image/png"

2
     


     


     


、excel格式  

        //限制.xls文件

        accept="application/vnd.ms-excel

"    

        //限制.xlsx文件

        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 

        同时限制上传.xls 




 




 




、.xlsx文件

        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel "

        或

        accept=".xls,.xlsx"

js部分 

//批量导入

  function BatchImport() {

    var form = new FormData(), fileInput = document.getElementById("fileInput");

    form.append("file", fileInput.files[0]);

    if (!attributeid) {

      layer.msg("请先选择导入部门！");

      return;

    }

    layer.confirm(您确定要导入该文件吗？, {

      btn: [确定, 取消] //按钮

    }, function () {

      $.ajax({

        url: src + "/api/MailList/InsertPhone?attrid=" + attributeid,

        type: "POST",

        contentType: false,

        processData: false,

        data: form,

        success: function (data) {

          if (data) {

            layer.msg("导入成功", { icon: 1 });

            fileInput.value = "";

            setTimeout(() => { loadUserlist(); }, 1000);

          }

        },

        error: function (msg) {

          console.log(msg)

        }

      })

    }, function () {

      layer.close(50)

    })

  }

js部分限制上传文件类型

if (![application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel].includes(fileInput.files[0].type)) {

      layer.msg(只能上传.XLS|.XLSX格式的文件！, { icon: 2 });

      return;

    }

accept接受格式

*.3gpp    audio/3gpp, video/3gpp    3GPP Audio/Video

*.ac3    audio/ac3    AC3 Audio

*.asf    allpication/vnd.ms-asf    Advanced Streaming Format

*.au    audio/basic    AU Audio

*.css    text/css    Cascading Style Sheets

*.csv    text/csv    Comma Separated Values

*.doc    application/msword    MS Word Document

*.dot    application/msword    MS Word Template

*.dtd    application/xml-dtd    Document Type Definition

*.dwg    image/vnd.dwg    AutoCAD Drawing Database

*.dxf    image/vnd.dxf    AutoCAD Drawing Interchange Format

*.gif    image/gif    Graphic Interchange Format

*.htm    text/html    HyperText Markup Language

*.html    text/html    HyperText Markup Language

*.jp2    image/jp2    JPEG-2000

*.jpe    image/jpeg    JPEG

*.jpeg    image/jpeg    JPEG

*.jpg    image/jpeg    JPEG

*.js    text/javascript, application/javascript    JavaScript

*.json    application/json    JavaScript Object Notation

*.mp2    audio/mpeg, video/mpeg    MPEG Audio/Video Stream, Layer II

*.mp3    audio/mpeg    MPEG Audio Stream, Layer III

*.mp4    audio/mp4, video/mp4    MPEG-4 Audio/Video

*.mpeg    video/mpeg    MPEG Video Stream, Layer II

*.mpg    video/mpeg    MPEG Video Stream, Layer II

*.mpp    application/vnd.ms-project    MS Project Project

*.ogg    application/ogg, audio/ogg    Ogg Vorbis

*.pdf    application/pdf    Portable Document Format

*.png    image/png    Portable Network Graphics

*.pot    application/vnd.ms-powerpoint    MS PowerPoint Template

*.pps    application/vnd.ms-powerpoint    MS PowerPoint Slideshow

*.ppt    application/vnd.ms-powerpoint    MS PowerPoint Presentation

*.rtf    application/rtf, text/rtf    Rich Text Format

*.svf    image/vnd.svf    Simple Vector Format

*.tif    image/tiff    Tagged Image Format File

*.tiff    image/tiff    Tagged Image Format File

*.txt    text/plain    Plain Text

*.wdb    application/vnd.ms-works    MS Works Database

*.wps    application/vnd.ms-works    Works Text Document

*.xhtml    application/xhtml+xml    Extensible HyperText Markup Language

*.xlc    application/vnd.ms-excel    MS Excel Chart

*.xlm    application/vnd.ms-excel    MS Excel Macro

*.xls    application/vnd.ms-excel    MS Excel Spreadsheet

*.xlt    application/vnd.ms-excel    MS Excel Template

*.xlw    application/vnd.ms-excel    MS Excel Workspace

*.xml    text/xml, application/xml    Extensible Markup Language

*.zip    aplication/zip    Compressed Archive