瀏覽代碼

爆款视频库已提测

朱鑫波 3 年之前
父節點
當前提交
fcb7b90c85
共有 3 個文件被更改,包括 3454 次插入2 次删除
  1. 342 0
      src/views/modules/material/comment/uploadFilePopilar.vue
  2. 3110 0
      src/views/modules/material/videoPopular.vue
  3. 2 2
      vue.config.js

+ 342 - 0
src/views/modules/material/comment/uploadFilePopilar.vue

@@ -0,0 +1,342 @@
+<style></style>
+<style lang="scss" scoped></style>
+<template>
+    <div class="upload-file">
+        <a-upload
+            name="file"
+            :multiple="multiple"
+            list-type="picture-card"
+            class="avatar-uploader"
+            action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
+            :before-upload="beforeUpload"
+            @change="handleChange"
+            :accept="uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/jpg' : 'mp4')"
+            :file-list="fileList"
+            :remove="removeFile"
+            @preview="handlePreview"
+            :disabled="loadingElse || disabled"
+        >
+            <div v-if="fileList.length < fileCount || fileList.length < 1">
+                <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
+                <div class="ant-upload-text">点击上传</div>
+            </div>
+        </a-upload>
+        <div style="color: red" v-if="sizeCheck">
+            {{ uploadType == 'image' ? '请上传jpg格式的图片,并且大小在2m之内' : '请上传mp4格式,大小在100m之内' }}
+        </div>
+        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+            <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
+            <video :src="previewImage" v-else style="width: 100%" controls="controls">
+                您的浏览器不支持 video 标签。
+            </video>
+        </a-modal>
+    </div>
+</template>
+
+<script>
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+import { mapGetters } from 'vuex'
+import moment from 'moment'
+
+import BMF from 'browser-md5-file'
+
+import qs from 'qs'
+var COS = require('cos-js-sdk-v5')
+var cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
+})
+var i = 0
+const oneKB = 1024
+
+function getBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = (error) => reject(error)
+    })
+}
+export default {
+    name: 'upload-file',
+    components: {},
+    props: {
+        uploadType: {
+            //上传类型  值为  image/video,同时目录名称也是这样
+            type: String,
+            default() {
+                return 'image'
+            },
+        },
+        multiple: {
+            // true 可以批量上传  false 不可以
+            type: Boolean,
+            default() {
+                return true
+            },
+        },
+        fileCount: {
+            //最大上传数量
+            type: Number,
+            default() {
+                return 10
+            },
+        },
+        checkFile: {
+            //返回promise方法,判读文件是否上传过,进行上传拦截
+            type: Function,
+            default() {
+                return Promise.resolve()
+            },
+        },
+        disabled: {
+            type: Boolean,
+            default() {
+                return false
+            },
+        },
+        value: {
+            required: true,
+            default() {
+                return ''
+            },
+        },
+        size: {
+            type: Number,
+            default() {
+                if (this.sizeCheck) {
+                    if (this.uploadType == 'image') {
+                        return 2048
+                    } else {
+                        return 102400
+                    }
+                }
+            },
+        },
+        sizeCheck: {
+            type: Boolean,
+            default() {
+                return true
+            },
+        },
+        onOversize: {
+            type: Function,
+            default() {
+                alert(`请选择${this.size}KB内的文件!`)
+            },
+        },
+    },
+    data() {
+        return {
+            fileList: [],
+            loadingElse: false,
+            imageUrl: '',
+            percent: 0,
+            previewVisible: false,
+            previewImage: '',
+        }
+    },
+    filters: {},
+    computed: {},
+    mounted() {},
+    watch: {
+        //    fileListAll
+        value: {
+            immediate: true,
+            handler(n, o) {
+                this.$nextTick(() => {
+                    if (this.fileList && this.fileList.length == 0) {
+                        if (typeof n == 'object') {
+                            this.fileList = n.map((item, index) => {
+                                return {
+                                    uid: index + 1,
+                                    name: index + 1,
+                                    status: 'done',
+                                    url: item,
+                                }
+                            })
+                        } else {
+                            if (n === '') {
+                                this.fileList = []
+                            } else {
+                                this.fileList = []
+                                var data = {
+                                    uid: 1,
+                                    name: '回显',
+                                    status: 'done',
+                                    url: n,
+                                }
+                                this.fileList.push(data)
+                            }
+                        }
+                    } else {
+                        if (n.length == 0 || n == '') {
+                            this.clearAll()
+                        }
+                    }
+                })
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        handleCancel() {
+            closeAllVideoFun()
+            this.previewVisible = false
+        },
+        handleChange(info) {
+            if (info.file.status === 'uploading') {
+                this.loading = true
+                return
+            }
+            if (info.file.status === 'done') {
+                // Get this url from response in real world.
+                getBase64(info.file.originFileObj, (imageUrl) => {
+                    this.imageUrl = imageUrl
+                    this.loading = false
+                })
+            }
+        },
+        removeFile(file) {
+            // console.log(file)
+            var index = this.fileList.findIndex((v) => v.uid === file.uid)
+            this.fileList.splice(index, 1)
+            this.$emit('removeUpload', file)
+        },
+        async handlePreview(file) {
+            if (!file.url && !file.preview) {
+                file.preview = await getBase64(file.originFileObj)
+            }
+            this.previewImage = file.url || file.preview
+            this.previewVisible = true
+        },
+        beforeUpload(file) {
+            this.percent = 0
+            this.loadingElse = true
+            const fileOvesize = file.size > this.size * oneKB
+            // console.log(fileOvesize)
+            if (fileOvesize && this.sizeCheck) {
+                this.onOversize()
+                this.loadingElse = false
+                return
+            } else {
+                this.checkFile(file)
+                    .then((res) => {
+                        this.cosUpload(file)
+                    })
+                    .catch(() => {
+                        this.loadingElse = false
+                    })
+                return new Promise(function (resolve, reject) {
+                    reject()
+                })
+            }
+        },
+        clearAll() {
+            this.fileList = []
+        },
+        cosUpload(file) {
+            var that = this
+            let date = new Date()
+            let y = date.getFullYear()
+            let MM = date.getMonth() + 1
+            MM = MM < 10 ? '0' + MM : MM
+            let d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var timeElse = new Date().getTime()
+            var arr = file.name.split('.')
+
+            var str = ''
+            for (let i = 0; i < arr.length; i++) {
+                if (i == arr.length - 1) {
+                } else {
+                    if (i == arr.length - 2) {
+                        str += arr[i]
+                    } else {
+                        str += arr[i] + '.'
+                    }
+                }
+            }
+            // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
+            cos.putObject(
+                {
+                    Bucket: 'media-1301855440',
+                    /* 必须 */
+                    Region: 'ap-chongqing',
+                    /* 存储桶所在地域,必须字段 */
+                    Key:
+                        '/external-videos/' +
+                        y +
+                        '' +
+                        MM +
+                        '' +
+                        d +
+                        '/' +
+                        str +
+                        '-' +
+                        timeElse +
+                        '.' +
+                        arr[arr.length - 1],
+                    /* 必须 */
+                    StorageClass: 'STANDARD',
+                    Body: file, // 上传文件对象
+                    onProgress: function (progressData) {
+                        //进度条方法
+
+                        that.percent = progressData.percent * 100
+                    },
+                    onTaskReady: function (tid) {
+                        // console.log('onTaskReady', tid);
+                    },
+                    onTaskStart: function (info) {
+                        //开始上传
+                        // console.log('onTaskStart', info);
+                    },
+                },
+                function (err, data) {
+                    if (err) {
+                        that.loadingElse = false
+                        that.$message.error('上传失败!!!' + err)
+                        return
+                    }
+                    // alert('成功')
+                    that.loadingElse = false
+                    if (that.fileList.length < that.fileCount) {
+                        that.fileList.push({
+                            uid: file.name,
+                            name: file.name,
+                            status: 'done',
+                            url: '//' + data.Location,
+                        })
+
+                        // that.$emit('overUpload', that.fileList.map(item => {
+                        //                 return item.url
+                        //               }))
+                        that.$emit('overUpload', that.fileList)
+
+                        if (that.multiple) {
+                            let urlList = that.fileList.map((item) => {
+                                return item.url
+                            })
+
+                            that.$emit('update:value', urlList)
+                        } else {
+                            that.$emit(
+                                'update:value',
+                                that.fileList.map((item) => {
+                                    return item.url
+                                })[0]
+                            )
+                        }
+                    } else {
+                        that.$message.error('上传已达上限' + that.fileCount + '张')
+                    }
+                }
+            )
+        },
+    },
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>

File diff suppressed because it is too large
+ 3110 - 0
src/views/modules/material/videoPopular.vue


+ 2 - 2
vue.config.js

@@ -108,7 +108,7 @@ module.exports = {
         // target: 'http://192.168.1.59:7701', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-        target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
@@ -119,7 +119,7 @@ module.exports = {
         // target:'http://gateway.tjyourong.com.cn', //测试
         // target:'http://apipre.tjyourong.com.cn', //预生产
         // target: 'http://192.168.1.134:7001', //请求本地 需要jeecg-boot后台项目  周泽宇
-        // target:'http://192.168.0.195:9999/',
+        target:'http://192.168.0.195:9999/',
         // target:'http://gateway.tjyourong.com.cn/',//测试
 
         ws: false,