CommunityApp/pagesM/comps/dt_upload.vue

<template>
  <view class="dt-upload-wrap">
    <block v-for="(item, idx) in imgList" :key="idx">
      <view v-if="idx<max" class="upload-item">
        <image
          class="file-image"
          mode="aspectFit"
          :src="item.path"
          @tap.stop="previewImgs(item,imgList)"
        ></image>
        <image
          class="remove-img"
          @tap.stop="remove(item,idx)"
          src="http://139.9.103.171:1888/img/image/del.png"
          mode="widthFix"
        ></image>
        <view v-if="status[idx]" class="loading-wrap" :class="status">
          <image
            v-if="status[idx] == 'loading'"
            class="loading"
            src="http://139.9.103.171:1888/img/image/loading.gif"
            mode="widthFix"
          ></image>
          <text v-if="status[idx] == 'success'">上传成功</text>
          <text v-else-if="status[idx] == 'failed'">上传失败</text>
          <text v-else-if="status[idx] == 'loading'">上传中...</text>
        </view>
      </view>
    </block>
    <view v-if="imgList.length < max" class="upload-item" @tap="chooseImgs">
      <image
        class="camera"
        src="http://139.9.103.171:1888/img/image/camera.png"
        mode="widthFix"
      ></image>
      <view class="title">{{ title }}</view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    max: {
      type: Number,
      default: 3
    },
    files: {
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  data(){
    return {
      status: [], // loading, success, failed
      successList:[],
      failedList:[],
      imgList:[], // {id,name,path}
    }
  },
  
  methods: {
    previewImgs(item, list) {
      let imgList = [item.path]
      let type = Object.prototype.toString.call(list)
      if (type == '[object Array]' && list.length > 0) {
        list.forEach((li)=>{
          imgList.push(li.path)
        })
      }
      uni.previewImage({
        current: url,
        urls: imgList
      })
    },
    clear(){
      this.$set(this, 'status', [])
      this.$set(this, 'successList', [])
      this.$set(this, 'failedList', [])
      this.$set(this, 'imgList', [])
      this.$emit('update:files',[])
    },
    isHost(path){
      let host = this.$global.server.apiUrl;
      return path && path != '' && path.indexOf(host) > -1;
    },
    remove(item,idx) {
      if(this.isHost(item.path)){
        // this.$api.deletePic(this.file);
      }
      this.imgList.splice(idx,1)
      this.$forceUpdate()
    },
    chooseImgs() {
      uni.chooseImage({
        count: this.max-this.imgList.length, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: res => {
          let tempPaths = res.tempFilePaths;
          let imgList = this.imgList.slice(0)
          tempPaths.forEach((itemPath)=>{
            imgList.push({
              path:itemPath
            })
          })
          this.imgList = imgList
          this.status = this.status || []
          for(let o of tempPaths){
            this.status.push('')
          }
          this.$forceUpdate()
        },
        fail: res => {
          console.warn(res.errormsg || "取消选择");
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    },
    upload(){
      let promiseList = []
      let imgList = this.imgList || []
      imgList.forEach((file, idx)=>{
        if(this.isHost(file.path)){
          this.$set(this.status,idx,'success')
          return
        }
        this.$set(this.status,idx,'loading')
        let promiseObj = this.$api.uploadImg({
          _isReject:true,
          uri:file.path,
          name:'img_'+ this.$global.server.miniappCode +'_'+Date.now()
        })
        promiseList.push(promiseObj)
      })
      return new Promise((resolve,reject)=>{
        Promise.all(promiseList).then(resList=>{
          console.log(144,resList)
          let flagFail = false

          resList.forEach((res,idx)=>{

            if(res && res[0]){
              this.successList.push(res[0])
              this.imgList[idx] = res[0]
              this.$set(this.status,idx,'success')
            }else{
              this.$set(this.status,idx,'failed')
              flagFail = true
            }
          })
          if(flagFail){
            throw new Error("res is null")
          }
          this.$emit('complete',this.successList)
          console.log(160,this.successList)
          resolve(this.successList)
        }).catch(err=>{
          console.error('error',err)
          this.$emit('error',err)
          imgList.forEach((file,idx)=>{
            this.$set(this.status,idx,'failed')
            this.failedList.push(file)
          })
          reject(err)
        })
      })

    },
    
  },
  onReady(){
    this.$nextTick(()=>{
      let files = this.files || []
      this.imgList = [].concat(files)
      this.$forceUpdate()
      console.log(this.imgList)
    })
  },
    
  
};
</script>
<style lang="scss">
.dt-upload-wrap {
  display:flex;
  flex-wrap:wrap;
  .upload-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    margin:20upx 15upx;
    width: 150upx;
    height: 150upx;
    border: 2upx dashed $dt-border-color;
    box-sizing: border-box;
    .camera {
      width: 60upx;
      height: 60upx;
    }
    .title {
      font-size: 22upx;
      margin-top: 10upx;
      color: #999;
    }
    .loading-wrap {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30upx;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 16upx;
      .loading {
        width: 20upx;
        height: 20upx;
        margin-right: 10upx;
      }
    }
    .success {
      color: #019808;
    }
    .failed {
      color: #dc0024;
    }

    // @keyframes loadingRotate{
    //   0% {transform: rotate(0deg);}
    //   50% {transform: rotate(180deg);}
    //   100% {transform: rotate(360deg);}
    // }
    // .ani-rotate{
    //   animation: loadingRotate 1s linear infinite
    // }

    .remove-img {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(45%, -45%);
      width: 30upx;
      height: 30upx;
      padding:10upx;
    }

    .file-image {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .upload-item:first-child{
    margin-left:0;
  }
  .upload-item:last-child{
    margin-right:0;
  }
}
</style>