元件

<template>
  
    
  <div>
    <input id="upload_file" type="file" style="display: none;" accept='image/*' name="file"  @change="fileChange($event)"/>
    <div class="image-item space" @click="showActionSheet()">
      <div class="image-up"></div>
    </div>
   
    <div class="upload_warp">
      <div class="upload_warp_img">
        <div class="upload_warp_img_div" v-for="(item,index) in imgList">
          <div class="upload_warp_img_div_top">
            <img src="http://114.115.162.39/static/image/x.png" class="upload_warp_img_div_del" @click="fileDel(index)">
          </div>
          <img :src="item.file.src" style="display: inline-block;">
        </div>
        <div class="upload_warp_left" id="upload_warp_left" @click="fileClick()" v-if="this.imgList.length < 6">
          <!--<img src="../assets/upload.png">-->
          <img src="../assets/images/新增圖片.png" class="imgs"/>
        </div>
      </div>

    </div>
   
    <div class="upload_warp_text">
    <span>選中{{imgList.length}}張檔案，共{{bytesToSize(this.size)}}</span>
    </div>
  </div>

</template>
 

javaScript程式碼

<script type="text/ecmascript-6">
    export default {
        name: "cameras-and-albums",
      data(){
        return{
          imgList: [],
          datas: new FormData(),
          files:0,
          size:0
        }
      },
      methods:{
        //呼叫相簿&相機
        fileClick() {
          $('#upload_file').click();

        },
        //呼叫手機攝像頭並拍照
        getImage() {
          let cmr = plus.camera.getCamera();
          cmr.captureImage(function(p) {
            plus.io.resolveLocalFileSystemURL(p, function(entry) {
              compressImage(entry.toLocalURL(),entry.name);
            }, function(e) {
              plus.nativeUI.toast("讀取拍照檔案錯誤：" + e.message);
            });
          }, function(e) {
          }, {
            filter: 'image'
          });
        },
        //從相簿選擇照片
        galleryImgs() {
          plus.gallery.pick(function(e) {
            let name = e.substr(e.lastIndexOf('/') + 1);
            compressImage(e,name);
          }, function(e) {
          }, {
            filter: "image"
          });
        },
        //點選事件，彈出選擇攝像頭和相簿的選項
        showActionSheet() {
          let bts = [{
            title: "拍照"
          }, {
            title: "從相簿選擇"
          }];
          plus.nativeUI.actionSheet({
              cancel: "取消",
              buttons: bts
            },
            function(e) {
              if (e.index == 1) {
                this.getImage();
              } else if (e.index == 2) {
                this.galleryImgs();
              }
            }
          );
        },
        fileChange(el) {
          this.files=$("#upload_file").get(0).files;
          console.log(this.files.length);
          for(let i=0;i<this.files.length;i++){
            this.datas.append("file",this.files[i]);
          }
          this.show1=false;
          console.log(typeof this.files);
          console.log(this.files);
          if (!el.target.files[0].size) return;
          this.fileList(el.target);
          el.target.value = ''
        },
        fileList(fileList) {
          let files = fileList.files;
          for (let i = 0; i < files.length; i++) {
            //判斷是否為資料夾
            if (files[i].type != '') {
              this.fileAdd(files[i]);
            } else {
              //資料夾處理
              this.folders(fileList.items[i]);
            }
          }
        },
        //資料夾處理
        folders(files) {
          let _this = this;
          //判斷是否為原生file
          if (files.kind) {
            files = files.webkitGetAsEntry();
          }
          files.createReader().readEntries(function (file) {
            for (let i = 0; i < file.length; i++) {
              if (file[i].isFile) {
                _this.foldersAdd(file[i]);
              } else {
                _this.folders(file[i]);
              }
            }
          })
        },
        fileAdd(file) {
          //總大小
          this.size = this.size + file.size;
          //判斷是否為圖片檔案
          if (file.type.indexOf('image') == -1) {
            file.src = 'wenjian.png';
            this.imgList.push({
              file
            });
          } else {
            let reader = new FileReader();
            reader.vue = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
              file.src = this.result;
              this.vue.imgList.push({
                file
              });
            }
          }
        },
        fileDel(index) {
          this.size = this.size - this.imgList[index].file.size;//總大小
          this.imgList.splice(index, 1);
        },
        bytesToSize(bytes) {
          if (bytes === 0){
            return '0 B';
          }
          let k = 1000, // or 1024
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
          return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        },
        dragenter(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        dragover(el) {
          el.stopPropagation();
          el.preventDefault();
        },
        drop(el) {
          el.stopPropagation();
          el.preventDefault();
          this.fileList(el.dataTransfer);
        },
        shows(et,tx){
          this.strut=et;
          this.txt=tx;
        },
        handleClick(){
          this.$store.commit('add')
        },
      },
    }
</script>