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

uniapp 附件（图片、pdf、word、excle）上传、在线预览 （Android、Ios）（附送250套精选微信小程序源码）_uniapp 上传excel文件

作者：我家自动化 | 2024-05-15 01:44:21

赞

踩

uniapp 上传excel文件

一、PDF预览

1、下载PDF预览相关文件

2、使用步骤

  • 在  static  文件夹下新建  pdf  文件夹，将解压文件放进  pdf  文件夹下（看网上很多博主把文件夹放在根目录里，我反正之前试到最后始终无法打开预览请求的PDF文件！  避坑  ：放在  static 文件夹下就没问题了）
  • 如图所示：

tool.js写打开pdf方法

  1. //PDF文件预览-Android（IOS直接打开）
  2. 	openPDF : (filePath) => {
  3. 		//检查终端
  4. 		uni.getSystemInfo({
  5. 			success: function(e) {
  6. 				//如果是安卓用第三方
  7. 				if (e.platform == 'android' || e.platform == 'windows') {
  8. 					//filepath带参数的 所以用缓存带过去
  9. 					uni.setStorageSync('openPDF_filePath', filePath)
  10. 					uni.navigateTo({
  11. 						url: `/pages/openPDF/index`
  12. 					})
  13. 				} else {
  14. 					//ios直接打开pdf
  15. 					uni.showLoading({
  16. 						title: '文档打开中...',
  17. 						mask: true
  18. 					})
  19. 					uni.downloadFile({
  20. 						url: filePath,
  21. 						complete: (res) => {
  22. 							uni.openDocument({
  23. 								filePath: res.tempFilePath,
  24. 								success: function(e) {
  25. 									uni.hideLoading()
  26. 									console.log('打开文档成功');
  27. 								}
  28. 							});
  29. 	
  30. 						}
  31. 					});
  32. 				}
  33. 			}
  34. 		})
  35. 	},

页面/pages/openPDF/index

  1. <template>
  2. 	<view style="width: 100%;" >
  3. 		<web-view  :src="webViewUrl"></web-view>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. 	data() {
  10. 		return {
  11. 			webViewUrl: '',
  12. 		}
  13. 	},
  14. 	methods : {
  15. 	},
  16. 	onLoad(options) {
  17. 		//https://www.sichewang.com/62a00a5e11c381654655582.pdf
  18. 		let path = uni.getStorageSync('openPDF_filePath')
  19. 		let fileUrl = encodeURIComponent(path)
  20. 		this.webViewUrl = `/static/openPDF/html/web/viewer.html?file=${fileUrl}`
  21. 	}
  22. }
  23. </script>
  24.  
  25. <style>
  26. </style>

main.js全局引入tool.js

  1. import tool from '@/utils/tool'
  2.  
  3.  
  4. Vue.prototype.$tool = tool

使用

  1. if (this.fjClickObj.file_name.includes('pdf')) {
  2. 					let url = this.$Api.url + '/get_uploads?sys=602&url=' + this.fjClickObj.url;
  3. 					console.log(url)
  4. 					this.$tool.openPDF(url)
  5. 				}

二、word、excle 预览

  1. if (this.fjClickObj.file_name.includes('doc') || this.fjClickObj.file_name.includes('xls')) {
  2. 					let that = this
  3. 					let url = this.$Api.url + '/get_uploads?sys=602&url=' + this.fjClickObj.url;
  4. 					console.log(url)
  5. 					uni.downloadFile({
  6. 						url: url,
  7. 						success: function(res) {
  8. 							let filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);
  9. 							console.log(filepathss)
  10. 							setTimeout(
  11. 								() =>
  12. 								uni.openDocument({
  13. 									filePath: filepathss,
  14. 									showMenu: false,
  15. 									success: function() {
  16. 										console.log("打开文档成功");
  17. 									},
  18. 									fail: function() {
  19. 										uni.showToast({
  20. 											title: '暂不支持此类型',
  21. 											duration: 2000,
  22. 											icon: "none",
  23. 										});
  24. 									}
  25. 								}),
  26. 								1000
  27. 							);
  28. 						},
  29. 						fail: function(res) {
  30. 							console.log(res); //失败
  31. 						}
  32. 					});
  33. 				}

