From d2d8f6e14a01e10a1278cea20388c7f3f3a5ff87 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 18 Mar 2022 17:31:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   8 +-
 src/api/material/material.js                  |   6 +
 src/views/components/upload_img.vue           | 105 ++++++++++
 src/views/components/upload_img2.vue          | 161 +++++++++++++++
 src/views/components/upload_img3.vue          | 187 ++++++++++++++++++
 .../materialContent/materialList/index.vue    |  22 ++-
 6 files changed, 478 insertions(+), 11 deletions(-)
 create mode 100644 src/views/components/upload_img.vue
 create mode 100644 src/views/components/upload_img2.vue
 create mode 100644 src/views/components/upload_img3.vue

diff --git a/.env.development b/.env.development
index 3ce420b..9f272b0 100644
--- a/.env.development
+++ b/.env.development
@@ -1,10 +1,16 @@
 ENV = 'development'
 
 # 本地接口地址
-VUE_APP_BASE_API = '/dev-api'
+#VUE_APP_BASE_API = '/dev-api'
+
+# 刘力本地服
 #VUE_APP_BASE_API  = 'http://192.168.99.103:7000'
 #VUE_APP_WS_API = 'ws://192.168.99.103:7000'
 
+# 许镇本地服
+VUE_APP_BASE_API  = 'http://192.168.99.84:7000'
+VUE_APP_WS_API = 'ws://http://192.168.99.84:7000'
+
 #VUE_APP_BASE_API  = 'http://192.168.99.207:7000'
 #VUE_APP_WS_API = 'ws://192.168.99.207:7000'
 
diff --git a/src/api/material/material.js b/src/api/material/material.js
index e8787ad..70a0ea3 100644
--- a/src/api/material/material.js
+++ b/src/api/material/material.js
@@ -7,3 +7,9 @@ export function getMaterialList(parameter) {
     data: parameter
   })
 }
