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

在小程序中使用formdata上传数据，可实现多文件上传

作者：我家小花儿 | 2024-04-08 00:51:26

赞

踩

在小程序中使用formdata上传数据，可实现多文件上传

1.下载formdata

GitHub - zlyboy/wx-formdata: 在小程序中使用formdata上传数据，可实现多文件上传

2. 前端页面

  1. <uni-collapse class='collapse' ref='collapse'>
  2.                 <uni-collapse-item v-for="(item, index) in attachmentList"
  3.                 :key="index"
  4.                 :title="item.dictName" class='collapse-item' title-border='show' :border='false'>
  5.                     <view class="content">
  6.                     <FileUploader  :attachment="item" :uniqueId='uniqueId' @handleHeight='handleHeight' v-model="item.attachmentIds" />
  7.                     </view>
  8.                 </uni-collapse-item>
  9.             </uni-collapse>
  10. attachmentList: [
  11.             {
  12.             "id": 1,
  13.             "dictCode": "XCDCTP",
  14.             "dictName": "现场调查图片",
  15.             "categoryCode": ",XCDCTP,",
  16.             "servicePhase": "sb",
  17.             "attachmentIds":[]
  18.             },
  19.         ],
  20.         isFetching: false,
  21.         uniqueId:'',

3.组件

  1. <template>
  2.  
  3. 	<view>
  4. 		<view class="file_list">
  5. 			<view class="file_list__box" v-for="(file,index) in fileList" :key="index" @click="fileActive(file)">
  6. 				<uni-icons type="paperclip" size="15"></uni-icons>
  7. 				<text>{{file.name}}</text>
  8. 				<view class="delete_file" @click.stop="deleteFile(index,file)">
  9. 					<uni-icons type="clear" size="16"></uni-icons>
  10. 				</view>
  11. 			</view>
  12. 		</view>
  13. 		<view class="uni-file-picker__container">
  14. 			<view class="file-picker__box" v-for="(image,index) in imageList" :key="index">
  15. 				<view class="file-picker__box-content">
  16. 					<image class="file-image" :src="image.url" mode="aspectFill" :data-src="image.url"
  17. 						@click.stop="previewImage">
  18. 					</image>
  19. 					<view class="icon-del-box" @click.stop="deleteImage(index,image)">
  20. 						<view class="icon-del"></view>
  21. 						<view class="icon-del rotate"></view>
  22. 					</view>
  23. 				</view>
  24. 			</view>
  25. 			<view class="file-picker__box" v-for="(video,index) in videoList" :key="index">
  26. 				<view class="file-picker__box-content">
  27. 					<video class="file-image" :src="video.url"></video>
  28. 					<view class="icon-del-box" @click.stop="deleteVideo(index,video)">
  29. 						<view class="icon-del"></view>
  30. 						<view class="icon-del rotate"></view>
  31. 					</view>
  32. 				</view>
  33. 			</view>
  34. 			<view v-if="VideoOfImagesShow" class="file-picker__box">
  35. 				<view class="file-picker__box-content is-add" @tap="chooseVideoImage">
  36. 					<slot>
  37. 						<view class="icon-add"></view>
  38. 						<view class="icon-add rotate"></view>
  39. 					</slot>
  40. 				</view>
  41. 			</view>
  42. 		</view>
  43. 	</view>
  44. </template>
  45.  
  46. <script>
  47. 	import {
  48. 		uploadFile,saveAttachInfo,deleteAttachment,uploadFileByName
  49. 	} from '@/service/api.js'
  50. 	import {
  51. 		showToast
  52. 	} from '@/utils/index.js'
  53. 	import {
  54. 		BASE_API_URL
  55. 	} from '@/common/config.js'
  56. 	import {
  57. 		appStorage
  58. 	} from '@/utils/storage.js'
  59. 	const FormData = require('@/utils/formdata/index.js')
  60. 	
  61. 	export default {
  62. 		props: {
  63. 			attachment: Object,
  64. 			uniqueId:String
  65. 		},
  66. 		data() {
  67. 			return {
  68. 				imageList: [], //图片
  69. 				videoList: [], //视频存放
  70. 				fileList: [], //文件
  71. 				ids: [],
  72. 				sourceTypeIndex: 2,
  73. 				sourceType: ['拍摄', '相册', '拍摄或相册'],
  74. 				VideoOfImagesShow: true,
  75. 				cameraList: [{
  76. 						value: 'back',
  77. 						name: '后置摄像头',
  78. 						checked: 'true'
  79. 					},
  80. 					{
  81. 						value: 'front',
  82. 						name: '前置摄像头'
  83. 					},
  84. 				],
  85. 				cameraIndex: 0,
  86. 				videoSuffix: ["AVI", "mov", "rmvb", "rm", "FLV", "mp4", "3GP"],
  87. 				suffix:['jpeg','png','jpg','JPG'],
  88. 				pageOfficeSuffix: ['doc', 'docx', 'xls', 'xlsx','pdf','PDF']
  89. 			}
  90. 		},
  91. 		created() {
  92. 			this.imageList = []; //图片
  93. 			this.videoList = []; //视频存放
  94. 			this.fileList = []; //文件
  95.  
  96. 			this.ids = [];
  97. 			if(this.attachment.fileList.length>0){
  98. 				this.setAttachmentData(this.attachment.fileList)
  99. 			}
  100. 		},
  101. 		watch: {
  102. 			ids(val) {
  103. 				this.$emit('input', val)
  104. 			},
  105. 		},
  106. 		methods: {
  107. 			chooseImages() {
  108. 				console.log('图片')
  109. 				let that = this;
  110. 				// 上传图片
  111. 				uni.chooseImage({
  112. 					count: 1, //默认9
  113. 					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  114. 					sourceType: ['album', 'camera'], //从相册选择
  115. 					success: async (response) => {
  116. 						console.log(response)
  117. 						let result = await that.fileSizeIsLessLimitSize(response.tempFilePaths[0])
  118. 						if (result) {
  119. 							showToast('图片质量过大')
  120. 							return;
  121. 						}
  122. 						uni.showLoading({
  123. 							mask: true
  124. 						})
  125. 						let igmFile = response.tempFilePaths;
  126. 						console.log(igmFile,'igmFile');
  127. 						console.log("===============================");
  128. 						let requestData = {
  129. 							"masterld":'1772150445546708994',
  130. 							"formGroupCode":'XMPG',
  131. 							"categoryCode":',XCDCTP,',
  132. 							"categoryName":'现场图片'
  133. 						}
  134. 						let token = appStorage.get('token');
  135. 						wx.uploadFile({
  136. 							url: `接口地址`,
  137. 							filePath: igmFile[0],
  138. 							name: 'file',
  139. 							formData: requestData,
  140. 							header: {
  141. 								'Blade-Auth': token
  142. 							},
  143. 							success: res=>{
  144. 								console.log(res)
  145. 								uni.hideLoading()
  146. 								if (res.code === '200') {
  147. 									let imgUrls = res.data
  148. 									let info = {
  149. 										url: BASE_API_URL + '/minio' + imgUrls.link.substring(that.findCharAt(
  150. 											imgUrls.link, '/', 2)),
  151. 										id: imgUrls.attachmentId
  152. 									}
  153. 									that.imageList = that.imageList.concat(info);
  154. 									that.ids = that.ids.concat(imgUrls.attachmentId);
  155. 									that.$emit('handleHeight')
  156. 									that.$_saveAttachInfo(imgUrls.attachmentId,imgUrls.link,imgUrls.originalName)
  157. 									// if (that.ids.length >= 5) {
  158. 									// 	that.VideoOfImagesShow = false;
  159. 									// } else {
  160. 									// 	that.VideoOfImagesShow = true;
  161. 									// }
  162. 								} else {
  163. 									showToast('操作失败')
  164. 								}
  165. 							}
  166. 						})
  167.  
  168.  
  169.  
  170.  
  171. 						// const formData = new FormData();
  172. 						// formData.append("masterld",'1772150445546708994')
  173. 						// formData.append("formGroupCode",'XMPG')
  174. 						// formData.append("categoryCode",',XCDCTP,')
  175. 						// formData.append("categoryName",'TP')
  176. 						// // 这里上传文件
  177. 						// formData.appendFile("file",igmFile[0], "file")
  178. 						// let data = formData.getData();
  179. 						// console.log('转化之后的数据111111',data);
  180. 						// let token = appStorage.get('token');
  181. 						// console.log("token",token);
  182. 						// // const [err, res] = await uploadFile(data);
  183. 						// // console.log(res,1666666);
  184. 						// wx.request({
  185. 						// 	// url: 'http://61.243.2.188:8000/api/miniapp-rc-gz/fileUpload/upload',
  186. 						// 	url: 'https://gznd.longersoftware.com/api/miniapp-rc-gz/fileUpload/upload',
  187. 						// 	method:'POST',
  188. 						// 	header: {
  189. 						// 		'content-type': data.contentType,
  190. 						// 		'Blade-Auth': token
  191. 						// 	},
  192. 						// 	data: data.buffer,
  193. 						// 	success: function (res) {
  194. 						// 		console.log(res,1777777);
  195. 						// 		// //上传成功
  196. 						// 		// that.setData({
  197. 						// 		// 	portrait: res.data.data
  198. 						// 		// });
  199. 						// 		// wx.showModal({
  200. 						// 		// title: '信息',
  201. 						// 		// content: res.data.message,
  202. 						// 		// confirmText: '确认'
  203. 						// 		// }); //showModal
  204. 						// 	}
  205. 						// });
  206. 						
  207. 						// const [err, res] = await uploadFile(
  208. 						// 	{url:'https://gznd.longersoftware.com',
  209. 						// 	filePath:igmFile,
  210. 						// 	data:{
  211. 						// 		masterld:'1772150445546708994',
  212. 						// 		formGroupCode:'XMPG',
  213. 						// 		categoryCode:",XCDCTP,",
  214. 						// 		categoryName:"现场调查图片,"
  215. 						// 	}
  216. 						// })
  217. 						// const [err, res] =  uploadFile(
  218. 						// 	'https://gznd.longersoftware.com',
  219. 						// 	igmFile,
  220. 						// 	{
  221. 						// 		masterld:'1772150445546708994',
  222. 						// 		formGroupCode:'XMPG',
  223. 						// 		categoryCode:",XCDCTP,",
  224. 						// 		categoryName:"现场调查图片,"
  225. 						// 	}
  226. 						// ).then
  227. 						// console.log('uploadFile',err, res);
  228. 						// uni.hideLoading()
  229. 						// if (err) {
  230. 						// 	showToast('操作失败')
  231. 						// 	return
  232. 						// }
  233. 						// if (res.code === 200) {
  234. 						// 	let imgUrls = res.data
  235. 						// 	let info = {
  236. 						// 		url: BASE_API_URL + '/minio' + imgUrls.link.substring(that.findCharAt(
  237. 						// 			imgUrls.link, '/', 2)),
  238. 						// 		id: imgUrls.attachId
  239. 						// 	}
  240. 						// 	that.imageList = that.imageList.concat(info);
  241. 						// 	that.ids = that.ids.concat(imgUrls.attachId);
  242. 						// 	that.$emit('handleHeight')
  243. 						// 	that.$_saveAttachInfo(imgUrls.attachId,imgUrls.link,imgUrls.originalName)
  244. 						// 	// if (that.ids.length >= 5) {
  245. 						// 	// 	that.VideoOfImagesShow = false;
  246. 						// 	// } else {
  247. 						// 	// 	that.VideoOfImagesShow = true;
  248. 						// 	// }
  249. 						// } else {
  250. 						// 	showToast(res.msg)
  251. 						// }
  252. 					},
  253. 				});
  254. 			},
  255.     		// importZcExcel(file){
  256. 			// 	// console.log('-file:',file,'-fileList:',fileList)
  257. 			// 	const formData = new FormData();
  258. 			// 	formData.append('excel', file.raw);
  259. 			// 	// console.log('文件：',formData);
  260. 			// 	let that=this;
  261. 			// 	importZc(formData).then(res => {
  262. 			// 		let data=res.data;
  263. 			// 		// console.log('xxxx:',data)
  264. 			// 		if(data && data.success){
  265. 			// 					this.$message.success(data.data);
  266. 			// 					that.searchChange();
  267. 			// 				}else{
  268. 			// 					this.$message.error('message:',data.msg);
  269. 			// 				}
  270. 			// 	});
  271. 			// },
  272. 			chooseVideoImage() {
  273. 				console.log('this.attachment',this.attachment)
  274. 				console.log('this.uniqueId',this.uniqueId)
  275. 				uni.showActionSheet({
  276. 					title: "选择上传类型",
  277. 					itemList: ['图片', '视频', '文件'],
  278. 					success: (res) => {
  279. 						console.log(res)
  280. 						if (res.tapIndex == 0) {
  281. 							this.chooseImages()
  282. 						} else if (res.tapIndex == 1) {
  283. 							this.chooseVideo()
  284. 						} else {
  285. 							this.chooseFile()
  286. 						}
  287. 					}
  288. 				})
  289. 			},
  290. 			chooseFile() {
  291. 				console.log('文件')
  292. 				let vm = this;
  293. 				wx.chooseMessageFile({
  294. 					count: 1,
  295. 					type: 'file',
  296. 					success: async (response) => {
  297. 						console.log('res--选取文件--', response);
  298. 						let result = await vm.fileSizeIsLessLimitSize(response.tempFiles[0].path)
  299. 						if (result) {
  300. 							showToast('文件质量过大')
  301. 							return;
  302. 						}
  303. 						let igmFile = response.tempFiles;
  304. 						uni.showLoading({
  305. 							mask: true
  306. 						})
  307. 						let name=igmFile[0].name;
  308. 						const [err, res] = await uploadFileByName(igmFile[0].path, {fileName:name})
  309. 						console.log('uploadFileByName',err, res);
  310. 						uni.hideLoading()
  311. 						if (err) {
  312. 							showToast('操作失败')
  313. 							return
  314. 						}
  315. 						console.log('上传文件', res)
  316. 						if (res.code === 200) {
  317. 							let files = res.data
  318. 							let info = {
  319. 								url: BASE_API_URL + '/minio' + files.link.substring(vm.findCharAt(files
  320. 									.link, '/', 2)),
  321. 								id: files.attachId,
  322. 								name:name
  323. 								// name:'文件'
  324. 							}
  325. 							vm.fileList = vm.fileList.concat(info);
  326. 							vm.ids = vm.ids.concat(files.attachId);
  327. 							vm.$emit('handleHeight')
  328. 							vm.$_saveAttachInfo(files.attachId,files.link,files.originalName)
  329. 						} else {
  330. 							showToast(res.msg)
  331. 						}
  332. 					}
  333. 				})
  334. 			},
  335. 			chooseImages2() {
  336. 				console.log('图片')
  337. 				let that = this;
  338. 				// 上传图片
  339. 				uni.chooseImage({
  340. 					count: 1, //默认9
  341. 					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  342. 					sourceType: ['album', 'camera'], //从相册选择
  343. 					success: async (response) => {
  344. 						console.log(response)
  345. 						let result = await that.fileSizeIsLessLimitSize(response.tempFilePaths[0])
  346. 						if (result) {
  347. 							showToast('图片质量过大')
  348. 							return;
  349. 						}
  350. 						uni.showLoading({
  351. 							mask: true
  352. 						})
  353. 						console.log(response,'response');
  354. 						let igmFile = response.tempFilePaths;
  355. 						console.log(igmFile,'igmFile');
  356. 						// const formData = new FormData();
  357. 						// formData.append("file",igmFile)
  358. 						// const [err, res] = await uploadFile(
  359. 						// 	{url:'https://gznd.longersoftware.com',
  360. 						// 	filePath:igmFile,
  361. 						// 	data:{
  362. 						// 		masterld:'1772150445546708994',
  363. 						// 		formGroupCode:'XMPG',
  364. 						// 		categoryCode:",XCDCTP,",
  365. 						// 		categoryName:"现场调查图片,"
  366. 						// 	}
  367. 						// })
  368. 						const [err, res] =  uploadFile(
  369. 							'https://gznd.longersoftware.com',
  370. 							igmFile,
  371. 							{
  372. 								masterld:'1772150445546708994',
  373. 								formGroupCode:'XMPG',
  374. 								categoryCode:",XCDCTP,",
  375. 								categoryName:"现场调查图片,"
  376. 							}
  377. 						).then
  378. 						// const [err, res] = await uploadFile('1772150445546708994','XMPG',formData,",XCDCTP,","现场调查图片,")
  379. 						// const [err, res] = await uploadFile(igmFile[0], {})
  380. 						console.log('uploadFile',err, res);
  381. 						uni.hideLoading()
  382. 						if (err) {
  383. 							showToast('操作失败')
  384. 							return
  385. 						}
  386. 						if (res.code === 200) {
  387. 							let imgUrls = res.data
  388. 							let info = {
  389. 								url: BASE_API_URL + '/minio' + imgUrls.link.substring(that.findCharAt(
  390. 									imgUrls.link, '/', 2)),
  391. 								id: imgUrls.attachId
  392. 							}
  393. 							that.imageList = that.imageList.concat(info);
  394. 							that.ids = that.ids.concat(imgUrls.attachId);
  395. 							that.$emit('handleHeight')
  396. 							that.$_saveAttachInfo(imgUrls.attachId,imgUrls.link,imgUrls.originalName)
  397. 							// if (that.ids.length >= 5) {
  398. 							// 	that.VideoOfImagesShow = false;
  399. 							// } else {
  400. 							// 	that.VideoOfImagesShow = true;
  401. 							// }
  402. 						} else {
  403. 							showToast(res.msg)
  404. 						}
  405. 					},
  406. 				});
  407. 			},
  408. 			chooseVideo() {
  409. 				console.log('视频')
  410. 				let that = this;
  411. 				// 上传视频
  412. 				uni.chooseVideo({
  413. 					maxDuration: 60,
  414. 					count: 1,
  415. 					camera: this.cameraList[this.cameraIndex].value,
  416. 					sourceType: ['album'],
  417. 					success: async (responent) => {
  418. 						console.log(responent)
  419. 						let videoFile = responent.tempFilePath;
  420. 						console.log(videoFile)
  421. 						let result = await that.fileSizeIsLessLimitSize(responent.tempFilePath)
  422. 						if (result) {
  423. 							showToast('图片质量过大')
  424. 							return;
  425. 						}
  426. 						uni.showLoading({
  427. 							mask: true
  428. 						})
  429. 						const [err, res] = await uploadFile(videoFile, {})
  430. 						uni.hideLoading()
  431. 						console.log(res)
  432. 						if (err) {
  433. 							showToast('操作失败')
  434. 							return
  435. 						}
  436. 						if (res.code === 200) {
  437. 							let videoUrls = res.data //百度支持
  438. 							let info = {
  439. 								url: BASE_API_URL + '/minio' + videoUrls.link.substring(that.findCharAt(
  440. 									videoUrls.link, '/', 2)),
  441. 								id: videoUrls.attachId
  442. 							}
  443. 							that.videoList = that.videoList.concat(info);
  444. 							that.ids = that.ids.concat(videoUrls.attachId);
  445. 							that.$emit('handleHeight')
  446. 							that.$_saveAttachInfo(videoUrls.attachId,videoUrls.link,videoUrls.originalName)
  447. 							// if (that.ids.length >= 5) {
  448. 							// 	that.VideoOfImagesShow = false;
  449. 							// } else {
  450. 							// 	that.VideoOfImagesShow = true;
  451. 							// }
  452. 						} else {
  453. 							showToast(res.msg)
  454. 						}
  455.  
  456. 						// this.src = responent.tempFilePath;  //头条
  457. 					}
  458. 				})
  459. 			},
  460. 			previewImage: function(e) {
  461. 				//预览图片
  462. 				var current = e.target.dataset.src
  463. 				let list = [];
  464. 				this.imageList.forEach((item) => {
  465. 					list.push(item.url)
  466. 				})
  467. 				uni.previewImage({
  468. 					current: current,
  469. 					urls: list
  470. 				})
  471. 			},
  472. 			deleteImage(index, item) {
  473. 				console.log(item)
  474. 				let that = this;
  475. 				uni.showModal({
  476. 					title: "提示",
  477. 					content: "是否要删除该图片",
  478. 					success: async (res) => {
  479. 						if (res.confirm) {
  480. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  481. 							console.log(response)
  482. 							if (error) {
  483. 								showToast('操作失败')
  484. 								return
  485. 							}
  486. 							if (response.code === 200) {
  487. 							that.imageList.splice(index, 1);
  488. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  489. 							// if (that.ids.length >= 5) {
  490. 							// 	that.VideoOfImagesShow = false;
  491. 							// } else {
  492. 							// 	that.VideoOfImagesShow = true;
  493. 							// }
  494. 							showToast(response.msg)
  495. 							that.$emit('handleHeight')
  496. 							}
  497. 						}
  498. 					}
  499. 				})
  500. 			},
  501. 			deleteVideo(index, item) {
  502. 				let that = this;
  503. 				uni.showModal({
  504. 					title: "提示",
  505. 					content: "是否要删除此视频",
  506. 					success: async (res) => {
  507. 						if (res.confirm) {
  508. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  509. 							if (error) {
  510. 								showToast('操作失败')
  511. 								return
  512. 							}
  513. 							if (response.code === 200) {
  514. 							that.videoList.splice(index, 1);
  515. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  516. 							// if (that.ids.length >= 5) {
  517. 							// 	that.VideoOfImagesShow = false;
  518. 							// } else {
  519. 							// 	that.VideoOfImagesShow = true;
  520. 							// }
  521. 							showToast(response.msg)
  522. 							that.$emit('handleHeight')
  523. 							}
  524. 						}
  525. 					}
  526. 				})
  527. 			},
  528. 			fileActive(file) {
  529. 				let that=this;
  530. 				uni.showActionSheet({
  531. 					title: "文件操作",
  532. 					itemList: ['查看'],
  533. 					success: (res) => {
  534. 						console.log(res)
  535. 						if (res.tapIndex == 0) {
  536. 							console.log('查看', file)
  537. 							this.downloadFilePreview(file)
  538. 						}
  539. 					}
  540. 				})
  541. 			},
  542. 			downloadFilePreview (file) {
  543. 			      uni.showLoading({
  544. 					mask: true
  545. 				  })
  546. 			      wx.downloadFile({
  547. 			        url: file.url, // 这里换上自己的pdf地址
  548. 			        header: {
  549. 			          'content-type': 'application/json'
  550. 			        },
  551. 			        success: function (res) {
  552. 						console.log(res)
  553. 			          var Path = res.tempFilePath // 返回的文件临时地址，用于后面打开本地预览所用
  554. 					
  555. 						wx.openDocument({
  556. 							filePath: Path,
  557. 							success: function (res) {
  558. 							  uni.hideLoading()
  559. 							},
  560. 							fail: function (res) {
  561. 							  showToast('打开失败')
  562. 							}
  563. 						})			
  564. 					  
  565. 			        },
  566. 			        fail: function (res) {
  567. 					  showToast('下载失败')
  568. 			        }
  569. 			      })
  570. 			    },
  571. 			deleteFile(index, item) {
  572. 				let that = this;
  573. 				uni.showModal({
  574. 					title: "提示",
  575. 					content: "是否要删除此文件",
  576. 					success: async (res) => {
  577. 						if (res.confirm) {
  578. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  579. 							if (error) {
  580. 								showToast('操作失败')
  581. 								return
  582. 							}
  583. 							if (response.code === 200) {
  584. 							that.fileList.splice(index, 1);
  585. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  586. 							that.$emit('handleHeight')
  587. 							showToast(response.msg)
  588. 							}
  589. 						}
  590. 					}
  591. 				})
  592. 			},
  593. 			async $_saveAttachInfo(id,link,originalName){
  594. 				let data={
  595. 					bladeAttachmentPath:link,
  596. 					bladeAttachmentId:id,
  597. 					dictCode:this.attachment.dictCode,
  598. 					categoryCode:this.attachment.categoryCode,
  599. 					dictName:this.attachment.dictName,
  600. 					uniqueId:this.uniqueId,
  601. 					originalName:originalName
  602. 				}
  603. 				const [err, res] = await saveAttachInfo(data)
  604. 				if (err) {
  605. 					return
  606. 				}
  607. 				if (res.code === 200) {
  608. 					
  609. 				}
  610. 			},
  611. 			//判断文件大小是否满足需求,limitSize的单位是kb
  612. 			fileSizeIsLessLimitSize(filePath) {
  613. 				//获取文件信息
  614. 				let result = false;
  615. 				return new Promise((resolve, reject) => {
  616. 					uni.getFileInfo({
  617. 						filePath: filePath,
  618. 						success: (res) => {
  619. 							console.log("文件大小", res.size / 1024, 'kb');
  620. 							if (res.size / 1024 > 1024 * 10) {
  621. 								result = true;
  622. 							}
  623. 							resolve(result);
  624. 						},
  625. 						fail: (err) => {
  626. 							reject(result)
  627. 						}
  628. 					})
  629. 				})
  630. 			},
  631. 			findCharAt(str, cha, num) {
  632. 				var x = str.indexOf(cha);
  633. 				for (var i = 0; i < num; i++) {
  634. 					x = str.indexOf(cha, x + 1);
  635. 				}
  636. 				return x;
  637. 			},
  638. 			setAttachmentData(data){
  639. 				console.log('图片数据',data)
  640. 				let that=this;
  641. 				data.forEach(item=>{
  642. 					let suffix = item.originalName.substring(item.originalName.lastIndexOf('.') + 1, item.originalName.length);
  643. 					let info = {
  644. 						// url: BASE_API_URL + '/minio' + item.bladeAttachmentPath.substring(that.findCharAt(item
  645. 						// 	.bladeAttachmentPath, '/', 2)),
  646. 						url: BASE_API_URL + '/minio' + item.bladeAttachmentPath,
  647. 						id: item.bladeAttachmentId,
  648. 						name:item.originalName
  649. 					}
  650. 					that.ids = that.ids.concat(item.bladeAttachmentId);
  651. 					if(this.suffix.indexOf(suffix)>=0){
  652. 						that.imageList = that.imageList.concat(info);
  653. 					} else if(this.videoSuffix.indexOf(suffix)>=0){
  654. 						that.videoList = that.videoList.concat(info);
  655. 					}else if(this.pageOfficeSuffix.indexOf(suffix)>=0){
  656. 						that.fileList = that.fileList.concat(info);
  657. 					}
  658. 				})	
  659. 			}
  660. 		}
  661. 	}
  662. </script>
  663.  
  664. <style>
  665. 	.uni-file-picker__container {
  666. 		display: flex;
  667. 		box-sizing: border-box;
  668. 		flex-wrap: wrap;
  669. 		margin: -5rpx;
  670. 		justify-content: start;
  671. 	}
  672.  
  673. 	.file-picker__box {
  674. 		position: relative;
  675. 		width: 200rpx;
  676. 		height: 0;
  677. 		padding-top: 200rpx;
  678. 		box-sizing: border-box;
  679. 	}
  680.  
  681. 	.file-picker__box-content {
  682. 		position: absolute;
  683. 		top: 0;
  684. 		right: 0;
  685. 		bottom: 0;
  686. 		left: 0;
  687. 		margin: 10rpx;
  688. 		border: 1rpx #eee solid;
  689. 		border-radius: 5px;
  690. 		overflow: hidden;
  691. 	}
  692.  
  693. 	.file-image {
  694. 		width: 100%;
  695. 		height: 100%;
  696. 	}
  697.  
  698. 	.is-add {
  699. 		display: flex;
  700. 		align-items: center;
  701. 		justify-content: center;
  702. 	}
  703.  
  704. 	.icon-add {
  705. 		width: 50rpx;
  706. 		height: 5rpx;
  707. 		background-color: #f1f1f1;
  708. 		border-radius: 2px;
  709. 	}
  710.  
  711. 	.rotate {
  712. 		position: absolute;
  713. 		transform: rotate(90deg);
  714. 	}
  715.  
  716. 	.icon-del-box {
  717. 		display: flex;
  718. 		align-items: center;
  719. 		justify-content: center;
  720. 		position: absolute;
  721. 		top: 3rpx;
  722. 		right: 3rpx;
  723. 		height: 26rpx;
  724. 		width: 26rpx;
  725. 		border-radius: 50%;
  726. 		background-color: rgba(0, 0, 0, 0.5);
  727. 		z-index: 2;
  728. 		transform: rotate(-45deg);
  729. 	}
  730.  
  731. 	.icon-del {
  732. 		width: 15rpx;
  733. 		height: 2rpx;
  734. 		background-color: #fff;
  735. 		border-radius: 2rpx;
  736. 	}
  737.  
  738. 	,
  739. 	.file_list__box {
  740. 		margin-bottom: 20rpx;
  741. 		display: flex;
  742. 		align-items: center;
  743. 		position: relative;
  744. 	}
  745.  
  746. 	.file_list__box text {
  747. 		font-size: 32rpx;
  748. 		padding-left: 5rpx;
  749. 		color: #949F94;
  750. 		overflow: hidden;
  751. 		word-break: break-all;
  752. 		/* break-all(允许在单词内换行。) */
  753. 		text-overflow: ellipsis;
  754. 		/* 超出部分省略号 */
  755. 		display: -webkit-box;
  756. 		/** 对象作为伸缩盒子模型显示 **/
  757. 		-webkit-box-orient: vertical;
  758. 		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
  759. 		-webkit-line-clamp: 1;
  760. 		/** 显示的行数 **/
  761. 	}
  762.  
  763. 	.file_list__box .delete_file {
  764. 		position: absolute;
  765. 		right: -15rpx;
  766. 		z-index: 2;
  767. 	}
  768. </style>

