From e9b52cd1f4d5e805ae6b430074c3b4d69b0aa0ae Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 22 Mar 2022 09:11:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{upload_img4.vue => upload.vue}           |  39 ++--
 src/views/components/upload_cover.vue         | 133 ++++++++++++
 src/views/components/upload_img.vue           | 105 ---------
 src/views/components/upload_img2.vue          | 161 --------------
 src/views/components/upload_img3.vue          | 199 ------------------
 .../materialContent/materialList/index.vue    |  25 +--
 6 files changed, 163 insertions(+), 499 deletions(-)
 rename src/views/components/{upload_img4.vue => upload.vue} (87%)
 create mode 100644 src/views/components/upload_cover.vue
 delete mode 100644 src/views/components/upload_img.vue
 delete mode 100644 src/views/components/upload_img2.vue
 delete mode 100644 src/views/components/upload_img3.vue

diff --git a/src/views/components/upload_img4.vue b/src/views/components/upload.vue
similarity index 87%
rename from src/views/components/upload_img4.vue
rename to src/views/components/upload.vue
index 899e07e..7b509a9 100644
--- a/src/views/components/upload_img4.vue
+++ b/src/views/components/upload.vue
@@ -1,11 +1,22 @@
 <template>
   <div class="components_upload">
-    <!-- <input id="upFile" type="file" name="upFile" @change="changeFile($event)" /> -->
-    <el-button class="cont_upload_btn" round type="primary">上传</el-button>
-    <input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
-    <!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> -->
-    <!-- <el-progress :percentage="filePercent" />
-    {{ filePercent }} -->
+    <!-- 上传文件 -->
+    <div class="">
+      <el-button class="cont_upload_btn" round type="primary">上传</el-button>
+      <input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
+      <!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> -->
+      <!-- <el-progress :percentage="filePercent" />
+      {{ filePercent }} -->
+    </div>
+
+    <!-- 上传封面 -->
+    <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>
 
     <!-- 上传列表layer -->
     <div class="upload_layer">
@@ -122,14 +133,14 @@ export default {
         }
       }
 
-      this.uploadListVisible = true
-      this.fileData.push({
-        fileNames: this.fileNames,
-        formatType: this.formatType,
-        fileSize: this.fileSize,
-        filePercentTxt: this.filePercentTxt
-      })
-      console.log(this.fileData[0].filePercent)
+      // this.uploadListVisible = true
+      // this.fileData.push({
+      //   fileNames: this.fileNames,
+      //   formatType: this.formatType,
+      //   fileSize: this.fileSize,
+      //   filePercentTxt: this.filePercentTxt
+      // })
+      // console.log(this.fileData[0].filePercent)
     },
     getQiniuToken() {
       getQiniuToken().then(res => {
diff --git a/src/views/components/upload_cover.vue b/src/views/components/upload_cover.vue
new file mode 100644
index 0000000..bff7d53
--- /dev/null
+++ b/src/views/components/upload_cover.vue
@@ -0,0 +1,133 @@
+<template>
+  <!-- upload -->
+  <div class="upload_cover">
+    <!-- <el-upload
+      class="upload-demo"
+      drag
+      :action="upload_qiniu_url"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :on-error="handleError"
+      :before-upload="beforeAvatarUpload"
+      :data="qiniuData"
+    >
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <div v-else class="el-default">
+        <i class="el-icon-upload"></i>
+      </div>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
+    </el-upload> -->
+    <el-upload
+      :action="upload_qiniu_url"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :on-error="handleError"
+      :before-upload="beforeAvatarUpload"
+      :data="qiniuData"
+      list-type="picture-card"
+    >
+      <div class="avatar-uploader">
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt />
+        <div class="el-default">
+          <img src="@/assets/images/t-sc.png" alt />
+        </div>
+      </div>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
+    </el-upload>
+  </div>
+</template>
+<script>
+import { getQiniuToken } from '@/api/material/material'
+export default {
+  data() {
+    return {
+      imageUrl: '',
+      qiniuData: {
+        key: '',
+        token: ''
+      },
+      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
+      upload_qiniu_url: 'https://upload.qiniup.com/',
+      // 这是七牛云空间的外链默认域名
+      upload_qiniu_addr: 'qiniu.aiyxlib.com'
+    }
+  },
+  created() {
+    this.getQiniuToken()
+  },
+  methods: {
+    getQiniuToken() {
+      const _this = this
+      getQiniuToken().then(res => {
+        if (res.code == 200) {
+          this.qiniuData.token = res.data
+        } else {
+          _this.$message({
+            message: res.msg,
+            duration: 2000,
+            type: 'warning'
+          })
+        }
+      })
+    },
+    // 验证文件合法性
+    beforeAvatarUpload(file) {
+      this.qiniuData.key = file.name
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !')
+      }
+      if (!isLt2M) {
+        this.$message.error('图片大小不能超过 2MB !')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess: function(res, file) {
+      this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
+      console.log(this.imageUrl)
+      this.$message({
+        message: '上传成功',
+        duration: 2000,
+        type: 'warning'
+      })
+    },
+    handlePictureCardPreview(file) {
+      this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
+      this.dialogVisible = true
+    },
+    handleError: function(res) {
+      this.$message({
+        message: '上传失败',
+        duration: 2000,
+        type: 'warning'
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+/* .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_img.vue b/src/views/components/upload_img.vue
deleted file mode 100644
index eada5a7..0000000
--- a/src/views/components/upload_img.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<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
deleted file mode 100644
index 5b346eb..0000000
--- a/src/views/components/upload_img2.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<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
deleted file mode 100644
index 974f3fc..0000000
--- a/src/views/components/upload_img3.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-  <div class="upload">
-    <div id="video_container">
-      <!-- <div id="pickfiles">上传视频</div> -->
-      <div id="pickfiles"><el-button style="margin-top: 5px" type="primary" @click="initUploader">上传视频</el-button></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'
-import axios from 'axios'
-require('../../../static/dist/qiniu.min')
-// import { Uploader } from 'qiniup'
-// import { getQiniuToken } from '@/api/material/material'
-export default {
-  name: 'Qiniu',
-  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()
-      //   })
-      // 获取到凭证之后再将文件上传到七牛云空间
-      axios.get('http://192.168.99.84:7000/api/qiniu/uploadTokenCover', { params: params })
-        .then(res => {
-          this.token = res.data
-          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 7d4d4ab..7c55008 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -2,9 +2,7 @@
   <div>
     <div class="material_content">
       <div class="material_item cont_upload">
-        <div>
-          <Upload rel="upload" />
-        </div>
+        <Upload rel="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">
@@ -52,13 +50,7 @@
             <el-input v-model="form.name" style="width: 336px" />
           </el-form-item>
           <el-form-item v-if="formType !== 'JPG'" label="封面" prop="file">
-            <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>
+            <UploadCover />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -118,10 +110,11 @@
 
 <script>
 import { getMaterialList } from '@/api/material/material'
-import Upload from '../../components/upload_img4'
+import Upload from '../../components/upload'
+import UploadCover from '../../components/upload_cover'
 export default {
   name: 'MaterialList',
-  components: { Upload },
+  components: { Upload, UploadCover },
   props: {
     isMultiSelected: {
       type: Boolean,
@@ -360,12 +353,4 @@ export default {
   width: 128px;
   height: 120px;
 }
-.components_upload{
-  position: relative;
-}
-.cont_upload_btn{
-  position: absolute;
-  left: 0;
-  top: 0;
-}
 </style>