<template>
  <div>
    <!-- <button>选择图片上传</button>  multiple 多选 accept:接受图片格式-->
    <label for="upload" class="choose-img" :class="{upLoading: isUploading}">选择图片上传</label>
    <input type="file" multiple id="upload"
    style="display:none" accept="image/*"
    @change="onchange" ref="file" :disabled="isUploading"
    >
    <p class="tip">一次可以选择多张图片，最多不超过9张（单张图片大小 1M）</p>
    <ul class="img-container">
      <li v-for="(item, index) in imgList" :key="index"
      :style="{background: `url(${item}) no-repeat center/contain`}"
      ></li>
    </ul>
  </div>
</template>

<script>
import OSS from 'ali-oss'
const ACCESSKEY = {
  ID: 'LTAI4G7RB4oTBHCYu6JEofaP',
  SECRET: 'TSofNQ020pScmNpL3zMuAoR4mbd7Le'
}
export default {
  data () {
    return {
      client: new OSS({
        region: 'oss-cn-beijing',
        bucket: 'imooc-es-vue-er',
        accessKeyId: ACCESSKEY.ID,
        accessKeySecret: ACCESSKEY.SECRET
      }),
      imgList: [], // 存放上传完成的图片的列表
      isUploading: false // 表示图片是否正在上传
    }
  },
  methods: {
    onchange () {
      // 获得dom结构 <input data-v-0ecd383b="" type="file" multiple="multiple" id="upload" accept="image/*" style="display: none;">
      // const inputDOM = this.$refs.file
      // console.log(this.$refs.file.files) 输出选择的dom
      // 可选链 多层dom结构
      const newFiles = this.$refs?.file?.files
      // 判断选择个数
      if (newFiles.length > 9) {
        alert('最多可以一次性选择九张图片')
        return false
      }
      const files = []
      // 验证图片大小是否大于1M (size)
      for (const file of newFiles) {
        // 把单位转化为M
        const size = file.size / 1024 / 1024
        if (size > 1) {
          alert('请选择1M的图片')
          return false
        }
        files.push(file)
      }
      this.uploadFilesByOSS2(files)
    },
    // 上传多图到阿里云oss
    uploadFilesByOSS (files) {
      this.isUploading = true
      const uploadRequest = []
      for (const file of files) {
        uploadRequest.push(
          new Promise((resolve, reject) => {
          // 上传文件的名称，上传文件本身
            this.client.put(`${Math.random()}-${file.name}`, file).then(res => {
              console.log(res)
              // 取到之前imgList的项 在和每次返回的url地址拼接成一个数组
              // 不能保证顺序
              // this.imgList = [...this.imgList, res.url]
              resolve(res.url)
            }).catch(err => {
              console.log(err)
              reject(err)
            })
          })
        )
      }
      // all 缺陷-》有一张上传失败了之后 会直接进入catch
      // Promise.all 全部上传之后的操作
      // allSettled 弥补了all的缺陷
      Promise.allSettled(uploadRequest).then(res => {
        console.log(res)
        const imgs = []
        // for of对于数组遍历的方法
        for (const item of res) {
          if (item.status === 'fulfilled') {
            imgs.push(item.value)
          }
        }
        // 图片可以直接按顺序执行
        this.imgList = imgs
        this.isUploading = false
      }).catch(err => {
        console.log(err)
      })
    },
    // 优化的方法 uploadFilesByOSS2
    // async / await
    async uploadFilesByOSS2 (files) {
      this.isUploading = true // 正在上传
      const imgs = []
      for (const file of files) {
        const result = await this.client.put(`${Math.random()}-${file.name}`, file)
        imgs.push(result.url)
      }
      this.imgList = imgs
      this.isUploading = false // 上传完成
    }
  }
}
</script>

<style scoped>
.choose-img{
  display: block;
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: rgb(43, 216, 115);
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.img-container > li{
    list-style: none;
    width: 150px;
    height: 100px;
    float: left;
    margin: 0 30px 30px 0;
    border: 1px solid #ccc;
}

.upLoading{
    background-color: #ccc;
    cursor: Default;
}
</style>