weixin_39577803 2022-03-16 21:13 采纳率: 0%
浏览 91

vue-upload-component 手机端无法多选,如何解决?

使用的vue-upload-component 手机端还是不能一次选择多个文件

<template>
  <div class="file-upload-container">
    <ul>
      <li v-for="file in fileList" :key="file.id">
        <span>{{file.name}}</span> -
        <span>{{file.size}}</span> -
        <span v-if="file.error">{{file.error}}</span>
        <span v-else-if="file.success">success</span>
        <span v-else-if="file.active">active</span>
        <span v-else-if="!!file.error">{{file.error}}</span>
        <span v-else></span>
      </li>
    </ul>
    <file-upload-vue class="btn btn-primary"
    :post-action="postAction"
    extensions="gif,jpg,jpeg,png,webp"
    accept="image/png,image/gif,image/jpeg,image/webp"
    multiple
    :thread="10"
    v-model="fileList"
    @input-filter="inputFilter"
    @input-file="inputFile" ref="upload">
      <i class="fa fa-plus"></i>
      select files
    </file-upload-vue>
    <button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
      <i class="fa fa-arrow-up" aria-hidden="true"></i>
      Start Upload
    </button>
    <button type="button" class="btn btn-danger"  v-else @click.prevent="upload.active = false">
      <i class="fa fa-stop" aria-hidden="true"></i>
      Stop Upload
    </button>
  </div>
</template>

<script>
import FileUploadVue from 'vue-upload-component'
export default {
  name: 'fileUploadComponent',
  components: {
    FileUploadVue
  },
  data () {
    return {
      postAction: '',
      fileList: [],
      upload: {}
    }
  },
  methods: {
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 添加文件前
        console.log(newFile)
      }
    },
    inputFile (newFile, oldFile) {
      if (newFile && !oldFile) {
        // add
        console.log('add', newFile)
      }
      if (newFile && oldFile) {
        // update
        console.log('update', newFile)
      }
      if (!newFile && oldFile) {
        // remove
        console.log('remove', oldFile)
      }
    }
  }
}
</script>

<style scoped>

</style>
  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-03-17 10:24
    关注

    FileUploadVue这个组件里面怎么写的

    评论

报告相同问题?

问题事件

  • 创建了问题 3月16日

悬赏问题

  • ¥15 android 集成sentry上报时报错。
  • ¥50 win10链接MySQL
  • ¥35 跳过我的世界插件ip验证
  • ¥15 抖音看过的视频,缓存在哪个文件
  • ¥15 自定义损失函数报输入参数的数目不足
  • ¥15 如果我想学习C大家有是的的资料吗
  • ¥15 根据文件名称对文件进行排序
  • ¥15 deploylinux的ubuntu系统无法成功安装使用MySQL❓
  • ¥15 有人会用py或者r画这种图吗
  • ¥15 MOD04_3K图像预处理