缩略图不显示

9d815ae5 · Your Name · 8a16c63b · 9d815ae5 · 9d815ae5 · 9d815ae5
Commit 9d815ae5 authored Jun 16, 2021 by Your Name
7 changed files
--- a/src/config/httpServer.js
+++ b/src/config/httpServer.js
 /**
 * Created by supervisor on 2017/11/3.
 */
 import axios from 'axios'
 import { Message, MessageBox, Loading } from 'element-ui';
 import router from '../router'
 import { baseUrl } from './env'
 import MyLocalStorage from './myLocalStorage'
 import { loginOut } from './loginOut'
 //axios 拦截器 请求时的拦截
 axios.interceptors.request.use(config => {
  // 发送请求之前做一些处理
  // config.headers = {
  //   'Content-Type': 'application/json'
  // };
  return config
 }, error => {
  // 当请求异常时做一些处理
  return new Promise.reject(error)
 })
 // 响应时拦截
 axios.interceptors.response.use(response => {
  // 返回响应时做一些处理
  return response
 }, error => {
  // 当响应异常时做一些处理
  return Promise.resolve(error.response)
 })
 function errorState(status, data) {
  if (data.resultCode == '1109') {
    loginOut()
    MessageBox.alert('您的登录过期，请重新登录!', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        router.push({ path: '/', query: { redirect: router.history.current.fullPath } })
      }
    });
  } else if (status === 401) {
    MessageBox.alert('您的用户权限已被禁用，请联系管理员!', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        //这个时候点击确定后清除用户信息
        localStorage.removeItem('backToken')
        localStorage.removeItem('userId')
        router.push({ path: '/', query: { redirect: router.history.current.fullPath } })
      }
    });
  } else if (status === 500 && data.message.indexOf("not have permission") !== -1) {
    Message.error("抱歉，你无权访问该页面!")
  } else if (!data) {
    Message.error("网络出小差咯~")
  }
 }
 function successState(res) {
 }
 const httpServer = (opts, data, file, timeout) => {
  //如果是不需要登录就可以访问的接口 需要设置opts.open
  let Public = {} //公共参数
  let httpDefaultOpts = {
    method: opts.method,
    url: baseUrl + opts.url,
    timeout: timeout ? timeout : 10800000,
    params: Object.assign(Public, data),
    data: data,
    headers: opts.headers || {},
    responseType: opts.responseType || '' 
  };
  httpDefaultOpts.headers["Access-control-Allow-Origin"] = "*";
  httpDefaultOpts.headers["Access-Control-Allow-Headers"] = "content-type,x-requested-with";
  let authToken = "";
  if (opts.authType && opts.authType != "") {
    // Authorization
    if (opts.authType === "back") {
      authToken = localStorage.getItem('backToken');
    } else if (opts.authType === "front") {
      authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token');
    }
    httpDefaultOpts.headers["Authorization"] = authToken
  }
  if (opts.method === 'get') {
    delete httpDefaultOpts.data
    httpDefaultOpts.params.timestamp_static = new Date().getTime();
  } else {
    delete httpDefaultOpts.params
    if (file) {
      httpDefaultOpts.data = data;
    }
  }
  let promise = new Promise(function (resolve, reject) {
    let loadingInstance = Loading.service({
      fullscreen: true,
      lock: true,
      background: 'rgba(0,0,0,.5)',
      text: 'Loading',
      spinner: 'el-icon-loading'
    })
    // let markIndex = setTimeout(function () {
    //   loadingInstance.close();
    // }, 10000)
    axios(httpDefaultOpts).then((res) => {
      // console.log(res)
      if (res.data) {
        loadingInstance.close();
        // clearTimeout(markIndex)
      }
      if (res.data.resultCode == '1109' && localStorage.getItem('backToken')) {
        //清除用户信息
        errorState(res.status, res.data)
      } else {
        successState(res)
        resolve(res)
      }
    }).catch((response) => {
      loadingInstance.close();
      clearTimeout(markIndex)
      console.log("catch")
      if (response && response.response && response.response.status && response.response.data) {
        errorState(response.response.status, response.response.data)
      }
      reject(response)
      if (response.response.data) {
        if (response.response.data.message) {
          Message.error(response.response.data.message)
        } else {
          Message.error("操作失败!")
        }
      }
    })
  })
  return promise
 }
 export default httpServer
