devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现图片和视频上传_uniapp上传视频

作者：羊村懒王 | 2024-03-05 10:27:50

赞

踩

uniapp上传视频

模板部分

  1. <template>
  2. 	<view class="annex-wrap ">
  3. 		<view class="annex-box">
  4. 			<view class="file-list flex-wrap">
  5. 				<view class="file-list-item" v-for="(item, index) in dataList" :key="index">
  6. 					<view class="file-list-item-inner">
  7. 						<!--图片-->
  8. 						<view class="" @tap.stop="toPreview(item)" style="position: relative;height: 100%;width: 100%;">
  9. 							<image :src="item.type === 'image' ? item.url : `${item.url}?x-oss-process=video/snapshot,t_0,f_jpg`" class="upload-temp-img" mode="aspectFill"
  10. 								 />
  11. 							<!--视频-->
  12. 							<!-- <view v-if="item.type === 'video'" class="file-area">
  13. 								<view @tap.stop="toPreview(item)">
  14. 									<view class="name">{{ item.fileName }}</view>
  15. 								</view>
  16. 							</view> -->
  17. 							<u-icon name="play-circle-fill" color="#00000080" size="40" v-if="item.type === 'video'" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></u-icon>
  18. 						</view>
  19. 						
  20. 						<view @tap.stop="removeFile(index)" class="close-btn">
  21. 							<u-icon name="close" size="20"></u-icon>
  22. 						</view>
  23. 					</view>
  24. 				</view>
  25. 				<view class="file-list-item" @tap.stop="toShowChooseSheet" v-if="dataList.length<maxFilesNum">
  26. 					<view class="file-list-item-inner upload-btn flex-center">
  27. 						<view class="flex-center" style="flex-direction: column;">
  28. 							<u-icon name="plus" color="#929AA5" size="36"></u-icon>
  29. 							<view>{{ dataList.length }}/{{ maxFilesNum }}</view>
  30. 						</view>
  31. 					</view>
  32. 				</view>
  33. 			</view>
  34. 		</view>
  35. 		<u-action-sheet :actions="uploadTypeList" :show="showUploadTypeSheet" title="请选择上传文件类型"
  36. 			@close='showUploadTypeSheet=false' :round="20" closeOnClickOverlay cancelText='取消'
  37. 			@select="chooseUploadType"></u-action-sheet>
  38. 		<u-popup :show="showPreview" mode="center" width="95%" @close="closePreview" v-if="play" class="pop" closeOnClickOverlay>
  39. 			<view class="preview-content flex-center">
  40. 				<image :src="previewItem.url" mode="widthFix" v-if="previewItem.type === 'image'" style="width: 80%;"></image>
  41. 				<video :src="previewItem.url" id="preview-video" :autoplay="false" controls :show-progress="true" style=" height: 400px;width: 100vw;"
  42. 					:show-center-play-btn="true" v-if="previewItem.type === 'video'"></video>
  43. 			</view>
  44. 		</u-popup>
  45. 	</view>
  46. </template>