三、图片预览

1、简单预览

  1. uni.previewImage({
  2. 						current: index,
  3. 						urls: urls,
  4. 						success: function(e) {
  5. 							console.log('预览成功');
  6. 						}
  7. 					})

2、预览加长按保存

  1. //图片预览
  2. 	previewImage : (urls, current = 0) => {
  3. 		uni.previewImage({
  4. 			current: current,
  5. 			urls: urls,
  6. 			longPressActions: {
  7. 				itemList: ['保存图片'],
  8. 				success: function(data) {
  9. 					var url = urls[data.index]
  10. 					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  11. 					// 先下载图片
  12. 					uni.downloadFile({
  13. 					    url,
  14. 					    success: (res) => {
  15. 					        // 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
  16. 					        uni.saveImageToPhotosAlbum({
  17. 					            filePath: res.tempFilePath,
  18. 					            success: () => {
  19. 									uni.showToast({ title: "保存成功！" , icon:'none'});
  20. 					            },
  21. 					            fail: () => {
  22. 									uni.showToast({ title: "保存失败", icon : 'none' });
  23. 					            },
  24. 					        });
  25. 					    },
  26. 					});
  27. 				}
  28. 			}
  29. 		});
  30. 	},

四、附件上传（图片、PDF、word、excle）

  1. uploadImg(eleName, index) {
  2. 				var vue = this;
  3. 				uni.getSystemInfo({
  4. 					success: function(e) {
  5. 						vue.deviceType = e.platform
  6. 					}
  7. 				})
  8. 				let device = this.deviceType.toLowerCase() == ('ios' || 'macos') ? 'ios' : 'android'
  9. 				console.log(device)
  10. 				if (device == 'android') {
  11. 					uni.showActionSheet({
  12. 						itemList: ['选择图片', '选择文件'],
  13. 						success: (res) => {
  14. 							console.log(res)
  15. 							if (res.tapIndex == 0) {
  16. 								// 从相册中选
  17. 								vue.$store.commit('setIsHideByChooseFile', true)
  18. 								uni.chooseImage({
  19. 									count: 9,
  20. 									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  21. 									sourceType: ['album'], //从相册选择
  22. 									success: (image) => {
  23. 										console.log(image)
  24. 										var temp = ''
  25. 										if (image.tempFiles && image.tempFiles.length > 0) {
  26. 											image.tempFiles.forEach(item6 => {
  27. 												// #ifdef H5
  28. 												temp = item6.name
  29. 												// #endif
  30.  
  31. 												// #ifdef APP-PLUS
  32. 												temp = item6.path.substring(item6.path
  33. 													.lastIndexOf('/') + 1, item6.path
  34. 													.length)
  35. 												// #endif
  36.  
  37. 												//H5
  38. 												console.log(temp)
  39.  
  40. 												//获取扩展名
  41. 												var nameKZ = temp.substring(temp
  42. 													.lastIndexOf(".") + 1, temp.length);
  43. 												console.log(nameKZ);
  44.  
  45. 												if (nameKZ.includes('doc') || nameKZ
  46. 													.includes('xls') || nameKZ.includes(
  47. 														'pdf') || nameKZ.includes('png') ||
  48. 													nameKZ.includes('jpg') || nameKZ
  49. 													.includes('jpeg') || nameKZ.includes(
  50. 														'bmp')) {} else {
  51. 													uni.showToast({
  52. 														title: '附件只能上传图片、pdf、word、excel',
  53. 														icon: 'none'
  54. 													});
  55. 													return
  56. 												}
  57.  
  58. 												let tempUrl = ''
  59. 												let tempName = ''
  60. 												//逐个上传   单张图片上传
  61. 												uni.showLoading({
  62. 													title: '附件上传中...'
  63. 												});
  64. 												this.$Api.uploadFile([item6.path], 390000,
  65. 													res => {
  66. 														console.log(res)
  67. 														tempUrl = this.$Api.url +
  68. 															'/get_uploads?sys=602&url=' +
  69. 															res[0].file_path
  70. 														tempName = res[0].file_name
  71. 														console.log(tempUrl)
  72.  
  73. 														let data = {
  74. 															url: tempUrl,
  75. 															file_url: res[0].file_path,
  76. 															file_name: tempName,
  77. 															file_size: (item6
  78. 																	.size / 1024)
  79. 																.toFixed(1) + 'kb',
  80. 															file_ext: temp
  81. 																.substring(temp
  82. 																	.lastIndexOf(
  83. 																		'.') + 1,
  84. 																	temp.length)
  85. 														}
  86.  
  87. 														this.arrs_otherProfile.push(
  88. 															data)
  89. 														console.log(this
  90. 															.arrs_otherProfile)
  91. 														this.$forceUpdate()
  92. 														uni.hideLoading();
  93. 													}, e => {
  94. 														uni.hideLoading();
  95. 													})
  96. 											})
  97. 										}
  98. 									}
  99. 								});
  100. 							} else if (res.tapIndex == 1) {
  101. 								var _this = this
  102. 								// 选择文件
  103. 								vue.$store.commit('setIsHideByChooseFile', true)
  104. 								chooseFile(url => {
  105. 									console.log(url)
  106. 									// /storage/emulated/0/DCIM/Screenshots/IMG_20221105_151817.jpg
  107. 									//获取扩展名
  108. 									var nameKZ = url.substring(url.lastIndexOf(".") +
  109. 										1, url.length);
  110. 									console.log(nameKZ);
  111. 									if (nameKZ.includes('doc') || nameKZ.includes(
  112. 											'xls') || nameKZ.includes('pdf') || nameKZ
  113. 										.includes('png') || nameKZ.includes('jpg') ||
  114. 										nameKZ.includes('jpeg') || nameKZ.includes(
  115. 											'bmp')) {
  116. 									} else {
  117. 										uni.showToast({
  118. 											title: '附件只能上传图片、pdf、word、excel',
  119. 											icon: 'none'
  120. 										});
  121. 										return
  122. 									}
  123. 									//获取文件名
  124. 									var name = url.substring(url.lastIndexOf("/") + 1,
  125. 										url.length);
  126. 									console.log(name);
  127. 									uni.showLoading({
  128. 										title: '附件上传中...'
  129. 									});
  130. 									_this.$Api.uploadFile([url], 390000, res => {
  131. 										console.log(res)
  132. 										let file_path = _this.$Api.url +
  133. 											'/get_uploads?sys=602&url=' + res[
  134. 												0].file_path
  135. 										let data = {
  136. 											url: file_path,
  137. 											file_url: res[0].file_path,
  138. 											file_name: name,
  139. 											file_ext: name.substring(name
  140. 												.lastIndexOf('.') + 1,
  141. 												name.length)
  142. 										}
  143. 										_this.arrs_otherProfile.push(data)
  144. 										console.log(_this.arrs_otherProfile)
  145. 										uni.hideLoading();
  146. 									}, e => {
  147. 										console.log(e)
  148. 										uni.hideLoading();
  149. 									})
  150. 								})
  151. 							}
  152. 						}
  153. 					})
  154. 				} else if (device == 'ios') {
  155. 					vue.$store.commit('setIsHideByChooseFile', true)
  156. 					// 从相册中选
  157. 					uni.chooseImage({
  158. 						count: 9,
  159. 						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  160. 						sourceType: ['album'], //从相册选择
  161. 						success: (image) => {
  162. 							console.log(image)
  163. 							var temp = ''
  164. 							if (image.tempFiles && image.tempFiles.length > 0) {
  165. 								image.tempFiles.forEach(item6 => {
  166. 									// #ifdef H5
  167. 									temp = item6.name
  168. 									// #endif
  169.  
  170. 									// #ifdef APP-PLUS
  171. 									temp = item6.path.substring(item6.path.lastIndexOf('/') + 1, item6
  172. 										.path.length)
  173. 									// #endif
  174.  
  175. 									//H5
  176. 									console.log(temp)
  177.  
  178. 									//获取扩展名
  179. 									var nameKZ = temp.substring(temp.lastIndexOf(".") + 1, temp
  180. 									.length);
  181. 									console.log(nameKZ);
  182.  
  183. 									if (nameKZ.includes('doc') || nameKZ.includes('xls') || nameKZ
  184. 										.includes('pdf') || nameKZ.includes('png') || nameKZ.includes(
  185. 											'jpg') || nameKZ.includes('jpeg') || nameKZ.includes('bmp')|| 
  186. 											nameKZ.includes('BMP') || nameKZ.includes('JPEG') ||nameKZ.includes('JPG') ||nameKZ.includes('PNG')
  187. 										) {} else {
  188. 										uni.showToast({
  189. 											title: '附件只能上传图片、pdf、word、excel',
  190. 											icon: 'none'
  191. 										});
  192. 										return
  193. 									}
  194.  
  195. 									let tempUrl = ''
  196. 									let tempName = ''
  197. 									//逐个上传   单张图片上传
  198. 									uni.showLoading({
  199. 										title: '附件上传中...'
  200. 									});
  201. 									this.$Api.uploadFile([item6.path], 390000, res => {
  202. 										console.log(res)
  203. 										tempUrl = this.$Api.url + '/get_uploads?sys=602&url=' +
  204. 											res[0].file_path
  205. 										tempName = res[0].file_name
  206. 										console.log(tempUrl)
  207.  
  208. 										let data = {
  209. 											url: tempUrl,
  210. 											file_url: res[0].file_path,
  211. 											file_name: tempName,
  212. 											file_size: (item6.size / 1024).toFixed(1) +
  213. 												'kb',
  214. 											file_ext: temp.substring(temp.lastIndexOf(
  215. 												'.') + 1, temp.length)
  216. 										}
  217.  
  218. 										this.arrs_otherProfile.push(data)
  219. 										console.log(this.arrs_otherProfile)
  220. 										this.$forceUpdate()
  221. 										uni.hideLoading();
  222. 									}, e => {
  223. 										// errorBack && errorBack(e)
  224. 										uni.hideLoading();
  225. 									})
  226. 								})
  227. 							}
  228. 						}
  229. 					});
  230. 				}
  231. 			},

