upload

<template>
  <div class="content">
    <div class="uploadbox">
      <el-upload
        ref="upload"
        :show-file-list="false"
        drag
        action="#"
        :before-upload="handleChange"
        :http-request="uploadHttpRequest"
        accept=".zip"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">
          只能上传zip文件
        </div>
      </el-upload>
    </div>
    <el-dialog
      title="上传"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="zippercent == 100 || zippercent == -1"
      @close="closeDialog"
    >
      <div class="redtext">注意：上传过程中请勿刷新或关闭当前网页</div>
      <div class="namebox">
        <div class="left">
          {{ zipname }}
        </div>
        <div v-if="zippercent == -1">
          <i class="el-icon-warning-outline" /><span
            class="ml10"
          >上传失败</span>
        </div>
        <div v-else-if="zippercent == -2">
          <i class="el-icon-loading" />
          <span class="ml10">文件检验中</span>
        </div>
        <div v-else>
          <div v-if="zippercent != 100" class="right">
            {{ zippercent }}%
            <span
              class="ml10"
            >{{
              parseInt(num) + Math.floor(Math.random() * 100 + 1)
            }}kb/s</span>
          </div>
          <div v-if="zippercent == 100">
            <i class="el-icon-circle-check" />
            <span class="ml10">上传成功</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dictList } from '@/api/index'
import { materialAdd } from '@/api/v2.0/upload'