+export function getQiniuToken() {
+  return request({
+    url: 'api/qiniu/uploadTokenCover',
+    method: 'get'
+  })
+}
diff --git a/src/views/components/upload_img.vue b/src/views/components/upload_img.vue
new file mode 100644
index 0000000..eada5a7
--- /dev/null
+++ b/src/views/components/upload_img.vue
@@ -0,0 +1,105 @@
+<template>
+  <!-- upload -->
+  <div class="upload">
+    <el-upload
+      class="avatar-uploader"
+      :action="domain"
+      :http-request="upqiniu"
+      :show-file-list="false"
+      :before-upload="beforeUpload"
+    >
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import { getQiniuToken } from '@/api/material/material'
+export default {
+  data() {
+    return {
+      imageUrl: '',
+      token: {},
+      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
+      domain: 'https://upload.qiniup.com/',
+      // 这是七牛云空间的外链默认域名
+      qiniuaddr: 'qiniu.aiyxlib.com'
+    }
+  },
+  methods: {
+    // 上传文件到七牛云
+    upqiniu(req) {
+      console.log(req)
+      const config = {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      }
+      let filetype = ''
+      if (req.file.type === 'image/png') {
+        filetype = 'png'
+      } else {
+        filetype = 'jpg'
+      }
+      // 重命名要上传的文件
+      const keyname = 'material' + Math.random() * 100 + '.' + filetype
+      // 从后端获取上传凭证token
+      getQiniuToken().then(res => {
+        console.log(res)
+        const formdata = new FormData()
+        formdata.append('file', req.file)
+        formdata.append('token', res.data)
+        formdata.append('key', keyname)
+        // 获取到凭证之后再将文件上传到七牛云空间
+        axios.post(this.domain, formdata, config).then(res => {
+          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
+          console.log(this.imageUrl)
+        })
+      })
+      // this.axios.get('/up/token').then(res => {
+
+      // })
+    },
+    // 验证文件合法性
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 10
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 10MB!')
+      }
+      return isJPG && isLt2M
+    }
+  }
+}
+</script>
+<style scoped>
+.upload {
+  width: 600px;
+  margin: 0 auto;
+}
+.avatar-uploader .el-upload {
+  border: 5px dashed #ca1717 !important;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
diff --git a/src/views/components/upload_img2.vue b/src/views/components/upload_img2.vue
new file mode 100644
index 0000000..5b346eb
--- /dev/null
+++ b/src/views/components/upload_img2.vue
@@ -0,0 +1,161 @@
+<template>
+  <div id="mef-m-authentication-apply">
+    <div class="apply-upload-item fr noMb">
+      <div class="photo-upload item-03" :class="{uploaded: userWorkPhoto}" @click="photoUpload('userWorkPhoto')">
+        <img :src="userWorkPhoto" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='" class="fit-cover-img" />
+        <span v-if="userWorkPhoto" class="delete-icon" @click.stop="clearPhotoUrl('userWorkPhoto')"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* function getQiniuToken() {
+  return Promise.resolve({'uptoken': 'xxx'});
+} */
+
+// c39eAF6CRLXTPcOp7YZWN47QG-R8GMdJwBtBQ1Eb:vQEKW6kSJvaMFOD6G0Fj1toohjE=:eyJzY29wZSI6ImFpeXVleGluZzoiLCJkZWFkbGluZSI6MTY0NzU3NjY4N30=
+
+/* c39eAF6CRLXTPcOp7YZWN47QG-R8GMdJwBtBQ1Eb:MZKUih1U9m0jKz57RwADJw02a9U=:eyJwZXJzaXN0ZW50UGlwZWxpbmUiOiJhaXl4bGliX3ZpZGVvLXBpcGUiLCJzY29wZSI6ImFpeXVleGluZyIsInBlcnNpc3RlbnRPcHMiOiJhdnRodW1iL20zdTgvbm9Eb21haW4vMS9zZWd0aW1lLzE1L3ZiLzQ0MGsvaGxzS2V5L2Z0em4xOWFpeXhsaWIyMDEvaGxzS2V5VXJsL2h0dHBzOi8vcWluaXUuYWl5eGxpYi5jb20vYWl4eWxpYndvcmQua2V5fHNhdmVhcy8iLCJkZWFkbGluZSI6MTY0NzU3NjcxOX0=*/
+import { getQiniuToken } from '@/api/material/material'
+export default {
+  name: 'Upload',
+  data() {
+    return {
+      userWorkPhoto: ''
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    clearPhotoUrl(urlName) {
+      this[urlName] = ''
+    },
+    photoUpload(type) {
+      const ipt = document.createElement('input')
+      ipt.setAttribute('type', 'file')
+      ipt.setAttribute('accept', 'image/*')
+      ipt.style.width = 0
+      ipt.style.height = 0
+      ipt.addEventListener('change', async() => {
+        const [file] = ipt.files
+        const base64Img = await this.fileToBase64(file)
+        const url = await this.uploadBase64(base64Img)
+        this.userWorkPhoto = url
+        document.body.removeChild(ipt)
+      })
+      document.body.appendChild(ipt)
+      ipt.click()
+    },
+    uploadBase64(base64Img) {
+      return new Promise((resolve) => {
+        getQiniuToken()
+          .then(res => {
+            const key = 'qiniu.aiyxlib.com' + this.uuid() + '.jpg'
+            const pic = base64Img.split(',')[1]
+            // const url = 'https://upload.qiniup.com/' + window.btoa(key) // 非华东空间需要根据注意事项 1 修改上传域名
+            const url = 'https://upload.qiniup.com/' // 非华东空间需要根据注意事项 1 修改上传域名
+            const xhr = new XMLHttpRequest()
+            xhr.onreadystatechange = () => {
+              if (xhr.readyState == 4) {
+                resolve(
+                  'qiniu.aiyxlib.com' + JSON.parse(xhr.responseText).key
+                )
+              }
+            }
+            xhr.open('POST', url, true)
+            xhr.setRequestHeader('Content-Type', 'application/octet-stream')
+            xhr.setRequestHeader('Authorization', 'UpToken ' + res.data)
+            xhr.send(pic)
+            // 获取到凭证之后再将文件上传到七牛云空间
+          })
+          .catch(console.error)
+      })
+    },
+    fileToBase64(file) {
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        // 传入一个参数对象即可得到基于该参数对象的文本内容
+        reader.readAsDataURL(file)
+        reader.onload = function(e) {
+          // target.result 该属性表示目标对象的DataURL
+          resolve(e.target.result)
+        }
+      })
+    },
+    uuid(len, radix) {
+      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+      const uuid = []
+      let i
+      radix = radix || chars.length
+      if (len) {
+        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
+      } else {
+        let r
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = ''
+        uuid[14] = '4'
+        for (i = 0; i < 36; i++) {
+          if (!uuid[i]) {
+            r = 0 | Math.random() * 16
+            uuid[i] = chars[i == 19 ? r & 0x3 | 0x8 : r]
+          }
+        }
+      }
+      return uuid.join('')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  #mef-m-authentication-apply{
+    .apply-upload-item{
+      width: 132px;
+      margin-bottom: 30px;
+      text-align: center;
+      &.noMb{
+        margin-bottom: 0;
+      }
+      .photo-upload {
+        width: 132px;
+        height: 96px;
+        position: relative;
+        margin-bottom: 10px;
+        &.item-03{
+          // background: top / 100% url(~@/assets/images/authentication/upload_workCard.png)
+          // no-repeat;
+        }
+        &.uploaded{
+          background: none;
+        }
+        img{
+          width: 85px;
+          height: 85px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%,-50%);
+        }
+        .delete-icon{
+          width: 16px;
+          height: 16px;
+          // background: top / 100% url(~@/assets/images/common/icon-del.png)
+          //   no-repeat;
+          border-radius: 0;
+          top: -8px;
+          right: -8px;
+          position: absolute;
+          i {
+            display: none;
+          }
+        }
+      }
+      .apply-name{
+        font-size: 14px;
+        font-weight: bold;
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/src/views/components/upload_img3.vue b/src/views/components/upload_img3.vue
new file mode 100644
index 0000000..f6ef1e3
--- /dev/null
+++ b/src/views/components/upload_img3.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="upload">
+    <div id="video_container">
+      <div id="pickfiles">上传视频</div>
+      <div>
+        <div class="upload_info">
+          <b>共{{ fileSize }}MB | 已上传{{ fileLoaded }} | 上传速度{{ fileSpeed }}/s</b>
+        </div>
+        <div>
+          <b>上传进度：{{ filePercent }}%</b>
+        </div>
+        <button @click="pauseUpload">暂停上传</button>
+        <button @click="continueUpload">继续上传</button>
+      </div>
+    </div>
+    <div v-if="coverPic" class="cover-pic">
+      <img :src="coverPic" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+// import { apis, chttp } from '@/libs/interfaces'
+import * as qiniu from 'qiniu-js'
+export default {
+  data() {
+    return {
+      fileSize: 0,
+      fileLoaded: 0,
+      fileSpeed: 0,
+      filePercent: 0,
+      uploader: null,
+      token: '',
+      filename: '',
+      hash: '',
+      resFileName: '',
+      coverPic: '',
+      phoneType: null
+    }
+  },
+  mounted() {
+    this.phoneType = this.getPhoneType()
+    this.getToken(() => {
+      this.initUploader()
+    })
+  },
+  methods: {
+    pauseUpload() {
+      this.uploader.stop()
+    },
+    continueUpload() {
+      this.uploader.start()
+    },
+    toDecimal(size) {
+      size = size / 1024 / 1024
+      var f = parseFloat(size)
+      if (isNaN(f)) {
+        return
+      }
+      f = Math.round(size * 10) / 10
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + 1) {
+        s += '0'
+      }
+      return s
+    },
+    initUploader() {
+      const plupload = window.plupload
+      const Qiniu = global.Qiniu
+      const _this = this
+      // domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取
+      const isIphone5 = this.phoneType === '5'
+      // uploader为一个plupload对象，继承了所有plupload的方法
+      this.uploader = Qiniu.uploader({
+        runtimes: 'html5,flash,html4', // 上传模式，依次退化
+        browse_button: 'pickfiles', // 上传选择的点选按钮，必需
+        uptoken: this.token, // uptoken是上传凭证，由其他程序生成
+        get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken
+        bucket_name: 'common-web', // 空间名
+        unique_names: false, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
+        save_key: false, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
+        domain: 'https://upload.qiniup.com/', // bucket domain eg:http://qiniu-plupload.qiniudn.com/
+        container: 'video_container', // 上传区域DOM ID，默认是browser_button的父元素
+        max_file_size: '10mb', // 最大文件体积限制
+        dragdrop: false, // 开启可拖曳上传
+        drop_element: 'video_container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
+        chunk_size: '4mb', // 分块上传时，每块的体积
+        max_retries: 3, // 上传失败最大重试次数
+        auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
+        multi_selection: !isIphone5,
+        init: {
+          Key: function(up, files) {
+            return _this.filename
+          },
+          FilesAdded: function(up, files) {
+            plupload.each(files, function(file) {
+              // 文件添加进队列后，处理相关的事情
+              console.log('FilesAdded')
+              _this.fileSize = _this.toDecimal(file.size)
+            })
+          },
+          BeforeUpload: function(up, file) {
+            console.log('BeforeUpload')
+          },
+          ChunkUploaded: function(up, file, info) {
+            console.log('ChunkUploaded')
+          },
+          UploadProgress: function(up, file) {
+            // 每个文件上传时，处理相关的事情
+            _this.filePercent = parseInt(file.percent)
+            _this.fileLoaded = plupload.formatSize(file.loaded).toUpperCase()
+            _this.fileSpeed = plupload.formatSize(file.speed).toUpperCase()
+          },
+          FileUploaded: function(up, file, info) {
+            console.log('FileUploaded')
+            const response = JSON.parse(info.response)
+            _this.hash = response.hash
+            _this.resFileName = response.key
+            _this.coverPic = 'qiniu.aiyxlib.com' + response.key + '?vframe/png/offset/7/w/480'
+          },
+          Error: function(up, err, errTip) {
+            // 上传出错时，处理相关的事情
+            _this.$toast('Error =')
+            _this.$toast(err)
+            _this.$toast('errTip =')
+            _this.$toast(errTip)
+          },
+          UploadComplete: function() {
+            // 队列文件处理完毕后，处理相关的事情
+            _this.$toast('UploadComplete')
+          }
+        }
+      })
+    },
+    getToken(callback) {
+      this.filename = 'webvideo/' + new Date().getTime() + '.mp4'
+      const params = {
+        filename: this.filename
+      }
+      chttp.get(apis.qiniuToken, { params: params })
+        .then(res => {
+          this.token = res.token
+          callback()
+        })
+    },
+    getPhoneType() {
+      // 正则,忽略大小写
+      var patternPhone = new RegExp('iphone', 'i')
+      var patternAndroid = new RegExp('Android', 'i')
+      var userAgent = navigator.userAgent.toLowerCase()
+      var isAndroid = patternAndroid.test(userAgent)
+      var isIphone = patternPhone.test(userAgent)
+      var phoneType = 'phoneType'
+      if (isAndroid) {
+        var zhCnIndex = userAgent.indexOf('-')
+        var spaceIndex = userAgent.indexOf('build', zhCnIndex + 4)
+        var fullResult = userAgent.substring(zhCnIndex, spaceIndex)
+        phoneType = fullResult.split('')[1]
+      } else if (isIphone) {
+        // 6   w=375    6plus w=414   5s w=320     5 w=320
+        var wigth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+        if (wigth > 400) {
+          phoneType = 'iphone6 plus'
+        } else if (wigth > 370) {
+          phoneType = 'iphone6'
+        } else if (wigth > 315) {
+          phoneType = '5'
+        } else {
+          phoneType = 'iphone 4s'
+        }
+      } else {
+        phoneType = '您的设备太先进了'
+      }
+      return phoneType
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
+
diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue
index 7f52a14..dae89b7 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -3,13 +3,14 @@
     <div class="material_content">
       <div class="material_item cont_upload">
         <el-button class="cont_upload_btn" round type="primary">上传</el-button>
-        <el-upload action="#" list-type="picture-card" :auto-upload="false">
-          <!-- <i slot="default" class="el-icon-plus"></i> -->
+        <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
+           <i slot="default" class="el-icon-plus"></i>
           <img src="@/assets/images/t-sc.png" alt />
           <div slot="file" slot-scope="{file}">
             <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
           </div>
-        </el-upload>
+        </el-upload> -->
+        <Upload />
         <el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button>
       </div>
       <div v-for="item in materialFolders" :key="item.id" class="material_item folder">
@@ -27,10 +28,10 @@
         :class="['material_item', 'item_cont', { 'item_multi': contentIds.includes(item.id) }]"
       >
         <img v-if="item.img_path" :src="item.img_path" alt />
-        <div v-if="item.type == 'audio'" class="radio_img"></div>
+        <div v-if="item.type == 2" class="radio_img"></div>
         <div class="item_format">
           <span class="item_type">{{ item.material_type }}</span>
-          <span v-if="item.material_type !== 'JPG'" class="item_time">03:00</span>
+          <span v-if="item.material_type !== 0" class="item_time">03:00</span>
         </div>
         <div class="file_name">{{ item.material_name }}</div>
         <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span>
@@ -84,9 +85,9 @@
         height="384px"
       >
         <!-- :status="percentage === 100 ? undefined : 'success'" -->
-        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
-          <el-table-column align="center" prop="name" label="文件名" />
-          <el-table-column align="center" prop="type" label="类型" />
+        <el-table :data="materialFolders" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="updateTime" label="文件名" />
+          <!-- <el-table-column align="center" prop="type" label="类型" />
           <el-table-column align="center" prop="size" label="大小" />
           <el-table-column align="center" prop="status" label="状态">
             <template>
@@ -115,7 +116,7 @@
                 @click="handleRecord(scope.$index, scope.row)"
               >删除</el-button>
             </template>
-          </el-table-column>
+          </el-table-column> -->
         </el-table>
         <div class="upload_list_right">
           <el-upload
@@ -181,9 +182,10 @@
 
 <script>
 import { getMaterialList } from '@/api/material/material'
+import Upload from '../../components/upload_img'
 export default {
   name: 'MaterialList',
-  components: {},
+  components: { Upload },
   props: {
     isMultiSelected: {
       type: Boolean,