参考:https://github.com/simple-uploader/vue-uploader

需求:项目中要求只能上传一个文件,这种场景通过代码已经实现了,但是点击选择文件按钮之后可以拉取多个文件造成多文件同时上传,如下图:

解决办法:在 <uploader-btn :attrs="attrs" single>选择文件</uploader-btn>改行中添加single

<template>
  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader"
            @file-complete="fileComplete" @complete="complete" @file-success="onFileSuccess" @file-added="fileAdded" @fileRemoved="fileRemoved">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <span>
        将文件拖拽到此或点击选择文件按钮上传文件
        <br>
        <div>(注:图片:JPEG、GIF、PNG、JPG</div>
        <div>音频:MP3</div>
        <div> 视频:mp4</div>
        <div>文档文件:DOC、DOCX、XLS、XLSX、PPT、PPTX、PDF、TXT)</div>
        <div>office文件单个上传时,建议文件大小不超过10M,超过10M后,预览效果会受影响</div>
      </span>
      <uploader-btn :attrs="attrs" single>选择文件</uploader-btn>
      <!--<uploader-btn :attrs="attrs">选择图片</uploader-btn>
      <uploader-btn :directory="true">选择文件夹</uploader-btn>-->
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>
Logo

前往低代码交流专区

更多推荐