--- a/src/page/content/components/uploadVue/uploadAudio.vue
+++ b/src/page/content/components/uploadVue/uploadAudio.vue
 <template>
 <div>
  <!-- {{fileList}} -->
  <el-upload
    ref="upload"
    accept=".mp3,.aac,.wma,.rm,.flac,.ogg,"
    :multiple="true"
    :http-request="uploadFile"
    :file-list="fileList"
    action
    :auto-upload="false"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove"
  >
    <i class="el-icon-plus fileUpload"></i>
  </el-upload>
   <el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button>
 </div>
 </template>
 <script>
 export default {
  props:{
    fileList:{
      type:Array,
      default:[]
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      loading:false,
      filedata: [],
      fileArr: [],
    };
  },
  mounted(){
    // console.log("uploadAudio",this.fileList)
  },
  methods: {
     handleRemove(file, fileList) {
        // console.log(fileList,fileList.map(item=>item.id),'1111')
        // return this.$confirm(`确定移除 ${ file.name }？`);
        this.$emit('audioList',fileList.map(item=>item.id))
      },
    submitUpload() {
       const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      // this.loading = true
        this.filedata = new FormData()  //  用FormData存放上传文件
        this.$refs.upload.submit()  // 会循环调用uploadFile方法，多个文件调用多次
        let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/audio/upload",
            authType: this.backToken
          },
          this.filedata
        )
        .then(res => {
          let resData = res.data;
-          console.log(res)
+          // console.log(res)
           loading.close();
          //  this.loading = false
          if (resData.resultCode == "200") {
            _this.$message.success('上传成功！')
            const data = resData.data.fileList
            let newArray = data.map((item) => item.id)
            let editArray =[]
            if(this.fileList.length){
              editArray = this.fileList.map(item=>item.id)
            }
            this.$emit('audioList', [...newArray,...editArray])
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });
    },
    uploadFile(file) {
         this.filedata.append('file', file.file)
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 / 1024 < 1;
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 1GB!");
      }
      return isLt5M;
      //  var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      //    const extension = (testmsg === 'mp3')||(testmsg === 'aac')||(testmsg === 'wma')||(testmsg === 'rm')||(testmsg === 'flac')||(testmsg === 'ogg')
      //    if(!extension){
      //      this.$message({
      //        message:"上传文件只能是mp3，aac,wma,rm,flac,ogg,格式！",
      //        type:'error'
      //      })
      //    }
      //    return extension;
    }
  }
 };
 </script>
 <style>
 .el-upload .fileUpload {
  width: 148px;
  height: 148px;
  line-height: 148px!important;
  margin: 0 auto;
  border: 1px dashed #c0ccda;
  font-size: 24px;
  font: #ccc;
 }
 </style>
--- a/src/page/content/components/uploadVue/uploadFile.vue
+++ b/src/page/content/components/uploadVue/uploadFile.vue
 <template>
 <div>
  <el-upload
    ref="upload"
    accept=".mp4,.flv,.mpeg,.mpg,.mov"
    :multiple="true"
    :http-request="uploadFile"
    :file-list="fileList"
    action
    :auto-upload="false"
    :before-upload="beforeAvatarUpload"
  >
    <i class="el-icon-plus fileUpload"></i>
  </el-upload>
   <el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button>
 </div>
 </template>
 <script>
 export default {
   props:{
    fileList:{
      type:Array,
      default:[]
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      loading:false,
      filedata:[],
      fileArr: [],
      fileList:[],
    //   fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
     openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
    submitUpload() {  // 导入
    // this.openFullScreen2()
     const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    // this.loading = true
        let tempData =  this.filedata
        this.filedata = new FormData()  //  用FormData存放上传文件
        this.$refs.upload.submit()  // 会循环调用uploadFile方法，多个文件调用多次
         let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/video/content/upload",
            authType: this.backToken
          },
          this.filedata
        )
        .then(res => {
          let resData = res.data;
-          console.log(res)
+          // console.log(res)
          loading.close();
          // this.loading = false
          if (resData.resultCode == "200") {
             _this.$message.success('上传成功！')
            const data = resData.data.fileList;
            let newArray = data.map((item) => item.id);
            let editArray =[]
            if(this.fileList.length){
              editArray = this.fileList.map(item=>item.id)
            }
            this.$emit("videoList", [...newArray,...editArray]);
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });
    },
    uploadFile(file) {
-         console.log(file)
+        //  console.log(file)
         this.filedata.append('file', file.file)
    },
    beforeAvatarUpload(file) {
      const isLt10G = file.size / 1024 / 1024 / 1024 < 10;
      if (!isLt10G) {
        this.$message.error("上传文件大小不能超过 10GB!");
      }
      return isLt10G;
    }
  }
 };
 </script>
 <style>
 .el-upload .fileUpload {
  width: 148px;
  height: 148px;
  line-height: 148px!important;
  margin: 0 auto;
  border: 1px dashed #c0ccda;
  font-size: 24px;
  font: #ccc;
 }
 </style>