4.注意：文件和上传视频代码未修改

5.formdata

 

const mimeMap = require('./mimeMap.js')

function FormData(){

  let fileManager = wx.getFileSystemManager();

  let data = {};

  let files = [];

  this.append = (name, value)=>{

    data[name] = value;

    return true;

  }

  this.appendFile = (name, path, fileName)=>{

    let buffer = fileManager.readFileSync(path);

    if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){

      return false;

    }

    if(!fileName){

      fileName = getFileNameFromPath(path);

    }

    files.push({

      name: name,

      buffer: buffer,

      fileName: fileName

    });

    return true;

  }

  this.getData = ()=>convert(data, files)

}

function getFileNameFromPath(path){

  let idx=path.lastIndexOf("/");

  return path.substr(idx+1);

}

function convert(data, files){

  let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符，一般是随机的字符串

  let boundary = '--' + boundaryKey;

  let endBoundary = boundary + '--';

  let postArray = [];

  //拼接参数

  if(data && Object.prototype.toString.call(data) == "[object Object]"){

    for(let key in data){

      postArray = postArray.concat(formDataArray(boundary, key, data[key]));

    }

  }

  //拼接文件

  if(files && Object.prototype.toString.call(files) == "[object Array]"){

    for(let i in files){

      let file = files[i];

      postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName));

    }

  }

  //结尾

  let endBoundaryArray = [];

  endBoundaryArray.push(...endBoundary.toUtf8Bytes());

  postArray = postArray.concat(endBoundaryArray);

  return {

    contentType: 'multipart/form-data; boundary=' + boundaryKey,

    buffer: new Uint8Array(postArray).buffer

  }

}