Androd 选择附件的文件

  1. var chooseFile = function(callback, acceptType) {
  2.     
  3.     var CODE_REQUEST = 1000;
  4.     var main = plus.android.runtimeMainActivity();
  5.     if(plus.os.name == 'Android') {
  6.         console.log("666");
  7.         var Intent = plus.android.importClass('android.content.Intent');
  8.         var intent = new Intent(Intent.ACTION_GET_CONTENT);
  9.         intent.addCategory(Intent.CATEGORY_OPENABLE);
  10.         if(acceptType) {
  11.             intent.setType(acceptType);
  12.         } else {
  13.             intent.setType("*/*");
  14.         }
  15.         main.onActivityResult = (requestCode, resultCode, data)=>{
  16. 			console.log(data)
  17.             if(requestCode == CODE_REQUEST) {
  18.                 const uri = data.getData();
  19. 				
  20.                 plus.android.importClass(uri);
  21.                 const Build = plus.android.importClass('android.os.Build');
  22.                 const isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
  23. 				console.log(Build.VERSION.SDK_INT)
  24. 				console.log(Build.VERSION_CODES.KITKAT)
  25.                 const DocumentsContract = plus.android.importClass('android.provider.DocumentsContract');
  26. 				console.log(uri.getScheme())
  27.                 if(isKitKat && DocumentsContract.isDocumentUri(main, uri)) {
  28. 					console.log(uri.getAuthority())
  29.                     if("com.android.externalstorage.documents" == uri.getAuthority()) {
  30.                         console.log("6666");
  31.                         var docId = DocumentsContract.getDocumentId(uri);
  32.                         var split = docId.split(":");
  33.                         var type = split[0];
  34.                         console.log(type);
  35.                         if("primary" == type) {
  36.                             var Environment = plus.android.importClass('android.os.Environment');
  37. 							console.log(Environment.getExternalStorageDirectory() + "/" + split[1]);
  38.                             callback(Environment.getExternalStorageDirectory() + "/" + split[1]);
  39.                         } else {
  40.                             var System = plus.android.importClass('java.lang.System');
  41.                             var sdPath = System.getenv("SECONDARY_STORAGE");
  42. 							console.log(sdPath)
  43.                             if(sdPath) {
  44.                                 callback(sdPath + "/" + split[1]);
  45.                             }
  46.                         }
  47.                     }
  48.                     else if("com.android.providers.downloads.documents" == uri.getAuthority()) {
  49. 						console.log("7777");
  50.                         var id = DocumentsContract.getDocumentId(uri);
  51.                         var ContentUris = plus.android.importClass('android.content.ContentUris');
  52.                         var contentUri = ContentUris.withAppendedId(
  53.                         Uri.parse("content://downloads/public_downloads"), id);
  54.                         callback(getDataColumn(main, contentUri, null, null));
  55.                     }
  56.                     else if("com.android.providers.media.documents" == uri.getAuthority()) {
  57. 						console.log("8888");
  58.                         var docId = DocumentsContract.getDocumentId(uri);
  59.                         var split = docId.split(":");
  60.                         console.log(split);
  61.                         var type = split[0];
  62.                         console.log(type);
  63.                         var MediaStore = plus.android.importClass('android.provider.MediaStore');
  64.                         if("image" == type) {
  65.                             contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
  66.                         } else if("video" == type) {
  67.                             contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
  68.                         } else if("audio" == type) {
  69.                             contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
  70.                         }else{
  71.                              contentUri = MediaStore.Files.getContentUri("external");
  72.                         }
  73.  
  74.                         console.log(contentUri);
  75.                         var selection = "_id=?";
  76.                         var selectionArgs = new Array();
  77.                         selectionArgs[0] = split[1];
  78.  
  79.                         callback(getDataColumn(main, contentUri, selection, selectionArgs));
  80.                     }
  81.                 }
  82.  
  83.                 else if("content" == uri.getScheme()) {
  84. 					console.log("9999");
  85. 					console.log("9999",main);
  86. 					console.log("9999",uri);
  87.                     callback(getDataColumn(main, uri, null, null));
  88.                 }
  89.                 else if("file" == uri.getScheme()) {
  90. 					console.log("0000");
  91. 					console.log(uri.getPath());
  92.                     callback(uri.getPath());
  93.                 }
  94.             }
  95.         }
  96.         main.startActivityForResult(intent, CODE_REQUEST);
  97.     }
  98. }
  99.  
  100. function getDataColumn(main, uri, selection, selectionArgs) {
  101.         plus.android.importClass(main.getContentResolver());
  102.         let cursor = main.getContentResolver().query(uri, ['_data'], selection, selectionArgs,
  103.         null);
  104.         plus.android.importClass(cursor);
  105.         if(cursor != null && cursor.moveToFirst()) {
  106.         var column_index = cursor.getColumnIndexOrThrow('_data');
  107.         var result = cursor.getString(column_index);
  108. 		console.log(result);
  109.         cursor.close();
  110.         return result;
  111.         }
  112.         return null;
  113. }
  114. export default chooseFile

 附送250套精选项目源码

源码截图

源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/571026
推荐阅读
相关标签

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

  

闽ICP备14008679号