unloadVideo.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  1. <template>
  2. <view class=" imgupload">
  3. <view class=" flex_wrap">
  4. <view class="imgs-view" v-if="videoUrl">
  5. <!-- <video :src="videoUrl" style="height: 500rpx;
  6. width: 600rpx;" :poster="videoUrl+ '?x-oss-process=video/snapshot,t_0,f_jpg'" controls :show-center-play-btn="false" auto-pause-if-navigate></video> -->
  7. <j-video class="jvideo" :url="videoUrl" width="500rpx" height="600rpx"></j-video>
  8. <view class="del-btn" @click="delVideo()">
  9. ×
  10. </view>
  11. </view>
  12. <view v-else class="upload-img-view flex_xy_center" @click="upPhoto">
  13. <image
  14. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAArklEQVRIS2NkGCDAOED2Mgw9i9vb2xVAoVVZWfmAnFAj28ddXV33QRaWlZUp0tvi/1CLyXI8WZpAFnZ1dY1aTFJUjwY10cE1mriIDiqoQpTEBSoGmZmZ9zMwMICLQyqC08zMzDHFxcW3YGYODotJ8eFo4iIltEBqR0suokNsNHERHVTYSi5SNA9kUJ+CtrnMSHEw1iKTFAN6e3vVQOqRy19S9JOdj0mxBJvakWcxAFpiZB+QSLWnAAAAAElFTkSuQmCC"
  15. ></image>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. import jVideo from "@/components/j-video/j-video.vue"
  22. // import jVideo from "../../../components/j-video/j-video.vue"
  23. export default {
  24. name: "VideoUpload",
  25. props: {
  26. videoSrc: {
  27. //视频文件
  28. type: String,
  29. default: null,
  30. },
  31. videoSize: {
  32. //图片大小 单位M
  33. type: Number,
  34. default: 10,
  35. },
  36. formData: {
  37. type: Object,
  38. default: function () {
  39. return {};
  40. },
  41. },
  42. imgType: {
  43. //如果是小程序,这个值则没用作用
  44. type: [Array],
  45. default: function () {
  46. return ["MP4", "mp4"];
  47. },
  48. },
  49. loading: {
  50. type: Boolean,
  51. default: true,
  52. },
  53. url: {
  54. //上传图片Url
  55. type: String,
  56. },
  57. async: {
  58. type: Boolean,
  59. default: false,
  60. },
  61. header: {
  62. type: Array,
  63. default: function () {
  64. return [];
  65. },
  66. },
  67. previewMany: {
  68. type: Boolean,
  69. default: false,
  70. },
  71. config: {
  72. type: Object,
  73. default: function () {
  74. return {
  75. delIcon: "", //删除图片icon
  76. resultTip: true, //结果提示
  77. resultType: "1", //结果展示类型
  78. loadIcon: "", //加载时的图标
  79. loadText: "", //加载时的文字
  80. };
  81. },
  82. },
  83. },
  84. components:{
  85. jVideo
  86. },
  87. data() {
  88. return {
  89. videoUrl: null,
  90. startUpload: false,
  91. tipObj: {
  92. prompt: "",
  93. typeColor: "#009100",
  94. must: false, //必须要存在的时候
  95. success: "#009100", //成功-#009100; 可自定义修改
  96. warning: "#bb9300", // 警告 -#bb9300; 可自定义修改
  97. error: "#FF0000", // 失败--#FF0000; 可自定义修改
  98. },
  99. headers: {},
  100. curPlatform: "",
  101. currIndex: null,
  102. ossData: {}, //oss参数
  103. duration: null,
  104. size: null,
  105. VideoSize: 100,
  106. };
  107. },
  108. created() {
  109. // this.formDataGet();
  110. },
  111. watch: {
  112. videoSrc(n, o) {
  113. this.videoUrl = n;
  114. },
  115. },
  116. methods: {
  117. delVideo(){ uni.showModal({
  118. title: "提示",
  119. content: "是否删除?",
  120. success: (res)=> {
  121. if (res.confirm) {
  122. this.videoUrl=null,
  123. this.duration=null,
  124. this.size= null,
  125. this.$emit("resultVideo", {
  126. url: this.videoUrl,
  127. size: this.size,
  128. duration: this.duration,
  129. });
  130. }}})
  131. },
  132. //上传凭证
  133. formDataGet() {
  134. let that = this;
  135. uni.request({
  136. //url: 'https://pm.lidashine.com/get-oss-sign', //oss获取参数接口地址。
  137. url: this.$mConfig.imgURL,
  138. complete: (result) => {
  139. let res = JSON.parse(result.data.data);
  140. that.ossData = res;
  141. },
  142. });
  143. },
  144. // 随机生成文件名
  145. random_string(len) {
  146. len = len || 32;
  147. var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
  148. var maxPos = chars.length;
  149. var pwd = "";
  150. for (let i = 0; i < len; i++) {
  151. pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  152. }
  153. return pwd;
  154. },
  155. //上传图片
  156. upPhoto() {
  157. let that = this;
  158. uni.chooseVideo({
  159. count: 1,
  160. sourceType: ["camera", "album"],
  161. success: function (res) {
  162. // #ifdef H5
  163. if (res.tempFile.size > that.VideoSize * 1024 * 1024) {
  164. uni.showToast({
  165. title: `图片不能大于${that.VideoSize}M`,
  166. icon: "none",
  167. });
  168. return false;
  169. }
  170. // #endif
  171. // #ifdef APP-PLUS
  172. if (res.size > that.VideoSize * 1024 * 1024) {
  173. uni.showToast({
  174. title: `图片不能大于${that.VideoSize}M`,
  175. icon: "none",
  176. });
  177. return false;
  178. }
  179. // #endif
  180. (that.duration = res.duration),
  181. (that.size = res.size);
  182. that.updataImg(res.tempFile, res.tempFilePath);
  183. },
  184. });
  185. },
  186. updataImg(file, filePath) {
  187. let imgname = this.random_string(8) + "." + filePath.split(".").pop();
  188. let dir = "media/" + imgname;
  189. uni.showLoading();
  190. uni.uploadFile({
  191. // url: this.$mConfig.baseUrl+ '/minio/upload',
  192. url: this.$mConfig.baseUrl+ '/sys/oss/upload',
  193. filePath: filePath,
  194. fileType: "video",
  195. name: "file",
  196. success: (res) => {
  197. uni.hideLoading();
  198. if (res.statusCode != 200) {
  199. return;
  200. }
  201. let resObj = JSON.parse(res.data);
  202. this.videoUrl = resObj.data.url;
  203. this.$emit("resultVideo", {
  204. url: this.videoUrl,
  205. size: this.size,
  206. duration: this.duration,
  207. });
  208. uni.showToast({
  209. title: "上传成功",
  210. icon: "success",
  211. duration: 1000,
  212. });
  213. // alert(ossRes.host+"/"+encodeURIComponent(fileName));
  214. },
  215. fail: (err) => {
  216. uni.hideLoading();
  217. console.log("uploadImage fail", err);
  218. uni.showModal({
  219. content: err.errMsg,
  220. showCancel: false,
  221. });
  222. },
  223. });
  224. },
  225. },
  226. };
  227. </script>
  228. <style scoped>
  229. .w-100 {
  230. width: 100%;
  231. }
  232. .flex {
  233. /* 转为弹性盒模型*/
  234. display: flex;
  235. }
  236. .flex_bet {
  237. /* 两端左右*/
  238. display: flex;
  239. justify-content: space-between;
  240. }
  241. .flex_wrap {
  242. /* 转为弹性盒模型并自动换行*/
  243. display: flex;
  244. flex-wrap: wrap;
  245. }
  246. .flex_xy_center {
  247. display: flex;
  248. justify-content: center;
  249. align-items: center;
  250. }
  251. .upload-img-view {
  252. height: 200rpx;
  253. width: 32%;
  254. border-radius: 10rpx;
  255. border: 4rpx dotted #f1f1f1;
  256. /* background-color: #F1F1F1; */
  257. }
  258. .upload-img-view > image {
  259. width: 70rpx;
  260. height: 70rpx;
  261. }
  262. .upload-txt {
  263. font-size: 24rpx;
  264. color: #ffffff;
  265. }
  266. .imgs-view {
  267. border-radius: 10rpx;
  268. margin-right: 1.8%;
  269. margin-bottom: 16rpx;
  270. /* border: 1rpx solid #f1f1f1; */
  271. box-sizing: border-box;
  272. position: relative;
  273. }
  274. .result {
  275. position: absolute;
  276. bottom: 0;
  277. width: 100%;
  278. height: 45rpx;
  279. font-size: 26rpx;
  280. left: 0;
  281. background-color: rgba(0, 0, 0, 0.6);
  282. text-align: center;
  283. line-height: 45rpx;
  284. border-bottom-left-radius: 10rpx;
  285. border-bottom-right-radius: 10rpx;
  286. }
  287. .result > .success {
  288. color: #00b900;
  289. }
  290. .result > .error {
  291. color: #b52e25;
  292. }
  293. .uploading {
  294. position: absolute;
  295. background-color: rgba(0, 0, 0, 0.5);
  296. left: 0;
  297. top: 0;
  298. width: 100%;
  299. height: 100%;
  300. text-align: center;
  301. line-height: 100%;
  302. z-index: 999;
  303. }
  304. .uploading image {
  305. width: 60rpx;
  306. height: 60rpx;
  307. z-index: 1000;
  308. animation: rotation 0.6s linear infinite;
  309. -moz-animation: rotation 0.6s linear infinite;
  310. -webkit-animation: rotation 0.6s linear infinite;
  311. -o-animation: rotation 0.6s linear infinite;
  312. }
  313. @keyframes rotation {
  314. from {
  315. -webkit-transform: rotate(0deg);
  316. transform: rotate(0deg);
  317. -moz-transform: rotate(0deg);
  318. -o-transform: rotate(0deg);
  319. }
  320. to {
  321. -webkit-transform: rotate(360deg);
  322. transform: rotate(360deg);
  323. -moz-transform: rotate(360deg);
  324. -o-transform: rotate(360deg);
  325. }
  326. }
  327. .imgs-view > image {
  328. width: 100%;
  329. height: 100%;
  330. border-radius: 10rpx;
  331. }
  332. .imgupload__tip {
  333. font-size: 24rpx;
  334. color: #ff0000;
  335. margin: 10rpx auto;
  336. }
  337. .imgupload__tip > label {
  338. color: #009100;
  339. }
  340. .del-btn {
  341. position: absolute;
  342. color: #ffffff;
  343. width: 34rpx;
  344. height: 34rpx;
  345. background-color: #ef3124;
  346. border-radius: 50%;
  347. text-align: center;
  348. line-height: 34rpx;
  349. position: absolute;
  350. top: 244rpx;
  351. right: -54rpx;
  352. z-index: 999999
  353. }
  354. .del-btn > image {
  355. width: 100%;
  356. height: 100%;
  357. display: flex;
  358. }
  359. .css2 {
  360. border-style: solid;
  361. border-width: 0px 0px 100px 100px;
  362. border-color: transparent transparent blue transparent;
  363. width: 0px;
  364. height: 0px;
  365. }
  366. </style>