| 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=script&lang=js","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\uploadVideo\\index.vue","mtime":1761614938988},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\babel-loader\\lib\\index.js","mtime":1761614927320},{"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:DQppbXBvcnQgeyB1cGxvYWRCeVBpZWNlcyB9IGZyb20gJ0AvdXRpbHMvdXBsb2FkJzsgLy/lvJXlhaV1cGxvYWRCeVBpZWNlc+aWueazlQ0KaW1wb3J0IHsgcHJvZHVjdEdldFRlbXBLZXlzQXBpLCB1cGxvYWRUeXBlIH0gZnJvbSAnQC9hcGkvcHJvZHVjdCc7DQppbXBvcnQgU2V0dGluZyBmcm9tICdAL3NldHRpbmcnOw0KaW1wb3J0IHsgZ2V0Q29va2llcyB9IGZyb20gJ0AvbGlicy91dGlsJzsNCmltcG9ydCB7IGlzVmlkZW9VcGxvYWQgfSBmcm9tICdAL3V0aWxzJzsNCg0KLy8gaW1wb3J0ICcuLi8uLi8uLi9wdWJsaWMvVUVkaXRvci9kaWFsb2dzL2ludGVybmFsJzsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ3ZpZGUxMW8nLA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBmaWxlVXJsOiBTZXR0aW5nLmFwaUJhc2VVUkwgKyAnL2ZpbGUvdXBsb2FkJywNCiAgICAgIHVwbG9hZDogew0KICAgICAgICB2aWRlb0luZzogZmFsc2UsIC8vIOaYr+WQpuaYvuekuui/m+W6puadoe+8mw0KICAgICAgfSwNCiAgICAgIHByb2dyZXNzOiAwLCAvLyDov5vluqbmnaHpu5jorqQwDQogICAgICB2aWRlb0xpbms6ICcnLA0KICAgICAgZm9ybVZhbGlkYXRlOiB7DQogICAgICAgIHZpZGVvX2xpbms6ICcnLA0KICAgICAgfSwNCiAgICAgIHVwbG9hZF90eXBlOiAnJywNCiAgICAgIHVwbG9hZERhdGE6IHt9LA0KICAgICAgaGVhZGVyOiB7fSwNCiAgICB9Ow0KICB9LA0KICBjcmVhdGVkKCkgew0KICAgIHRoaXMudXBsb2FkVHlwZSgpOw0KICAgIHRoaXMuZ2V0VG9rZW4oKTsNCiAgfSwNCiAgbWV0aG9kczogew0KICAgIC8vIOWIoOmZpOinhumike+8mw0KICAgIGRlbFZpZGVvKCkgew0KICAgICAgbGV0IHRoYXQgPSB0aGlzOw0KICAgICAgdGhhdC4kc2V0KHRoYXQuZm9ybVZhbGlkYXRlLCAndmlkZW9fbGluaycsICcnKTsNCiAgICB9LA0KICAgIC8v6I635Y+W6KeG6aKR5LiK5Lyg57G75Z6LDQogICAgdXBsb2FkVHlwZSgpIHsNCiAgICAgIHVwbG9hZFR5cGUoKS50aGVuKChyZXMpID0+IHsNCiAgICAgICAgdGhpcy51cGxvYWRfdHlwZSA9IHJlcy5kYXRhLnVwbG9hZF90eXBlOw0KICAgICAgfSk7DQogICAgfSwNCiAgICAvLyDkuIrkvKDmiJDlip8NCiAgICBoYW5kbGVTdWNjZXNzKHJlcywgZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGlmIChyZXMuc3RhdHVzID09PSAyMDApIHsNCiAgICAgICAgdGhpcy5mb3JtVmFsaWRhdGUudmlkZW9fbGluayA9IHJlcy5kYXRhLnNyYzsNCiAgICAgICAgdGhpcy4kbWVzc2FnZS5zdWNjZXNzKHJlcy5tc2cpOw0KICAgICAgfSBlbHNlIHsNCiAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihyZXMubXNnKTsNCiAgICAgIH0NCiAgICB9LA0KICAgIHZpZGVvU2F2ZVRvVXJsKGZpbGUpIHsNCiAgICAgIGlmIChpc1ZpZGVvVXBsb2FkKGZpbGV4KSkNCiAgICAgICAgdXBsb2FkQnlQaWVjZXMoew0KICAgICAgICAgIGZpbGU6IGZpbGUsIC8vIOinhumikeWunuS9kw0KICAgICAgICAgIHBpZWNlU2l6ZTogMywgLy8g5YiG54mH5aSn5bCPDQogICAgICAgICAgc3VjY2VzczogKGRhdGEpID0+IHsNCiAgICAgICAgICAgIHRoaXMuZm9ybVZhbGlkYXRlLnZpZGVvX2xpbmsgPSBkYXRhLmZpbGVfcGF0aDsNCiAgICAgICAgICAgIHRoaXMucHJvZ3Jlc3MgPSAxMDA7DQogICAgICAgICAgfSwNCiAgICAgICAgICBlcnJvcjogKGUpID0+IHsNCiAgICAgICAgICAgIHRoaXMuJG1lc3NhZ2UuZXJyb3IoZS5tc2cpOw0KICAgICAgICAgIH0sDQogICAgICAgICAgdXBsb2FkaW5nOiAoY2h1bmssIGFsbENodW5rKSA9PiB7DQogICAgICAgICAgICB0aGlzLnZpZGVvSW5nID0gdHJ1ZTsNCiAgICAgICAgICAgIGxldCBzdCA9IE1hdGguZmxvb3IoKGNodW5rIC8gYWxsQ2h1bmspICogMTAwKTsNCiAgICAgICAgICAgIHRoaXMucHJvZ3Jlc3MgPSBzdDsNCiAgICAgICAgICB9LA0KICAgICAgICB9KTsNCiAgICAgIHJldHVybiBmYWxzZTsNCiAgICB9LA0KICAgIGdldFRva2VuKCkgew0KICAgICAgdGhpcy5oZWFkZXJbJ0F1dGhvcmktemF0aW9uJ10gPSAnQmVhcmVyICcgKyBnZXRDb29raWVzKCd0b2tlbicpOw0KICAgIH0sDQogICAgYmVmb3JlVXBsb2FkKCkgew0KICAgICAgdGhpcy51cGxvYWREYXRhID0ge307DQogICAgICBsZXQgcHJvbWlzZSA9IG5ldyBQcm9taXNlKChyZXNvbHZlKSA9PiB7DQogICAgICAgIHRoaXMuJG5leHRUaWNrKGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICByZXNvbHZlKHRydWUpOw0KICAgICAgICB9KTsNCiAgICAgIH0pOw0KICAgICAgcmV0dXJuIHByb21pc2U7DQogICAgfSwNCiAgICB6aF91cGxvYWRGaWxlKCkgew0KICAgICAgaWYgKHRoaXMudmlkZW9MaW5rKSB7DQogICAgICAgIHRoaXMuZm9ybVZhbGlkYXRlLnZpZGVvX2xpbmsgPSB0aGlzLnZpZGVvTGluazsNCiAgICAgIH0gZWxzZSB7DQogICAgICAgIHRoaXMuJHJlZnMucmVmaWQuY2xpY2soKTsNCiAgICAgIH0NCiAgICB9LA0KICAgIHpoX3VwbG9hZEZpbGVfY2hhbmdlKGV2ZmlsZSkgew0KICAgICAgbGV0IHRoYXQgPSB0aGlzOw0KICAgICAgaWYgKGV2ZmlsZS50YXJnZXQuZmlsZXNbMF0udHlwZSAhPT0gJ3ZpZGVvL21wNCcpIHsNCiAgICAgICAgcmV0dXJuIHRoYXQuJG1lc3NhZ2UuZXJyb3IoJ+WPquiDveS4iuS8oG1wNOaWh+S7ticpOw0KICAgICAgfQ0KICAgICAgbGV0IHR5cGVzID0gew0KICAgICAgICBrZXk6IGV2ZmlsZS50YXJnZXQuZmlsZXNbMF0ubmFtZSwNCiAgICAgICAgY29udGVudFR5cGU6IGV2ZmlsZS50YXJnZXQuZmlsZXNbMF0udHlwZSwNCiAgICAgIH07DQogICAgICBwcm9kdWN0R2V0VGVtcEtleXNBcGkodHlwZXMpLnRoZW4oKHJlcykgPT4gew0KICAgICAgICB0aGF0LiR2aWRlb0Nsb3VkDQogICAgICAgICAgLnZpZGVvVXBsb2FkKHsNCiAgICAgICAgICAgIHR5cGU6IHJlcy5kYXRhLnR5cGUsDQogICAgICAgICAgICBldmZpbGU6IGV2ZmlsZSwNCiAgICAgICAgICAgIHJlczogcmVzLA0KICAgICAgICAgICAgdXBsb2FkaW5nKHN0YXR1cywgcHJvZ3Jlc3MpIHsNCiAgICAgICAgICAgICAgdGhhdC51cGxvYWQudmlkZW9JbmcgPSBzdGF0dXM7DQogICAgICAgICAgICB9LA0KICAgICAgICAgIH0pDQogICAgICAgICAgLnRoZW4oKHJlcykgPT4gew0KICAgICAgICAgICAgdGhhdC5mb3JtVmFsaWRhdGUudmlkZW9fbGluayA9IHJlcy51cmw7DQogICAgICAgICAgICB0aGF0LiRtZXNzYWdlLnN1Y2Nlc3MoJ+inhumikeS4iuS8oOaIkOWKnycpOw0KICAgICAgICAgIH0pDQogICAgICAgICAgLmNhdGNoKChyZXMpID0+IHsNCiAgICAgICAgICAgIHRoYXQuJG1lc3NhZ2UuZXJyb3IocmVzKTsNCiAgICAgICAgICB9KTsNCiAgICAgIH0pOw0KICAgIH0sDQogICAgdXBsb2FkcygpIHsNCiAgICAgIHRoaXMuJGVtaXQoJ2dldHZpZGVvJywgdGhpcy5mb3JtVmFsaWRhdGUudmlkZW9fbGluayk7DQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAgDA;AACA;AACA;AACA;AACA;;AAEA;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;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;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;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;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"]}]}
|
