uniapp,uView UI框架 批量上传

官方文档

​​http://uviewui.com/components/upload.html​​

手动上传-点击按钮才会上传

<template>
  <view>
    <u-upload ref="uUpload" :action="action" :auto-upload="true" :before-upload="beforeUpload"></u-upload>
    <u-button @click="submit">提交</u-button>
  </view>
</template>

<script>
  //"http://192.168.1.181:812/UploadingTools/upload_ajax.ashx?action=SingleFile"
  export default {
    data() {
      return {
        action: 'http://192.168.1.181:812/UploadingTools/upload_ajax.ashx?action=uniappUViewBatch',
        filesArr: []
      }
    },
    methods: {
      beforeUpload(index, list) {
              // 只上传偶数索引的文件
              // if(index % 2 == 0) return true;
              // else return false;
              
              console.log("index:即当前上传文件在上传列表中的索引");
              console.log(index);
              console.log("lists:当前所有的文件列表");
              console.log(list);
            },
      submit() {
        let files = [];
        // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
        files = this.$refs.uUpload.lists.filter(val => {
          return val.progress == 100;
        })
        // 如果您不需要进行太多的处理，直接如下即可
        // files = this.$refs.uUpload.lists;
        console.log(files)
      }
    }
  }
</script>

<style>

</style>

自动上传

<template>
  <view>
    <u-upload ref="uUpload" :action="action" :before-upload="beforeUpload"></u-upload>
  </view>
</template>

<script> 
  export default {
    data() {
      return {
        action: 'http://192.168.1.181:812/UploadingTools/upload_ajax.ashx?action=uniappUViewBatch',
        filesArr: []
      }
    },
    methods: {
      beforeUpload(index, list) {
              // 只上传偶数索引的文件
              // if(index % 2 == 0) return true;
              // else return false;
              
              console.log("index:即当前上传文件在上传列表中的索引");
              console.log(index);
              console.log("lists:当前所有的文件列表");
              console.log(list);
            },
       
  }
</script>

<style>

</style>