js部分

  1. <script>
  2. 	import COS from 'cos-wx-sdk-v5'
  3. 	import {
  4. 		coskey
  5. 	} from '@/api/common'
  6. 	import {
  7. 		qcloudTempSecreKey
  8. 	} from '@/api/newApi/mine'
  9. 	export default {
  10. 		props: {
  11. 			maxFilesNum: {
  12. 				type: Number,
  13. 				default: 1
  14. 			},
  15. 			play: {
  16. 				type: Boolean,
  17. 				default: false
  18. 			},
  19. 			videoCount:{
  20. 				type: Number,
  21. 				default: 1,
  22. 			}
  23. 		},
  24. 		data() {
  25. 			return {
  26. 				showPreview: false,
  27. 				previewItem: {
  28. 					url: "",
  29. 					type: "",
  30. 				},
  31. 				uploadTypeList: [{
  32. 						name: "图片",
  33. 						id: 1,
  34. 					},
  35. 					{
  36. 						name: "视频",
  37. 						id: 2,
  38. 					},
  39. 				],
  40. 				dataList: [],
  41. 				showUploadTypeSheet: false,
  42. 			};
  43. 		},
  44. 		created() {
  45. 			this.getCosFun()
  46. 		},
  47. 		methods: {
  48. 			//获取腾讯云配置
  49. 			getCosFun() {
  50. 				const fun = () => this.isMall ? qcloudTempSecreKey() : coskey({
  51. 					custom: {
  52. 						auth: true
  53. 					}
  54. 				})
  55. 				fun().then(res => {
  56. 					this.$u.vuex('vuex_coskey', res)
  57. 					const {
  58. 						credentials,
  59. 						expiredTime
  60. 					} = res
  61. 					this.$u.vuex('vuex_cosapi', new COS({
  62. 						ForcePathStyle: true,
  63. 						getAuthorization: (options, callback) => {
  64. 							callback({
  65. 								TmpSecretId: credentials.tmpSecretId,
  66. 								TmpSecretKey: credentials.tmpSecretKey,
  67. 								XCosSecurityToken: credentials.sessionToken,
  68. 								ExpiredTime: expiredTime
  69. 							});
  70. 						}
  71. 					}))
  72. 				})
  73. 			},
  74. 			// 获取附件列表-查看或编辑时候用
  75. 			getFileList() {
  76. 				let data = {
  77. 					id: id,
  78. 				};
  79. 				getFileList(data).then((res) => {
  80. 					if (res.code === 200) {
  81. 						this.dataList = res.result;
  82. 						this.dataList.forEach((item) => {
  83. 							item,
  84. 							(item.tempFilePath = `域名/file/downloadFile?filePath=${item.filePath}`);
  85. 							//tempFilePath：文件的临时地址，或者拼一个获取文件临时地址的接口，临时文件地址才可以预览
  86. 						});
  87. 					}
  88. 				});
  89. 			},
  90. 			// 打开预览
  91. 			toPreview(item) {
  92. 				this.showPreview = true;
  93. 				this.previewItem = {
  94. 					url: item.url,
  95. 					type: item.type,
  96. 				};
  97. 			},
  98. 			// 关闭预览
  99. 			closePreview() {
  100. 				console.log(1111)
  101. 				this.showPreview = false
  102. 				this.previewItem = {
  103. 					url: "",
  104. 					fileType: "",
  105. 				};
  106. 			},
  107. 			// 移除文件
  108. 			removeFile(index) {
  109. 				let that = this;
  110. 				uni.showModal({
  111. 					title: "提示",
  112. 					content: "确定删除此项吗？",
  113. 					success: function(res) {
  114. 						if (res.confirm) {
  115. 							that.dataList.splice(index, 1);
  116. 							that.$emit('success', that.dataList)
  117. 						}
  118. 					},
  119. 				});
  120. 			},
  121. 			// 上传图片
  122. 			chooseImage() {
  123. 				let that = this;
  124. 				uni.chooseImage({
  125. 					count: this.maxFilesNum - this.dataList.length, //默认100
  126. 					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
  127. 					sourceType: ["album", "camera"],
  128. 					success: ({
  129. 						tempFiles
  130. 					}) => {
  131. 						//   图片批量上传
  132. 						tempFiles.map(({
  133. 							path,
  134. 							name,
  135. 							type,
  136. 							size
  137. 						}) => {
  138. 							this.uploadFilePromise({
  139. 								url: path,
  140. 								name,
  141. 								type: 'image',
  142. 								size
  143. 							}).then(result => {
  144. 								this.dataList.push(result)
  145. 								this.$emit('success', this.dataList)
  146. 							})
  147. 						})
  148. 					},
  149. 				});
  150. 			},
  151. 			// 上传视频
  152. 			chooseVideo() {
  153. 				let that = this;
  154. 				uni.chooseVideo({
  155. 					sourceType: ["album", "camera"],
  156. 					success: ({
  157. 						tempFile,
  158. 						duration,
  159. 						tempFilePath,
  160. 						size,
  161. 						name
  162. 					}) => {
  163. 						console.log({
  164. 						tempFile,
  165. 						duration,
  166. 						tempFilePath,
  167. 						size,
  168. 						name
  169. 					})
  170. 						this.uploadFilePromise({
  171. 							url: tempFilePath,
  172. 							name,
  173. 							type: 'video',
  174. 							size
  175. 						}).then(result => {
  176. 							console.log('result', result)
  177. 							this.dataList.push(result)
  178. 							this.$emit('success', this.dataList)
  179. 						})
  180. 					},
  181. 				});
  182. 			},
  183. 			// 选择上传文件类型
  184. 			chooseUploadType({
  185. 				id
  186. 			}) {
  187. 				if (id === 1) {
  188. 					// 图片
  189. 					this.chooseImage();
  190. 				} else if (id === 2) {
  191. 					// 视频
  192. 					
  193. 					if(this.dataList.filter(ele=>ele.type == 'video').length < this.videoCount) this.chooseVideo()
  194. 					else uni.showToast({ title: `最多只能上传${this.videoCount}个视频`, icon: "none", });
  195. 				}
  196. 			},
  197. 			//  打开文件上传选择类型弹窗
  198. 			toShowChooseSheet() {
  199. 				if (this.dataList.length >= this.maxFilesNum) {
  200. 					uni.showToast({
  201. 						title: `最多只能上传${this.maxFilesNum}个文件`,
  202. 						icon: "none",
  203. 					});
  204. 					return false;
  205. 				} else {
  206. 					console.log(33333, '++++++++++', this.dataList.length, this.maxFilesNum)
  207. 					this.showUploadTypeSheet = true;
  208. 				}
  209. 			},
  210. 			uploadFilePromise({
  211. 				url,
  212. 				name,
  213. 				type
  214. 			}) {
  215. 				return new Promise((resolve, reject) => {
  216. 					if (url) {
  217. 						var oldStr = url.match('[^/]+(?!.*/)')[0]
  218. 						var newStr = this.vuex_coskey.tempUploadPath + oldStr
  219. 						// #ifdef H5
  220. 						newStr += name.slice(-4)
  221. 						// #endif
  222. 						this.vuex_cosapi.postObject({
  223. 							Bucket: this.vuex_coskey.bucket,
  224. 							Region: this.vuex_coskey.region,
  225. 							Key: newStr,
  226. 							FilePath: url
  227. 						}, (err, data) => {
  228. 							console.log('+++++++++++++++++++++++++++++++++++', newStr,data)
  229. 							if (data) resolve({
  230. 								url: `https://${data.Location}`,
  231. 								temp: newStr,
  232. 								type
  233. 							})
  234. 							else uni.showToast({
  235. 								icon: 'none',
  236. 								position: 'center',
  237. 								title: '上传失败，请重新上传'
  238. 							})
  239. 						})
  240. 					}
  241. 				})
  242. 			},
  243. 		},
  244. 	}
  245. </script>
  1. <style lang="scss" scoped>
  2. 	.annex-wrap {
  3. 		width: 100%;
  4.  
  5. 		.err-color {
  6. 			color: #f00;
  7. 		}
  8.  
  9. 		.border-dashed {
  10. 			margin: 24rpx 0;
  11. 			border: 1px dashed #eff0f2;
  12. 		}
  13.  
  14. 		.icon-arrow {
  15. 			margin-left: 12rpx;
  16. 		}
  17.  
  18. 		.annex-box {
  19. 			background: #ffffff;
  20. 			border-radius: 10px;
  21. 			// margin-top: 24rpx;
  22. 			color: #475569;
  23. 			// margin-top: 24rpx;
  24. 			// padding: 24rpx 34rpx;
  25. 			position: relative;
  26. 			overflow: hidden;
  27. 			position: relative;
  28. 			line-height: 1.6;
  29.  
  30. 			.lab {
  31. 				font-size: 28rpx;
  32. 				color: #475569;
  33. 				padding: 10rpx;
  34. 			}
  35.  
  36. 			&.select-box {
  37. 				padding: 0 34rpx;
  38.  
  39. 				.u-form-item {
  40. 					color: #475569;
  41. 					padding: 16rpx 0;
  42. 				}
  43. 			}
  44.  
  45. 			.mt-10 {
  46. 				margin-top: 10rpx;
  47. 			}
  48.  
  49. 			.top {
  50. 				position: relative;
  51.  
  52. 				.left {
  53. 					margin-right: 150rpx;
  54. 				}
  55.  
  56. 				.title {
  57. 					font-size: 34rpx;
  58. 					color: #303133;
  59. 					font-weight: 550;
  60. 				}
  61.  
  62. 				.desc {
  63. 					color: #929aa5;
  64. 					font-size: 24rpx;
  65. 				}
  66.  
  67. 				.user-tag {
  68. 					margin-left: 24rpx;
  69. 					background-color: #f4f9ff;
  70. 					color: #1890ff;
  71. 					font-size: 22rpx;
  72. 					display: inline-block;
  73. 					border-radius: 6rpx;
  74. 					padding: 4rpx 20rpx;
  75.  
  76. 					.text {
  77. 						margin-left: 10rpx;
  78. 					}
  79. 				}
  80.  
  81. 				.right-icon {
  82. 					position: absolute;
  83. 					right: 0rpx;
  84. 					top: -20rpx;
  85.  
  86. 					.icon {
  87. 						width: 170rpx;
  88. 						height: 170rpx;
  89. 					}
  90. 				}
  91.  
  92. 				.result-items {
  93. 					overflow: hidden;
  94.  
  95. 					.result-item {
  96. 						width: 33%;
  97. 						float: left;
  98. 						padding: 12rpx 0;
  99. 						text-align: center;
  100. 						position: relative;
  101.  
  102. 						.red {
  103. 							color: #ff7676;
  104. 						}
  105. 					}
  106.  
  107. 					.result-item:after {
  108. 						height: 60rpx;
  109. 						width: 1px;
  110. 						border-left: 1px solid #eff0f2;
  111. 						content: "";
  112. 						display: inline-block;
  113. 						position: absolute;
  114. 						right: 0;
  115. 						top: 50%;
  116. 						transform: translateY(-50%);
  117. 					}
  118.  
  119. 					.result-item:nth-child(3n):after {
  120. 						display: none;
  121. 					}
  122.  
  123. 					.name {
  124. 						color: #929aa5;
  125. 						font-size: 24rpx;
  126. 					}
  127.  
  128. 					.num {
  129. 						color: #303133;
  130. 						font-size: 30rpx;
  131. 					}
  132. 				}
  133. 			}
  134. 		}
  135. 		
  136. 		
  137.  
  138. 		.file-list-item {
  139. 			width: 172rpx;
  140. 			padding: 20rpx;
  141. 			height: 172rpx;
  142. 			margin-right: 10rpx;
  143. 			position: relative;
  144. 			display: inline-block;
  145. 			margin-bottom: 30rpx;
  146. 			overflow: hidden;
  147.  
  148. 			&-inner {
  149. 				position: absolute;
  150. 				left: 0;
  151. 				right: 0;
  152. 				top: 0;
  153. 				bottom: 0;
  154. 				width: 100%;
  155. 				height: 100%;
  156. 				display: flex;
  157.  
  158. 				.upload-temp-img {
  159. 					max-width: 100%;
  160. 					max-height: 100%;
  161. 					border-radius: 10rpx;
  162. 				}
  163. 			}
  164.  
  165. 			.upload-btn {
  166. 				// border: 2px dashed #e2e8f0;
  167. 				border: 2rpx solid #e2e8f0;
  168. 				border-radius: 10rpx;
  169. 				background: #fff;
  170. 				text-align: center;
  171. 				font-size: 26rpx;
  172. 				color: #929aa5;
  173. 				cursor: pointer;
  174. 			}
  175.  
  176. 			&:nth-child(3n) {
  177. 				margin-right: 0;
  178. 			}
  179.  
  180. 			.file-area {
  181. 				position: relative;
  182. 				display: flex;
  183. 				align-items: center;
  184. 				justify-content: center;
  185. 				background: rgba(77, 151, 255, 0.05);
  186. 				text-align: center;
  187. 				width: 100%;
  188. 				border-radius: 10rpx;
  189.  
  190. 				.name {
  191. 					white-space: nowrap;
  192. 					overflow: hidden;
  193. 					text-overflow: ellipsis;
  194. 					width: 160rpx;
  195. 				}
  196.  
  197. 				.icon-file {
  198. 					width: 60rpx;
  199. 					height: 74rpx;
  200. 				}
  201.  
  202. 				video {
  203. 					width: 100%;
  204. 					height: 100%;
  205. 				}
  206. 			}
  207.  
  208. 			.close-btn {
  209. 				position: absolute;
  210. 				right: 0;
  211. 				top: 0;
  212. 				background: rgba(71, 85, 105, 0.3);
  213. 				border-radius: 0px 10rpx 0px 10rpx;
  214. 				display: inline-block;
  215. 				width: 40rpx;
  216. 				height: 40rpx;
  217. 				cursor: pointer;
  218. 				text-align: center;
  219. 				color: #fff;
  220. 				z-index: 9;
  221. 			}
  222. 		}
  223. 		.file-list-item:nth-child(3n){
  224. 			margin-right: 0;
  225. 		}
  226. 		.file-list-item:last-child:nth-child(3n-1){
  227. 			margin-right: 240rpx;
  228. 		}
  229. 	}
  230.  
  231. 	.preview-content {
  232. 		width: 100vw;
  233. 		// height: 90vh;
  234. 		text-align: center;
  235. 		display: flex;
  236. 		align-items: center;
  237.  
  238. 		video {
  239. 			width: 100%;
  240. 			height: 100%;
  241. 		}
  242. 	}
  243.  
  244. 	/deep/ .pop {
  245. 		.u-popup__content {
  246. 			background-color: unset;
  247. 		}
  248. 	}
  249. 	
  250. 	.file-list{
  251. 		justify-content: space-between;
  252. 	}
  253. </style>

使用

  1. <template>
  2. 	<view class="containerbox">
  3. 		<my-upload :maxFilesNum='6' width="65.2" height="65.2" @success='uploadSuccess' :videoCount="3"></my-upload>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	import myUpload from '@/pages/newPages/mall/music/components/my-upload.vue'
  9. 	import form from './form'
  10. 	export default {
  11. 		components: { myUpload },
  12. 		methods: {
  13.             uploadSuccess(e){
  14. 				console.log(e)
  15. 			}
  16.         }
  17.     }
  18. </script>

效果展示

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号