<template>
  <div class="upLoadIamge">
      <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="myLoad"
      >
      <i class="el-icon-plus"
 
></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
let axios = require('axios')
export default {
  name: 'upLoadIamge',
  data () {
    
 
return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 自定義上傳的方式 作者：曾經的水哥 https://www.cnblogs.com/cengjingdeshuige/
 

    myLoad (param) {
      let file = param.file // 得到檔案的內容
      console.log(file)
      let index = file.name.indexOf('.')
      let nameEnd = file.name.substr(index)
      const ossApiUrl = '這個是獲取OSS簽名的後臺介面地址' // 獲取oss簽名的地址
      // 獲取oss簽名
      axios.post(ossApiUrl).then((data) => {
        if (data.status == 200 && data.data.code == 0) { //eslint-disable-line
          let json = data.data.data
          let ossUrl = json.host
          let nameStart = new Date().getTime() + '' + Math.ceil(Math.random() * 100)
          let name = '/' + nameStart + nameEnd
          let getUrl = json.host + '/' + json.dir + name // 上傳後的檔案地址
          let sendData = new FormData() // 上傳檔案的data引數
          sendData.append('OSSAccessKeyId', json.accessid)
          sendData.append('policy', json.policy)
          sendData.append('Signature', json.signature)
          sendData.append('keys', json.dir)
          sendData.append('key', json.dir + name)
          sendData.append('success_action_status', 200) // 指定返回的狀態碼
          sendData.append('type', 'image/jpeg')
          sendData.append('file', file)
          console.log(sendData)
          axios.post(ossUrl, sendData).then(() => {
            console.log('得到上傳到阿里雲的圖片地址：  ' + getUrl)
          })
        }
      })
    }
  },
  mounted () {

  }
}

</script>