--- a/src/page/content/components/uploadVue/uploadFolder.vue
+++ b/src/page/content/components/uploadVue/uploadFolder.vue
 <template>
  <el-form enctype="multipart/form-data">
    选择多文件：
    <input type="file" name="files" multiple="multiple" @change="getFiles($event)" />
    <br />选择文件夹：
    <input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory />
    <br />
    <ul class="el-upload-list el-upload-list--text">
      <li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i">
        {{item.name}}
        <span>
          <el-button size="mini" type="text">
            <i @click="remove(item)" class="el-icon-close"></i>
          </el-button>
        </span>
      </li>
    </ul>
    <el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button>
  </el-form>
 </template>
 <script>
 import axios from "axios";
 export default {
  name: "UploadFileVue",
   props:{
    fileList:{
      type:Array,
-      default:[]
+      default:() => []
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      files: [
      ]
    };
  },
  watch: {
    fileList(newName, oldName) {
-      console.log(newName)
+      // console.log(newName)
      this.files = newName
      // ...
    }
  },
  computed: {
    headers() {
      return {
        Authorization: localStorage.getItem("backToken") || ""
      };
    }
  },
  methods: {
    remove(data) {
      const children = this.files;
      const index = children.findIndex(d => d.name === data.name);
      children.splice(index, 1);
-      console.log(this.files,'111')
+      // console.log(this.files,'111')
      this.$emit("videoList", this.files.map(item=>item.id));
    },
    getFiles: function(event) {
-      console.log(event);
+      // console.log(event);
      var files = event.target.files;
      for (var i = 0; i < files.length; i++) {
        this.files.push(files[i]);
      }
-      console.log(this.files, "--");
+      // console.log(this.files, "--");
    },
    upload: function() {
        const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
-      console.log(this.files);
+      // console.log(this.files);
      var formData = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        formData.append("file", this.files[i]);
      }
-      console.log(formData);
+      // console.log(formData);
      let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/video/content/upload",
            authType: this.backToken
          },
          formData
        )
        .then(res => {
           loading.close();
          let resData = res.data;
-          console.log(res);
+          // console.log(res);
          if (resData.resultCode == "200") {
            _this.$message.success("上传成功！");
            const data = resData.data.fileList;
            let newArray = data.map((item) => item.id);
            let editArray =[]
            if(this.files.length){
              editArray = this.files.map(item=>item.id)
            }
            this.$emit("videoList", [...newArray,...editArray]);
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });
    }
  }
 };
 </script>
 <style>
 </style>
\ No newline at end of file
--- a/src/page/content/components/uploadVue/uploadImg.vue
+++ b/src/page/content/components/uploadVue/uploadImg.vue
@@ -9,7 +9,7 @@
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :headers="headers"
-      :file-list="fileList"
+      :file-list="fileShowList"
      :limit="1"
      :multiple ="false"
    >
@@ -24,19 +24,24 @@
 <script>
 export default {
-  // props:{
+  props:{
-    // fileList:{
+    fileList:{
-    //   type: Array,
+      type: Array,
-    //   default: () => [],
+      default: () => [],
-    // }, 
+    }, 
-  // },
+  },
  data() {
    return {
-      fileList: [],
+      fileShowList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      imageUrl:"",
    };
+  },
+   watch: {
+    fileList(val) {
+      this.fileShowList = val;
+    }
  },
  computed: {
    headers() {
@@ -45,7 +50,7 @@ export default {
      };
    },
    uploadDisabled:function() {
-        return (this.fileList.length>0)||this.imageUrl
+        return (this.fileShowList.length>0)||this.imageUrl
    },
  },
  methods: {
@@ -61,7 +66,7 @@ export default {
    handleRemove(file, fileList) {
      this.$emit("imgUrl", "");
      this.imageUrl=""
-      this.fileList=[]
+      this.fileShowList=[]
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
@@ -72,7 +77,7 @@ export default {
        name: "",
        url: cover,
      };
-      this.fileList = [file]
+      this.fileShowList = [file]
    },
  },
 };

--- a/src/page/content/components/uploadVue/uploadQrcode.vue
+++ b/src/page/content/components/uploadVue/uploadQrcode.vue
@@ -67,7 +67,7 @@ export default {
    },
    handleRemove(file, fileList) {
-      console.log(file, fileList);
+      // console.log(file, fileList);
      this.$emit("qrcodeUrl", "");
      this.imageUrl=""
      this.fileList=[]

--- a/src/page/content/video/content/add.vue
+++ b/src/page/content/video/content/add.vue