Vue2多图上传如何限制最多上传6张并实现已上传图片预览

修改要点 #

• 新增6张上限校验：选择文件时自动判断数量，超出则提示并仅保留前6张有效文件
• 实时预览：选择文件后立即生成本地预览地址，无需等待提交即可看到图片效果
• 修复原代码Bug：修正了提交按钮绑定方法名与实际定义方法名不匹配的问题
• 新增图片类型校验：自动过滤非图片格式的文件，避免无效上传

完整可运行代码 #

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="asad">
<template >
    <div class="container">
        <div>
            <h2>多图上传</h2>
            <hr/>
            <label>选择图片
                <input type="file" multiple accept="image/*" @change="handleFileUploads( $event )"/>
                <!-- 可加上限提示 -->
                <span style="color:#999;font-size:12px;margin-left:10px">最多可上传6张图片</span>
                <ul v-if="files.length">
                <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
                </ul>
            </label>
            
            <!-- 预览区域，可加样式控制大小 -->
            <div style="margin-top:10px;display:flex;gap:10px;flex-wrap:wrap">
                <img v-for="(image,idx) in images" :key="idx" :src="image" style="width:100px;height:100px;object-fit:cover" />
            </div>
            
            <br>
            <button v-on:click="submitFiles">提交</button>
        </div>
    </div>
</template>
</div>
</body>

<script>
var app = new Vue({
  el: '#asad',
  data(){
    return {
      files: [],
      images: [],
      // 可配置的上传上限，方便后续修改
      maxUploadCount: 6
    }
  },
  computed: {
    filesNames() {
      return this.files.map(file => file.name)
    }
  }, 
  methods: {
    handleFileUploads( event ){
      // 转成数组方便处理
      const selectFiles = Array.from(event.target.files)
      // 校验数量
      if (selectFiles.length > this.maxUploadCount) {
        alert(`最多仅可上传${this.maxUploadCount}张图片，已自动截取前${this.maxUploadCount}张`)
      }
      // 截取有效文件，过滤非图片类型
      const validFiles = selectFiles.slice(0, this.maxUploadCount).filter(file => file.type.indexOf('image/') === 0)
      this.files = validFiles
      // 生成预览
      this.images = validFiles.map(file => URL.createObjectURL(file))
      // 清空input值，避免重复选择同一文件不触发change事件
      event.target.value = ''
    },

    submitFiles(){
      let formData = new FormData();
      for( var i = 0; i < this.files.length; i++ ){
        let file = this.files[i];
        formData.append('files[' + i + ']', file);
      }

      axios.post( '/multiple-files', formData, 
        {headers: {'Content-Type': 'multipart/form-data'}}
      ).then(function(){
        console.log('上传成功');
      })
      .catch(function(){
        console.log('上传失败');
      });
    }
  }
})
  
</script>
</html>

额外说明 #

• 若需要支持多次选择累加图片，只需将handleFileUploads中的文件赋值逻辑改为this.files = [...this.files, ...validFiles].slice(0, this.maxUploadCount)即可，预览数组同理修改
• 预览区域的样式可根据业务需求自行调整，当前仅做基础的大小限制
• 代码中已添加accept="image/*"限制文件选择框默认仅展示图片文件，降低用户误选概率

内容的提问来源于stack exchange，提问作者Inayat Kazi