function randString() {

  var result = '';

  var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'

  for (var i = 17; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];

  return result;

}

function formDataArray(boundary, name, value, fileName){

  let dataString = '';

  let isFile = !!fileName;

  dataString += boundary + '\r\n';

  dataString += 'Content-Disposition: form-data; name="' + name + '"';

  if (isFile){

    dataString += '; filename="' + fileName + '"' + '\r\n';

    dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n';

  }

  else{

    dataString += '\r\n\r\n';

    dataString += value;

  }

  var dataArray = [];

  dataArray.push(...dataString.toUtf8Bytes());

  if (isFile) {

    let fileArray = new Uint8Array(value);

    dataArray = dataArray.concat(Array.prototype.slice.call(fileArray));

  }

  dataArray.push(..."\r".toUtf8Bytes());

  dataArray.push(..."\n".toUtf8Bytes());

  return dataArray;

}

function getFileMime(fileName){

  let idx = fileName.lastIndexOf(".");

  let mime = mimeMap[fileName.substr(idx)];

  return mime?mime:"application/octet-stream"

}

String.prototype.toUtf8Bytes = function(){

  var str = this;

  var bytes = [];

  for (var i = 0; i < str.length; i++) {

    bytes.push(...str.utf8CodeAt(i));

    if (str.codePointAt(i) > 0xffff) {

      i++;

    }

  }

  return bytes;

}

