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>