| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\uploadVideo\\index.vue?vue&type=style&index=0&id=0eb7b31d&scoped=true&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\uploadVideo\\index.vue","mtime":1761614938988},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudmlkZW8tc3R5bGUgew0KICB3aWR0aDogNDAlOw0KICBoZWlnaHQ6IDE4MHB4Ow0KICBib3JkZXItcmFkaXVzOiAxMHB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzA3MDcwOw0KICBtYXJnaW4tdG9wOiAxMHB4Ow0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIG92ZXJmbG93OiBoaWRkZW47DQp9DQoudmlkZW8tc3R5bGUgLmljb252IHsNCiAgY29sb3I6ICNmZmY7DQogIGxpbmUtaGVpZ2h0OiAxODBweDsNCiAgd2lkdGg6IDUwcHg7DQogIGhlaWdodDogNTBweDsNCiAgZGlzcGxheTogaW5oZXJpdDsNCiAgZm9udC1zaXplOiAyNnB4Ow0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIHRvcDogLTc0cHg7DQogIGxlZnQ6IDUwJTsNCiAgbWFyZ2luLWxlZnQ6IC0yNXB4Ow0KfQ0KLnZpZGVvLXN0eWxlIC5tYXJrIHsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAzMHB4Ow0KICB0b3A6IDA7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA6KA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/uploadVideo","sourcesContent":["<template>\r\n <div>\r\n <div class=\"mt20 ml20\">\r\n <el-input class=\"perW35\" v-model=\"videoLink\" placeholder=\"请输入视频链接\" />\r\n <input type=\"file\" ref=\"refid\" style=\"display: none\" @change=\"zh_uploadFile_change\" />\r\n <el-button\r\n v-if=\"upload_type !== '1' || videoLink\"\r\n type=\"primary\"\r\n icon=\"ios-cloud-upload-outline\"\r\n class=\"ml10\"\r\n v-db-click\r\n @click=\"zh_uploadFile\"\r\n >{{ videoLink ? '确认添加' : '上传视频' }}</el-button\r\n >\r\n <el-upload\r\n v-if=\"upload_type === '1' && !videoLink\"\r\n :show-file-list=\"false\"\r\n :action=\"fileUrl\"\r\n class=\"ml10\"\r\n :before-upload=\"videoSaveToUrl\"\r\n :data=\"uploadData\"\r\n :headers=\"header\"\r\n :multiple=\"true\"\r\n style=\"display: inline-block\"\r\n accept=\".mp4\"\r\n >\r\n <el-button type=\"primary\" icon=\"ios-cloud-upload-outline\">上传视频</el-button>\r\n </el-upload>\r\n <Progress :percent=\"progress\" :stroke-width=\"5\" v-if=\"upload.videoIng\" />\r\n <div class=\"video-style\" v-if=\"formValidate.video_link\">\r\n <video\r\n style=\"width: 100%; height: 100% !important; border-radius: 10px\"\r\n :src=\"formValidate.video_link\"\r\n controls=\"controls\"\r\n >\r\n 您的浏览器不支持 video 标签。\r\n </video>\r\n <div class=\"mark\"></div>\r\n <i class=\"el-icon-delete iconv\" v-db-click @click=\"delVideo\"></i>\r\n </div>\r\n </div>\r\n <div class=\"mt50 ml20\">\r\n <el-button type=\"primary\" v-db-click @click=\"uploads\">确认</el-button>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { uploadByPieces } from '@/utils/upload'; //引入uploadByPieces方法\r\nimport { productGetTempKeysApi, uploadType } from '@/api/product';\r\nimport Setting from '@/setting';\r\nimport { getCookies } from '@/libs/util';\r\nimport { isVideoUpload } from '@/utils';\r\n\r\n// import '../../../public/UEditor/dialogs/internal';\r\nexport default {\r\n name: 'vide11o',\r\n data() {\r\n return {\r\n fileUrl: Setting.apiBaseURL + '/file/upload',\r\n upload: {\r\n videoIng: false, // 是否显示进度条；\r\n },\r\n progress: 0, // 进度条默认0\r\n videoLink: '',\r\n formValidate: {\r\n video_link: '',\r\n },\r\n upload_type: '',\r\n uploadData: {},\r\n header: {},\r\n };\r\n },\r\n created() {\r\n this.uploadType();\r\n this.getToken();\r\n },\r\n methods: {\r\n // 删除视频；\r\n delVideo() {\r\n let that = this;\r\n that.$set(that.formValidate, 'video_link', '');\r\n },\r\n //获取视频上传类型\r\n uploadType() {\r\n uploadType().then((res) => {\r\n this.upload_type = res.data.upload_type;\r\n });\r\n },\r\n // 上传成功\r\n handleSuccess(res, file, fileList) {\r\n if (res.status === 200) {\r\n this.formValidate.video_link = res.data.src;\r\n this.$message.success(res.msg);\r\n } else {\r\n this.$message.error(res.msg);\r\n }\r\n },\r\n videoSaveToUrl(file) {\r\n if (isVideoUpload(filex))\r\n uploadByPieces({\r\n file: file, // 视频实体\r\n pieceSize: 3, // 分片大小\r\n success: (data) => {\r\n this.formValidate.video_link = data.file_path;\r\n this.progress = 100;\r\n },\r\n error: (e) => {\r\n this.$message.error(e.msg);\r\n },\r\n uploading: (chunk, allChunk) => {\r\n this.videoIng = true;\r\n let st = Math.floor((chunk / allChunk) * 100);\r\n this.progress = st;\r\n },\r\n });\r\n return false;\r\n },\r\n getToken() {\r\n this.header['Authori-zation'] = 'Bearer ' + getCookies('token');\r\n },\r\n beforeUpload() {\r\n this.uploadData = {};\r\n let promise = new Promise((resolve) => {\r\n this.$nextTick(function () {\r\n resolve(true);\r\n });\r\n });\r\n return promise;\r\n },\r\n zh_uploadFile() {\r\n if (this.videoLink) {\r\n this.formValidate.video_link = this.videoLink;\r\n } else {\r\n this.$refs.refid.click();\r\n }\r\n },\r\n zh_uploadFile_change(evfile) {\r\n let that = this;\r\n if (evfile.target.files[0].type !== 'video/mp4') {\r\n return that.$message.error('只能上传mp4文件');\r\n }\r\n let types = {\r\n key: evfile.target.files[0].name,\r\n contentType: evfile.target.files[0].type,\r\n };\r\n productGetTempKeysApi(types).then((res) => {\r\n that.$videoCloud\r\n .videoUpload({\r\n type: res.data.type,\r\n evfile: evfile,\r\n res: res,\r\n uploading(status, progress) {\r\n that.upload.videoIng = status;\r\n },\r\n })\r\n .then((res) => {\r\n that.formValidate.video_link = res.url;\r\n that.$message.success('视频上传成功');\r\n })\r\n .catch((res) => {\r\n that.$message.error(res);\r\n });\r\n });\r\n },\r\n uploads() {\r\n this.$emit('getvideo', this.formValidate.video_link);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.video-style {\r\n width: 40%;\r\n height: 180px;\r\n border-radius: 10px;\r\n background-color: #707070;\r\n margin-top: 10px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.video-style .iconv {\r\n color: #fff;\r\n line-height: 180px;\r\n width: 50px;\r\n height: 50px;\r\n display: inherit;\r\n font-size: 26px;\r\n position: absolute;\r\n top: -74px;\r\n left: 50%;\r\n margin-left: -25px;\r\n}\r\n.video-style .mark {\r\n position: absolute;\r\n width: 100%;\r\n height: 30px;\r\n top: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n text-align: center;\r\n}\r\n</style>\r\n"]}]}
|