import messageup from '@/utils/resetMessage'
import JsZip from 'jszip'
export default {
  name: 'Upload',
  data() {
    return {
      zippercent: 0,
      dialogVisible: false,
      num: 0,
      zipname: '',
      accepts: ['application/zip'],
      filenameArray: [],
      saveFile: '',
      typeList: [],
      saveZipurl: '',
      saveResoulute: '',
      savexMax: '',
      saveyMax: '',
      savetargetName: [],
      isWidthHeight: false
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getTypeList()
  },
  methods: {
    // 获取类型枚举
    getTypeList() {
      dictList().then(res => {
        this.typeList = res.datas.typeList
      })
    },
    // 具体规则看 assets/book.jpg
    uploadHttpRequest() {},
    isAllTypeName(array) {
      if (array.length > 0) {
        return !array.some(function(value, index) {
          return value !== array[0]
        })
      } else {
        return true
      }
    },
    isAllWidthHeight(array) {
      if (array.length > 0) {
        return !array.some(function(value, index) {
          return (
            value.height !== array[0].height || value.width !== array[0].width
          )
        })
      } else {
        return true
      }
    },
    handleChange(file) {
      console.log(file)
      const that = this
      that.zippercent = 0
      that.saveFile = file
      that.zipname = file.name.substring(0, file.name.lastIndexOf('.'))
      const isAccept = that.accepts.includes(file.type)
      if (!isAccept) {
        that.$message.warning('请上传zip格式文件')
        return
      }
      that.dialogVisible = true
      that.zippercent = -2
      var new_zip = new JsZip()
      new_zip.loadAsync(file).then(zip => {
        var [w, h] = [0, 0]
        var isExistDir = false
        that.filenameArray = []
        for (const name in zip.files) {
          const target = zip.files[name]
          that.filenameArray.push(zip.files[name])
          if (target.dir) {
            isExistDir = true
            continue
          }
        }
        if (isExistDir) {
          that.$message.warning(
            '压缩包内仅包含图片文件，不得有其他文件或文件夹'
          )
          that.dialogVisible = false
          return
        } else {
          const length = Object.keys(zip.files).length
          console.log(length, 'length')
          if (
            length === 72 ||
            length === 120 ||
            length === 360 ||
            length === 200 ||
            length === 648
          ) {
            const promises = []
            for (let i = 0; i < length; i++) {
              var name = that.filenameArray[i].name
              promises.push(
                new Promise((resolve, reject) => {
                  // 解压图片并转换为base64
                  zip
                    .file(name)
                    .async('base64')
                    .then(base64 => {
                      const img = new Image()
                      img.onload = e => {
                        const { width, height } = img
                        if (width !== height) {
                          reject('有文件尺寸错误，请上传1:1比例的图片')
                          that.dialogVisible = false
                          return
                        } else {
                          resolve(img)
                        }
                      }
                      img.onerror = e => {
                        reject('有文件读取失败，请检查该文件是否正常')
                        that.dialogVisible = false
                      }
                      img.src = `data:image/png;base64,${base64}`
                    })
                })
              )
            }
            Promise.all(promises)
              .then(list => {
                var istrueState = false
                for (let index = 0; index < list.length; index++) {
                  that.saveResoulute = {
                     list[0].width,
                    height: list[0].height
                  }
                  if (
                    list[index].width < 1500 ||
                    list[index].width > 3000 ||
                    list[index].height < 1500 ||
                    list[index].height > 3000
                  ) {
                    istrueState = true
                    continue
                  }
                }
                if (istrueState) {
                  messageup({
                    type: 'warning',
                    showClose: false,
                    message: '分辨率要求在1500~3000之间'
                  })
                  that.dialogVisible = false
                  return
                }
                console.log('length', length)
                // console.log(that.isAllWidthHeightnum(list))
                if (that.isAllWidthHeight(list) === true) {
                  if (length === 72) {
                    that.saveType = that.typeList.find(item => {
                      return item.name === '360'
                    })
                    that.savexMax = 1
                    that.saveyMax = 72
                    that.threeSixzero(zip, length)
                  } else if (length === 120) {
                    that.saveType = that.typeList.find(item => {
                      return item.name === '540'
                    })
                    that.savexMax = 5
                    that.saveyMax = 20
                    that.fiveFourzero(zip, length)
                  } else if (length === 360) {
                    that.saveType = that.typeList.find(item => {
                      return item.name === '540 Pro'
                    })
                    that.savexMax = 9
                    that.saveyMax = 36
                    that.fiveFourzeropro(zip, length)
                  } else if (length === 200) {
                    that.saveType = that.typeList.find(item => {
                      return item.name === '720'
                    })
                    that.savexMax = 5
                    that.saveyMax = 20
                    that.sevenTwozero(zip, length)
                  } else if (length === 648) {
                    that.saveType = that.typeList.find(item => {
                      return item.name === '720 Pro'
                    })
                    that.savexMax = 9
                    that.saveyMax = 36
                    that.sevenTwozeropro(zip, length)
                  }
                } else {
                  that.$message.warning('素材图片分辨率不一致')
                  that.dialogVisible = false
                  return
                }
              })
              .catch(msg => {
                messageup({
                  type: 'warning',
                  showClose: false,
                  message: msg
                })
              })
          } else {
            that.$message.warning(
              '压缩包内图片数量错误，请校对各个模式(360,540,540pro,720,720pro)下的数量规则'
            )
            that.dialogVisible = false
            return
          }
        }
      })
    },
    // 360判断   72
    threeSixzero(zip, length) {
      const that = this
      var isNametrue = false
      that.savetargetName = []
      for (const name in zip.files) {
        const target = zip.files[name]
        that.savetargetName.push(target.name)
        if (target.name.split('.')[0] === '00') {
          isNametrue = true
          continue
        }
        if (parseInt(target.name.split('.')[0]) > 72) {
          isNametrue = true
          continue
        }
        if (!/^([0-9][0-9]).(jpg)$/.test(target.name)) {
          isNametrue = true
          continue
        }
      }
      if (isNametrue) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      that.uploadZip(that.saveFile, length)
    },
    // 540判断   120
    fiveFourzero(zip, length) {
      const that = this
      var isNametrue = false
      that.savetargetName = []
      for (const name in zip.files) {
        const target = zip.files[name]
        const first_num = target.name.split('.')[0].split('-')[0]
        const second_num = target.name.split('.')[0].split('-')[1]
        const imgType = target.name.split('.')[1]
        that.savetargetName.push(target.name)
        if (!/^([0][0-5])$/.test(first_num)) {
          isNametrue = true
          continue
        }
        if (!/^([0-2][0-9])$/.test(second_num)) {
          isNametrue = true
          continue
        }

        if (parseInt(second_num) === 0) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) > 20) {
          isNametrue = true
          continue
        }

        if (imgType !== 'jpg') {
          isNametrue = true
          continue
        }
      }
      if (isNametrue) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      that.uploadZip(that.saveFile, length)
    },
    // 540pro判断  360
    fiveFourzeropro(zip, length) {
      const that = this
      var isNametrue = false
      that.savetargetName = []
      for (const name in zip.files) {
        const target = zip.files[name]
        that.savetargetName.push(target.name)
        const first_num = target.name.split('.')[0].split('-')[0]
        const second_num = target.name.split('.')[0].split('-')[1]
        const imgType = target.name.split('.')[1]
        if (!/^([0][0-9])$/.test(first_num)) {
          isNametrue = true
          continue
        }
        if (!/^([0-3][0-9])$/.test(second_num)) {
          isNametrue = true
          continue
        }

        if (parseInt(second_num) === 0) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) > 36) {
          isNametrue = true
          continue
        }

        if (imgType !== 'jpg') {
          isNametrue = true
          continue
        }
      }
      if (isNametrue) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      that.uploadZip(that.saveFile, length)
    },
    // 720判断  200
    sevenTwozero(zip, length) {
      const that = this
      var isNametrue = false
      var Narray = []
      var Sarray = []
      that.savetargetName = []
      for (const name in zip.files) {
        const target = zip.files[name]
        that.savetargetName.push(target.name)
        const NS = target.name.split('.')[0].split('-')[0]
        if (NS === 'N') {
          Narray.push(NS)
        }
        if (NS === 'S') {
          Sarray.push(NS)
        }
        if (NS !== 'N' && NS !== 'S') {
          isNametrue = true
          continue
        }
        const first_num = target.name.split('.')[0].split('-')[1]
        const second_num = target.name.split('.')[0].split('-')[2]
        const imgType = target.name.split('.')[1]
        if (!/^([0][1-5])$/.test(first_num)) {
          isNametrue = true
          continue
        }
        if (!/^([0-2][0-9])$/.test(second_num)) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) === 0) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) > 20) {
          isNametrue = true
          continue
        }

        if (imgType !== 'jpg') {
          isNametrue = true
          continue
        }
      }
      if (isNametrue) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      if (Narray.length !== 100 || Sarray.length !== 100) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      that.uploadZip(that.saveFile, length)
    },
    // 720pro判断  648
    sevenTwozeropro(zip, length) {
      const that = this
      var isNametrue = false
      var Narray = []
      var Sarray = []
      that.savetargetName = []
      for (const name in zip.files) {
        const target = zip.files[name]
        that.savetargetName.push(target.name)
        const NS = target.name.split('.')[0].split('-')[0]
        if (NS === 'N') {
          Narray.push(NS)
        }
        if (NS === 'S') {
          Sarray.push(NS)
        }
        if (NS !== 'N' && NS !== 'S') {
          isNametrue = true
          continue
        }
        const first_num = target.name.split('.')[0].split('-')[1]
        const second_num = target.name.split('.')[0].split('-')[2]
        const imgType = target.name.split('.')[1]
        if (!/^([0][1-9])$/.test(first_num)) {
          isNametrue = true
          continue
        }
        if (!/^([0-3][0-9])$/.test(second_num)) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) === 0) {
          isNametrue = true
          continue
        }
        if (parseInt(second_num) > 36) {
          isNametrue = true
          continue
        }

        if (imgType !== 'jpg') {
          isNametrue = true
          continue
        }
      }
      if (isNametrue) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      if (Narray.length !== 324 || Sarray.length !== 324) {
        messageup({
          type: 'warning',
          showClose: false,
          message: '文件名格式不正确'
        })
        that.dialogVisible = false
        return
      }
      that.uploadZip(that.saveFile, length)
    },
    uploadZip(file, length) {
      const that = this
      that.zippercent = 0
      that.$newalioss
        .upload({
          file,
          folder: 'goodszip',
          progress: percent => {
            percent = ~~(percent * 100)
            that.num = (percent - that.zippercent) * (file.size / 1024) * 0.01
            that.zippercent = percent === 100 ? 99 : percent
          }
        })
        .then(({ relative, absolute }) => {
          // console.log(relative)
          // console.log(absolute)
          that.saveZipurl = absolute
          that._materialAdd(Number(length))
          // 调取一个接口this.zippercent = 100
        })
        .catch(msg => {
          that.zippercent = -1
        })
        .finally(e => {})
    },
    _materialAdd(length) {
      const that = this
      // console.log(that.savetargetName)
      const img_urlarr = that.savetargetName
      const img_urlobj = {}
      img_urlarr.forEach(item => {
        img_urlobj[item.substring(0, item.lastIndexOf('.'))] =
          that.saveZipurl + '/' + item
      })
      const params = {
        name: that.zipname,
        type: that.saveType.id,
        zip_url: that.saveZipurl,
        img_url: img_urlobj,
        xMax: that.savexMax,
        yMax: that.saveyMax,
        poster: '',
        poster_url: '',
        resoulute: that.saveResoulute
      }
      if (length === 72) {
        params.poster = '01'
        params.poster_url = that.saveZipurl + '01.jpg'
      } else if (length === 120) {
        params.poster = '00-01'
        params.poster_url = that.saveZipurl + '00-01.jpg'
      } else if (length === 360) {
        params.poster = '00-01'
        params.poster_url = that.saveZipurl + '00-01.jpg'
      } else if (length === 200) {
        params.poster = 'N-01-01'
        params.poster_url = that.saveZipurl + 'N-01-01.jpg'
      } else if (length === 648) {
        params.poster = 'N-01-01'
        params.poster_url = that.saveZipurl + 'N-01-01.jpg'
      }
      materialAdd(params).then(res => {
        if (res.status === 200) {
          that.zippercent = 100
        } else {
          that.$message.error(res.msg)
          that.zippercent = -1
        }
      })
    },
    closeDialog() {
      if (this.zippercent === -2 || this.zippercent === -1) {
        return
      }
      if (
        navigator.userAgent.indexOf('Firefox') !== -1 ||
        navigator.userAgent.indexOf('Chrome') !== -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
   100vw;
  height: 100vh;
  min-height: 500px;
  display: flex;
  .uploadbox {
    margin: 15vh auto 0;
  }
}
.el-upload__tip {
  text-align: center;
  padding-top: 10px;
}
.redtext {
  font-weight: 400;
  font-size: 12px;
  color: rgb(255, 56, 56);
  margin-top: 10px;
  margin-left: 50px;
}
.namebox {
  margin-left: 50px;
  display: flex;
  margin-top: 30px;
  padding-bottom: 50px;
  .left {
     250px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    margin-right: 20px;
  }
  .right {
    font-size: 14px;
    color: rgb(29, 30, 31);
  }
}
.el-icon-loading {
  color: rgb(0, 168, 112);
}
.el-icon-circle-check {
  color: rgb(0, 168, 112);
}
.el-icon-warning-outline {
  color: rgb(227, 77, 89);
}
.ml10 {
  margin-left: 10px;
}
</style>