String.prototype.utf8CodeAt = function(i) {

  var str = this;

  var out = [], p = 0;

  var c = str.charCodeAt(i);

  if (c < 128) {

    out[p++] = c;

  } else if (c < 2048) {

    out[p++] = (c >> 6) | 192;

    out[p++] = (c & 63) | 128;

  } else if (

      ((c & 0xFC00) == 0xD800) && (i + 1) < str.length &&

      ((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) {

    // Surrogate Pair

    c = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF);

    out[p++] = (c >> 18) | 240;

    out[p++] = ((c >> 12) & 63) | 128;

    out[p++] = ((c >> 6) & 63) | 128;

    out[p++] = (c & 63) | 128;

  } else {

    out[p++] = (c >> 12) | 224;

    out[p++] = ((c >> 6) & 63) | 128;

    out[p++] = (c & 63) | 128;

  }

  return out;

};


 

module.exports = FormData;

6.mimeMap.js

module.exports = {

  "0.001": "application/x-001",

  "0.323": "text/h323",

  "0.907": "drawing/907",

  ".acp": "audio/x-mei-aac",

  ".aif": "audio/aiff",

  ".aiff": "audio/aiff",

  ".asa": "text/asa",

  ".asp": "text/asp",

  ".au": "audio/basic",

  ".awf": "application/vnd.adobe.workflow",

  ".bmp": "application/x-bmp",

  ".c4t": "application/x-c4t",

  ".cal": "application/x-cals",

  ".cdf": "application/x-netcdf",

  ".cel": "application/x-cel",

  ".cg4": "application/x-g4",

  ".cit": "application/x-cit",

  ".cml": "text/xml",

  ".cmx": "application/x-cmx",

  ".crl": "application/pkix-crl",

  ".csi": "application/x-csi",

  ".cut": "application/x-cut",

  ".dbm": "application/x-dbm",

  ".dcd": "text/xml",

  ".der": "application/x-x509-ca-cert",

  ".dib": "application/x-dib",

  ".doc": "application/msword",

  ".drw": "application/x-drw",

  ".dwf": "Model/vnd.dwf",

  ".dwg": "application/x-dwg",

  ".dxf": "application/x-dxf",

  ".emf": "application/x-emf",

  ".ent": "text/xml",

  ".eps": "application/x-ps",

  ".etd": "application/x-ebx",

  ".fax": "image/fax",

  ".fif": "application/fractals",

  ".frm": "application/x-frm",

  ".gbr": "application/x-gbr",

  ".gif": "image/gif",

  ".gp4": "application/x-gp4",

  ".hmr": "application/x-hmr",

  ".hpl": "application/x-hpl",

  ".hrf": "application/x-hrf",

  ".htc": "text/x-component",

  ".html": "text/html",

  ".htx": "text/html",

  ".ico": "image/x-icon",

  ".iff": "application/x-iff",

  ".igs": "application/x-igs",

  ".img": "application/x-img",

  ".isp": "application/x-internet-signup",

  ".java": "java/*",

  ".jpe": "image/jpeg",

  ".jpeg": "image/jpeg",

  ".jpg": "application/x-jpg",

  ".jsp": "text/html",

  ".lar": "application/x-laplayer-reg",

  ".lavs": "audio/x-liquid-secure",

  ".lmsff": "audio/x-la-lms",

  ".ltr": "application/x-ltr",

  ".m2v": "video/x-mpeg",

  ".m4e": "video/mpeg4",

  ".man": "application/x-troff-man",

  ".mdb": "application/msaccess",

  ".mfp": "application/x-shockwave-flash",

  ".mhtml": "message/rfc822",

  ".mid": "audio/mid",

  ".mil": "application/x-mil",

  ".mnd": "audio/x-musicnet-download",

  ".mocha": "application/x-javascript",

  ".mp1": "audio/mp1",

  ".mp2v": "video/mpeg",

  ".mp4": "video/mpeg4",

  ".mpd": "application/vnd.ms-project",

  ".mpeg": "video/mpg",

  ".mpga": "audio/rn-mpeg",

  ".mps": "video/x-mpeg",

  ".mpv": "video/mpg",

  ".mpw": "application/vnd.ms-project",

  ".mtx": "text/xml",

  ".net": "image/pnetvue",

  ".nws": "message/rfc822",

  ".out": "application/x-out",

  ".p12": "application/x-pkcs12",

  ".p7c": "application/pkcs7-mime",

  ".p7r": "application/x-pkcs7-certreqresp",

  ".pc5": "application/x-pc5",

  ".pcl": "application/x-pcl",

  ".pdf": "application/pdf",

  ".pdx": "application/vnd.adobe.pdx",

  ".pgl": "application/x-pgl",

  ".pko": "application/vnd.ms-pki.pko",

  ".plg": "text/html",

  ".plt": "application/x-plt",

  ".png": "application/x-png",

  ".ppa": "application/vnd.ms-powerpoint",

  ".pps": "application/vnd.ms-powerpoint",

  ".ppt": "application/x-ppt",

  ".prf": "application/pics-rules",

  ".prt": "application/x-prt",

  ".ps": "application/postscript",

  ".pwz": "application/vnd.ms-powerpoint",

  ".ra": "audio/vnd.rn-realaudio",

  ".ras": "application/x-ras",

  ".rdf": "text/xml",

  ".red": "application/x-red",

  ".rjs": "application/vnd.rn-realsystem-rjs",

  ".rlc": "application/x-rlc",

  ".rm": "application/vnd.rn-realmedia",

  ".rmi": "audio/mid",

  ".rmm": "audio/x-pn-realaudio",

  ".rms": "application/vnd.rn-realmedia-secure",

  ".rmx": "application/vnd.rn-realsystem-rmx",

  ".rp": "image/vnd.rn-realpix",

  ".rsml": "application/vnd.rn-rsml",

  ".rtf": "application/msword",

  ".rv": "video/vnd.rn-realvideo",

  ".sat": "application/x-sat",

  ".sdw": "application/x-sdw",

  ".slb": "application/x-slb",

  ".slk": "drawing/x-slk",

  ".smil": "application/smil",

  ".snd": "audio/basic",

  ".sor": "text/plain",

  ".spl": "application/futuresplash",

  ".ssm": "application/streamingmedia",

  ".stl": "application/vnd.ms-pki.stl",

  ".sty": "application/x-sty",

  ".swf": "application/x-shockwave-flash",

  ".tg4": "application/x-tg4",

  ".tif": "image/tiff",

  ".tiff": "image/tiff",

  ".top": "drawing/x-top",

  ".tsd": "text/xml",

  ".uin": "application/x-icq",

  ".vcf": "text/x-vcard",

  ".vdx": "application/vnd.visio",

  ".vpg": "application/x-vpeg005",

  ".vsd": "application/x-vsd",

  ".vst": "application/vnd.visio",

  ".vsw": "application/vnd.visio",

  ".vtx": "application/vnd.visio",

  ".wav": "audio/wav",

  ".wb1": "application/x-wb1",

  ".wb3": "application/x-wb3",

  ".wiz": "application/msword",

  ".wk4": "application/x-wk4",

  ".wks": "application/x-wks",

  ".wma": "audio/x-ms-wma",

  ".wmf": "application/x-wmf",

  ".wmv": "video/x-ms-wmv",

  ".wmz": "application/x-ms-wmz",

  ".wpd": "application/x-wpd",

  ".wpl": "application/vnd.ms-wpl",

  ".wr1": "application/x-wr1",

  ".wrk": "application/x-wrk",

  ".ws2": "application/x-ws",

  ".wsdl": "text/xml",

  ".xdp": "application/vnd.adobe.xdp",

  ".xfd": "application/vnd.adobe.xfd",

  ".xhtml": "text/html",

  ".xls": "application/x-xls",

  ".xml": "text/xml",

  ".xq": "text/xml",

  ".xquery": "text/xml",

  ".xsl": "text/xml",

  ".xwd": "application/x-xwd",

  ".sis": "application/vnd.symbian.install",

  ".x_t": "application/x-x_t",

  ".apk": "application/vnd.android.package-archive",

  "0.301": "application/x-301",

  "0.906": "application/x-906",

  ".a11": "application/x-a11",

  ".ai": "application/postscript",

  ".aifc": "audio/aiff",

  ".anv": "application/x-anv",

  ".asf": "video/x-ms-asf",

  ".asx": "video/x-ms-asf",

  ".avi": "video/avi",

  ".biz": "text/xml",

  ".bot": "application/x-bot",

  ".c90": "application/x-c90",

  ".cat": "application/vnd.ms-pki.seccat",

  ".cdr": "application/x-cdr",

  ".cer": "application/x-x509-ca-cert",

  ".cgm": "application/x-cgm",

  ".class": "java/*",

  ".cmp": "application/x-cmp",

  ".cot": "application/x-cot",

  ".crt": "application/x-x509-ca-cert",

  ".css": "text/css",

  ".dbf": "application/x-dbf",

  ".dbx": "application/x-dbx",

  ".dcx": "application/x-dcx",

  ".dgn": "application/x-dgn",

  ".dll": "application/x-msdownload",

  ".dot": "application/msword",

  ".dtd": "text/xml",

  ".dwf": "application/x-dwf",

  ".dxb": "application/x-dxb",

  ".edn": "application/vnd.adobe.edn",

  ".eml": "message/rfc822",

  ".epi": "application/x-epi",

  ".eps": "application/postscript",

  ".exe": "application/x-msdownload",

  ".fdf": "application/vnd.fdf",

  ".fo": "text/xml",

  ".g4": "application/x-g4",

  ".tif": "image/tiff",

  ".gl2": "application/x-gl2",

  ".hgl": "application/x-hgl",

  ".hpg": "application/x-hpgl",

  ".hqx": "application/mac-binhex40",

  ".hta": "application/hta",

  ".htm": "text/html",

  ".htt": "text/webviewhtml",

  ".icb": "application/x-icb",

  ".ico": "application/x-ico",

  ".ig4": "application/x-g4",

  ".iii": "application/x-iphone",

  ".ins": "application/x-internet-signup",

  ".IVF": "video/x-ivf",

  ".jfif": "image/jpeg",

  ".jpe": "application/x-jpe",

  ".jpg": "image/jpeg",

  ".js": "application/x-javascript",

  ".la1": "audio/x-liquid-file",

  ".latex": "application/x-latex",

  ".lbm": "application/x-lbm",

  ".ls": "application/x-javascript",

  ".m1v": "video/x-mpeg",

  ".m3u": "audio/mpegurl",

  ".mac": "application/x-mac",

  ".math": "text/xml",

  ".mdb": "application/x-mdb",

  ".mht": "message/rfc822",

  ".mi": "application/x-mi",

  ".midi": "audio/mid",

  ".mml": "text/xml",

  ".mns": "audio/x-musicnet-stream",

  ".movie": "video/x-sgi-movie",

  ".mp2": "audio/mp2",

  ".mp3": "audio/mp3",

  ".mpa": "video/x-mpg",

  ".mpe": "video/x-mpeg",

  ".mpg": "video/mpg",

  ".mpp": "application/vnd.ms-project",

  ".mpt": "application/vnd.ms-project",

  ".mpv2": "video/mpeg",

  ".mpx": "application/vnd.ms-project",

  ".mxp": "application/x-mmxp",

  ".nrf": "application/x-nrf",

  ".odc": "text/x-ms-odc",

  ".p10": "application/pkcs10",

  ".p7b": "application/x-pkcs7-certificates",

  ".p7m": "application/pkcs7-mime",

  ".p7s": "application/pkcs7-signature",

  ".pci": "application/x-pci",

  ".pcx": "application/x-pcx",

  ".pdf": "application/pdf",

  ".pfx": "application/x-pkcs12",

  ".pic": "application/x-pic",

  ".pl": "application/x-perl",

  ".pls": "audio/scpls",

  ".png": "image/png",

  ".pot": "application/vnd.ms-powerpoint",

  ".ppm": "application/x-ppm",

  ".ppt": "application/vnd.ms-powerpoint",

  ".pr": "application/x-pr",

  ".prn": "application/x-prn",

  ".ps": "application/x-ps",

  ".ptn": "application/x-ptn",

  ".r3t": "text/vnd.rn-realtext3d",

  ".ram": "audio/x-pn-realaudio",

  ".rat": "application/rat-file",

  ".rec": "application/vnd.rn-recording",

  ".rgb": "application/x-rgb",

  ".rjt": "application/vnd.rn-realsystem-rjt",

  ".rle": "application/x-rle",

  ".rmf": "application/vnd.adobe.rmf",

  ".rmj": "application/vnd.rn-realsystem-rmj",

  ".rmp": "application/vnd.rn-rn_music_package",

  ".rmvb": "application/vnd.rn-realmedia-vbr",

  ".rnx": "application/vnd.rn-realplayer",

  ".rpm": "audio/x-pn-realaudio-plugin",

  ".rt": "text/vnd.rn-realtext",

  ".rtf": "application/x-rtf",

  ".sam": "application/x-sam",

  ".sdp": "application/sdp",

  ".sit": "application/x-stuffit",

  ".sld": "application/x-sld",

  ".smi": "application/smil",

  ".smk": "application/x-smk",

  ".sol": "text/plain",

  ".spc": "application/x-pkcs7-certificates",

  ".spp": "text/xml",

  ".sst": "application/vnd.ms-pki.certstore",

  ".stm": "text/html",

  ".svg": "text/xml",

  ".tdf": "application/x-tdf",

  ".tga": "application/x-tga",

  ".tif": "application/x-tif",

  ".tld": "text/xml",

  ".torrent": "application/x-bittorrent",

  ".txt": "text/plain",

  ".uls": "text/iuls",

  ".vda": "application/x-vda",

  ".vml": "text/xml",

  ".vsd": "application/vnd.visio",

  ".vss": "application/vnd.visio",

  ".vst": "application/x-vst",

  ".vsx": "application/vnd.visio",

  ".vxml": "text/xml",

  ".wax": "audio/x-ms-wax",

  ".wb2": "application/x-wb2",

  ".wbmp": "image/vnd.wap.wbmp",

  ".wk3": "application/x-wk3",

  ".wkq": "application/x-wkq",

  ".wm": "video/x-ms-wm",

  ".wmd": "application/x-ms-wmd",

  ".wml": "text/vnd.wap.wml",

  ".wmx": "video/x-ms-wmx",

  ".wp6": "application/x-wp6",

  ".wpg": "application/x-wpg",

  ".wq1": "application/x-wq1",

  ".wri": "application/x-wri",

  ".ws": "application/x-ws",

  ".wsc": "text/scriptlet",

  ".wvx": "video/x-ms-wvx",

  ".xdr": "text/xml",

  ".xfdf": "application/vnd.adobe.xfdf",

  ".xls": "application/vnd.ms-excel",

  ".xlw": "application/x-xlw",

  ".xpl": "audio/scpls",

  ".xql": "text/xml",

  ".xsd": "text/xml",

  ".xslt": "text/xml",

  ".x_b": "application/x-x_b",

  ".sisx": "application/vnd.symbian.install",

  ".ipa": "application/vnd.iphone",

  ".xap": "application/x-silverlight-app",

  ".zip": "application/x-zip-compressed",

}

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

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

  

闽ICP备14008679号