submitVideo - 副本.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="task-form-item form-item-media">
  3. <view class="form-lable">
  4. <text><text class="form-must" v-if="rule && rule.required">* </text>视频:</text>
  5. <text class="form-media-num">({{videos.length}}/{{num}})</text>
  6. </view>
  7. <view class="form-img-video">
  8. <view v-if="videos.length <= num " class="updata-btn img-video-item" @click.stop="onChooseVideo()">
  9. <text class="iconfont_yige">&#xe69f;</text>
  10. <text>请上传视频</text>
  11. </view>
  12. <view class="img-video-box img-video-item" v-for="(item,index) in videos">
  13. <view class="video-cover" @click.stop="onplay(item)" />
  14. <view class="del-img-video iconfont_yige" @click.stop="delVldeo(index)">&#xe867;</view>
  15. <video :show-center-play-btn="false" :controls="false" class="img-video" :src="item"
  16. v-if="!checkPage"></video>
  17. </view>
  18. </view>
  19. <uni-popup ref="videoPlayRef" maskBg="rgba(0, 0, 0,.7)" @change="popupChange">
  20. <view class="video-play" style="width: 100vw;">
  21. <video autoplay v-if="playVideoUrl" style="width: 100%;max-height: 60vh;" :src="playVideoUrl" />
  22. </view>
  23. </uni-popup>
  24. </view>
  25. </template>
  26. <script>
  27. import {
  28. getcheckBigFile_Api,
  29. setUpload_tag_Api,
  30. getMargeTag_Api
  31. } from "@/api/task.js"
  32. import {
  33. getFileMd5,
  34. cutFile
  35. } from "@/utils/tool.js"
  36. export default {
  37. name: 'submitVideo',
  38. model: {
  39. prop: ['videos'],
  40. event: ['onChange']
  41. },
  42. props: {
  43. checkPage: {
  44. type: Boolean,
  45. default: false
  46. },
  47. num: {
  48. type: Number,
  49. default: 1
  50. },
  51. rule: {
  52. type: Object,
  53. default: null
  54. },
  55. videos: {
  56. type: Array,
  57. default: () => [],
  58. require: true
  59. },
  60. },
  61. data() {
  62. return {
  63. fullscreenLoading: false,
  64. Storage_key: 'partUploadData',
  65. File_V: null,
  66. tempFilePath: null,
  67. playVideoUrl: '',
  68. uploadFileObj: {
  69. tagsList: [],
  70. uploadUrls: []
  71. },
  72. }
  73. },
  74. watch: {
  75. fullscreenLoading: {
  76. handler(newL, oldL) {
  77. if (newL) {
  78. uni.showLoading({
  79. title: '上传视频中',
  80. mask: true
  81. })
  82. } else {
  83. uni.hideLoading()
  84. }
  85. },
  86. }
  87. },
  88. mounted() {
  89. },
  90. methods: {
  91. popupChange(e) {
  92. if (!e || !e.show) {
  93. this.playVideoUrl = null;
  94. }
  95. },
  96. // 播放视频
  97. onplay(url) {
  98. this.playVideoUrl = url;
  99. this.$nextTick(() => {
  100. this.$refs.videoPlayRef.open();
  101. this.videoContext = uni.createVideoContext('myVideo');
  102. this.videoContext.play()
  103. })
  104. },
  105. delVldeo(index) {
  106. this.videos.splice(index, 1);
  107. },
  108. onChooseVideo() {
  109. try {
  110. uni.removeStorageSync(this.Storage_key);
  111. } catch (e) {
  112. // error
  113. }
  114. uni.chooseVideo({
  115. sourceType: ['camera', 'album'],
  116. compressed: true, // 压缩
  117. success: res => {
  118. console.log('fileMd5 = ', res)
  119. this.File_V = res.tempFile;
  120. this.tempFilePath = res.tempFilePath;
  121. this.onCheck_Md5(res.tempFilePath, res.tempFile)
  122. },
  123. fail: err => {
  124. console.log('fileMd5 err = ', err)
  125. }
  126. });
  127. },
  128. async onCheck_Md5(tempFilePath, File) {
  129. const fileMd5 = await getFileMd5(File);
  130. console.log('fileMd5 = ', fileMd5)
  131. if (!fileMd5) return
  132. this.fullscreenLoading = true
  133. getcheckBigFile_Api({
  134. fileMd5: fileMd5,
  135. originalName: File.name
  136. }).then(res => {
  137. const data = res.data;
  138. if (!data.bigStatus) {
  139. this.saveFileChunk(File, tempFilePath, fileMd5, data.uploadId);
  140. } else {
  141. this.unloadVideos(data.url);
  142. }
  143. }).catch(err => {
  144. console.log('b = ', err)
  145. this.fullscreenLoading = false;
  146. uni.showToast({
  147. title: '上传失败',
  148. icon: 'none'
  149. })
  150. })
  151. },
  152. // 保存文件片段到后台
  153. async saveFileChunk(File, tempFilePath, fileMd5, uploadId) {
  154. cutFile(File).then(cutFileList => {
  155. console.log('fileMd5 = ', cutFileList)
  156. let num = 0;
  157. let list = [];
  158. let uploadFileObj = []
  159. for (let i = 0; i < cutFileList.length; i++) {
  160. console.log('fileMd5 = ', i)
  161. let p = new Promise((resolve, reject) => {
  162. const item = cutFileList[i];
  163. uni.uploadFile({
  164. url: this.$mConfig.baseUrl + '/common/upload-tag',
  165. formData: {
  166. file: item.blob,
  167. fileMd5: fileMd5,
  168. uploadId: uploadId,
  169. curPartSize: item.blob.size,
  170. partNumber: item.partNumber
  171. },
  172. success: (uploadFileRes) => {
  173. const JSON_data = uploadFileRes.data;
  174. const data = JSON.parse(JSON_data);
  175. const tag = data.data.tag;
  176. uploadFileObj.push(tag)
  177. resolve()
  178. },
  179. fail(fail) {
  180. reject()
  181. }
  182. })
  183. });
  184. list.push(p)
  185. }
  186. Promise.all(list).then(() => {
  187. this.bigFileMergeFun(uploadFileObj, fileMd5, uploadId)
  188. }).catch(() => {
  189. this.fullscreenLoading = false;
  190. uni.showToast({
  191. title: '上传失败',
  192. icon: 'none'
  193. })
  194. })
  195. })
  196. },
  197. // 合并
  198. bigFileMergeFun(uploadFileObj, fileMd5, uploadId) {
  199. console.log('bigFileMergeFun = ', uploadFileObj)
  200. let param = {
  201. fileMd5: fileMd5,
  202. tagsList: uploadFileObj,
  203. uploadId: uploadId
  204. }
  205. getMargeTag_Api(param).then(res => {
  206. console.log('getMargeTag_Api = ', res)
  207. const url = res.data.url;
  208. this.unloadVideos(url)
  209. }).catch(err => {
  210. this.fullscreenLoading = false;
  211. uni.showToast({
  212. title: '上传失败',
  213. icon: 'none'
  214. })
  215. })
  216. },
  217. unloadVideos(url) {
  218. this.videos.push(url)
  219. this.fullscreenLoading = false;
  220. uni.showToast({
  221. title: '上传成功',
  222. icon: 'none'
  223. })
  224. }
  225. }
  226. }
  227. </script>
  228. <style lang="scss" scoped>
  229. @import '~./submint.scss';
  230. .video-cover {
  231. position: absolute;
  232. left: 0;
  233. right: 0;
  234. top: 0;
  235. bottom: 0;
  236. z-index: 2;
  237. }
  238. </style>