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

在小程序中使用formdata上传数据，可实现多文件上传_formdata发送多个文件 微信小程序

作者：Cpp五条 | 2024-05-18 04:31:01

赞

踩

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. 				});
  172. 			},
  173.     		// importZcExcel(file){
  174. 			// 	// console.log('-file:',file,'-fileList:',fileList)
  175. 			// 	const formData = new FormData();
  176. 			// 	formData.append('excel', file.raw);
  177. 			// 	// console.log('文件：',formData);
  178. 			// 	let that=this;
  179. 			// 	importZc(formData).then(res => {
  180. 			// 		let data=res.data;
  181. 			// 		// console.log('xxxx:',data)
  182. 			// 		if(data && data.success){
  183. 			// 					this.$message.success(data.data);
  184. 			// 					that.searchChange();
  185. 			// 				}else{
  186. 			// 					this.$message.error('message:',data.msg);
  187. 			// 				}
  188. 			// 	});
  189. 			// },
  190. 			chooseVideoImage() {
  191. 				console.log('this.attachment',this.attachment)
  192. 				console.log('this.uniqueId',this.uniqueId)
  193. 				uni.showActionSheet({
  194. 					title: "选择上传类型",
  195. 					itemList: ['图片', '视频', '文件'],
  196. 					success: (res) => {
  197. 						console.log(res)
  198. 						if (res.tapIndex == 0) {
  199. 							this.chooseImages()
  200. 						} else if (res.tapIndex == 1) {
  201. 							this.chooseVideo()
  202. 						} else {
  203. 							this.chooseFile()
  204. 						}
  205. 					}
  206. 				})
  207. 			},
  208. 			chooseFile() {
  209. 				console.log('文件')
  210. 				let vm = this;
  211. 				wx.chooseMessageFile({
  212. 					count: 1,
  213. 					type: 'file',
  214. 					success: async (response) => {
  215. 						console.log('res--选取文件--', response);
  216. 						let result = await vm.fileSizeIsLessLimitSize(response.tempFiles[0].path)
  217. 						if (result) {
  218. 							showToast('文件质量过大')
  219. 							return;
  220. 						}
  221. 						let igmFile = response.tempFiles;
  222. 						uni.showLoading({
  223. 							mask: true
  224. 						})
  225. 						let name=igmFile[0].name;
  226. 						const [err, res] = await uploadFileByName(igmFile[0].path, {fileName:name})
  227. 						console.log('uploadFileByName',err, res);
  228. 						uni.hideLoading()
  229. 						if (err) {
  230. 							showToast('操作失败')
  231. 							return
  232. 						}
  233. 						console.log('上传文件', res)
  234. 						if (res.code === 200) {
  235. 							let files = res.data
  236. 							let info = {
  237. 								url: BASE_API_URL + '/minio' + files.link.substring(vm.findCharAt(files
  238. 									.link, '/', 2)),
  239. 								id: files.attachId,
  240. 								name:name
  241. 								// name:'文件'
  242. 							}
  243. 							vm.fileList = vm.fileList.concat(info);
  244. 							vm.ids = vm.ids.concat(files.attachId);
  245. 							vm.$emit('handleHeight')
  246. 							vm.$_saveAttachInfo(files.attachId,files.link,files.originalName)
  247. 						} else {
  248. 							showToast(res.msg)
  249. 						}
  250. 					}
  251. 				})
  252. 			},
  253. 			chooseImages2() {
  254. 				console.log('图片')
  255. 				let that = this;
  256. 				// 上传图片
  257. 				uni.chooseImage({
  258. 					count: 1, //默认9
  259. 					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  260. 					sourceType: ['album', 'camera'], //从相册选择
  261. 					success: async (response) => {
  262. 						console.log(response)
  263. 						let result = await that.fileSizeIsLessLimitSize(response.tempFilePaths[0])
  264. 						if (result) {
  265. 							showToast('图片质量过大')
  266. 							return;
  267. 						}
  268. 						uni.showLoading({
  269. 							mask: true
  270. 						})
  271. 						console.log(response,'response');
  272. 						let igmFile = response.tempFilePaths;
  273. 						console.log(igmFile,'igmFile');
  274. 					
  275. 						const [err, res] =  uploadFile(
  276. 							'https://gznd.longersoftware.com',
  277. 							igmFile,
  278. 							{
  279. 								masterld:'1772150445546708994',
  280. 								formGroupCode:'XMPG',
  281. 								categoryCode:",XCDCTP,",
  282. 								categoryName:"现场调查图片,"
  283. 							}
  284. 						).then
  285. 						// const [err, res] = await uploadFile('1772150445546708994','XMPG',formData,",XCDCTP,","现场调查图片,")
  286. 						// const [err, res] = await uploadFile(igmFile[0], {})
  287. 						console.log('uploadFile',err, res);
  288. 						uni.hideLoading()
  289. 						if (err) {
  290. 							showToast('操作失败')
  291. 							return
  292. 						}
  293. 						if (res.code === 200) {
  294. 							let imgUrls = res.data
  295. 							let info = {
  296. 								url: BASE_API_URL + '/minio' + imgUrls.link.substring(that.findCharAt(
  297. 									imgUrls.link, '/', 2)),
  298. 								id: imgUrls.attachId
  299. 							}
  300. 							that.imageList = that.imageList.concat(info);
  301. 							that.ids = that.ids.concat(imgUrls.attachId);
  302. 							that.$emit('handleHeight')
  303. 							that.$_saveAttachInfo(imgUrls.attachId,imgUrls.link,imgUrls.originalName)
  304. 							// if (that.ids.length >= 5) {
  305. 							// 	that.VideoOfImagesShow = false;
  306. 							// } else {
  307. 							// 	that.VideoOfImagesShow = true;
  308. 							// }
  309. 						} else {
  310. 							showToast(res.msg)
  311. 						}
  312. 					},
  313. 				});
  314. 			},
  315. 			chooseVideo() {
  316. 				console.log('视频')
  317. 				let that = this;
  318. 				// 上传视频
  319. 				uni.chooseVideo({
  320. 					maxDuration: 60,
  321. 					count: 1,
  322. 					camera: this.cameraList[this.cameraIndex].value,
  323. 					sourceType: ['album'],
  324. 					success: async (responent) => {
  325. 						console.log(responent)
  326. 						let videoFile = responent.tempFilePath;
  327. 						console.log(videoFile)
  328. 						let result = await that.fileSizeIsLessLimitSize(responent.tempFilePath)
  329. 						if (result) {
  330. 							showToast('图片质量过大')
  331. 							return;
  332. 						}
  333. 						uni.showLoading({
  334. 							mask: true
  335. 						})
  336. 						const [err, res] = await uploadFile(videoFile, {})
  337. 						uni.hideLoading()
  338. 						console.log(res)
  339. 						if (err) {
  340. 							showToast('操作失败')
  341. 							return
  342. 						}
  343. 						if (res.code === 200) {
  344. 							let videoUrls = res.data //百度支持
  345. 							let info = {
  346. 								url: BASE_API_URL + '/minio' + videoUrls.link.substring(that.findCharAt(
  347. 									videoUrls.link, '/', 2)),
  348. 								id: videoUrls.attachId
  349. 							}
  350. 							that.videoList = that.videoList.concat(info);
  351. 							that.ids = that.ids.concat(videoUrls.attachId);
  352. 							that.$emit('handleHeight')
  353. 							that.$_saveAttachInfo(videoUrls.attachId,videoUrls.link,videoUrls.originalName)
  354. 							// if (that.ids.length >= 5) {
  355. 							// 	that.VideoOfImagesShow = false;
  356. 							// } else {
  357. 							// 	that.VideoOfImagesShow = true;
  358. 							// }
  359. 						} else {
  360. 							showToast(res.msg)
  361. 						}
  362.  
  363. 						// this.src = responent.tempFilePath;  //头条
  364. 					}
  365. 				})
  366. 			},
  367. 			previewImage: function(e) {
  368. 				//预览图片
  369. 				var current = e.target.dataset.src
  370. 				let list = [];
  371. 				this.imageList.forEach((item) => {
  372. 					list.push(item.url)
  373. 				})
  374. 				uni.previewImage({
  375. 					current: current,
  376. 					urls: list
  377. 				})
  378. 			},
  379. 			deleteImage(index, item) {
  380. 				console.log(item)
  381. 				let that = this;
  382. 				uni.showModal({
  383. 					title: "提示",
  384. 					content: "是否要删除该图片",
  385. 					success: async (res) => {
  386. 						if (res.confirm) {
  387. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  388. 							console.log(response)
  389. 							if (error) {
  390. 								showToast('操作失败')
  391. 								return
  392. 							}
  393. 							if (response.code === 200) {
  394. 							that.imageList.splice(index, 1);
  395. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  396. 							// if (that.ids.length >= 5) {
  397. 							// 	that.VideoOfImagesShow = false;
  398. 							// } else {
  399. 							// 	that.VideoOfImagesShow = true;
  400. 							// }
  401. 							showToast(response.msg)
  402. 							that.$emit('handleHeight')
  403. 							}
  404. 						}
  405. 					}
  406. 				})
  407. 			},
  408. 			deleteVideo(index, item) {
  409. 				let that = this;
  410. 				uni.showModal({
  411. 					title: "提示",
  412. 					content: "是否要删除此视频",
  413. 					success: async (res) => {
  414. 						if (res.confirm) {
  415. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  416. 							if (error) {
  417. 								showToast('操作失败')
  418. 								return
  419. 							}
  420. 							if (response.code === 200) {
  421. 							that.videoList.splice(index, 1);
  422. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  423. 							// if (that.ids.length >= 5) {
  424. 							// 	that.VideoOfImagesShow = false;
  425. 							// } else {
  426. 							// 	that.VideoOfImagesShow = true;
  427. 							// }
  428. 							showToast(response.msg)
  429. 							that.$emit('handleHeight')
  430. 							}
  431. 						}
  432. 					}
  433. 				})
  434. 			},
  435. 			fileActive(file) {
  436. 				let that=this;
  437. 				uni.showActionSheet({
  438. 					title: "文件操作",
  439. 					itemList: ['查看'],
  440. 					success: (res) => {
  441. 						console.log(res)
  442. 						if (res.tapIndex == 0) {
  443. 							console.log('查看', file)
  444. 							this.downloadFilePreview(file)
  445. 						}
  446. 					}
  447. 				})
  448. 			},
  449. 			downloadFilePreview (file) {
  450. 			      uni.showLoading({
  451. 					mask: true
  452. 				  })
  453. 			      wx.downloadFile({
  454. 			        url: file.url, // 这里换上自己的pdf地址
  455. 			        header: {
  456. 			          'content-type': 'application/json'
  457. 			        },
  458. 			        success: function (res) {
  459. 						console.log(res)
  460. 			          var Path = res.tempFilePath // 返回的文件临时地址，用于后面打开本地预览所用
  461. 					
  462. 						wx.openDocument({
  463. 							filePath: Path,
  464. 							success: function (res) {
  465. 							  uni.hideLoading()
  466. 							},
  467. 							fail: function (res) {
  468. 							  showToast('打开失败')
  469. 							}
  470. 						})			
  471. 					  
  472. 			        },
  473. 			        fail: function (res) {
  474. 					  showToast('下载失败')
  475. 			        }
  476. 			      })
  477. 			    },
  478. 			deleteFile(index, item) {
  479. 				let that = this;
  480. 				uni.showModal({
  481. 					title: "提示",
  482. 					content: "是否要删除此文件",
  483. 					success: async (res) => {
  484. 						if (res.confirm) {
  485. 							const [error, response] = await deleteAttachment({attachmentId:item.id})
  486. 							if (error) {
  487. 								showToast('操作失败')
  488. 								return
  489. 							}
  490. 							if (response.code === 200) {
  491. 							that.fileList.splice(index, 1);
  492. 							that.ids.splice(that.ids.indexOf(item.id), 1);
  493. 							that.$emit('handleHeight')
  494. 							showToast(response.msg)
  495. 							}
  496. 						}
  497. 					}
  498. 				})
  499. 			},
  500. 			async $_saveAttachInfo(id,link,originalName){
  501. 				let data={
  502. 					bladeAttachmentPath:link,
  503. 					bladeAttachmentId:id,
  504. 					dictCode:this.attachment.dictCode,
  505. 					categoryCode:this.attachment.categoryCode,
  506. 					dictName:this.attachment.dictName,
  507. 					uniqueId:this.uniqueId,
  508. 					originalName:originalName
  509. 				}
  510. 				const [err, res] = await saveAttachInfo(data)
  511. 				if (err) {
  512. 					return
  513. 				}
  514. 				if (res.code === 200) {
  515. 					
  516. 				}
  517. 			},
  518. 			//判断文件大小是否满足需求,limitSize的单位是kb
  519. 			fileSizeIsLessLimitSize(filePath) {
  520. 				//获取文件信息
  521. 				let result = false;
  522. 				return new Promise((resolve, reject) => {
  523. 					uni.getFileInfo({
  524. 						filePath: filePath,
  525. 						success: (res) => {
  526. 							console.log("文件大小", res.size / 1024, 'kb');
  527. 							if (res.size / 1024 > 1024 * 10) {
  528. 								result = true;
  529. 							}
  530. 							resolve(result);
  531. 						},
  532. 						fail: (err) => {
  533. 							reject(result)
  534. 						}
  535. 					})
  536. 				})
  537. 			},
  538. 			findCharAt(str, cha, num) {
  539. 				var x = str.indexOf(cha);
  540. 				for (var i = 0; i < num; i++) {
  541. 					x = str.indexOf(cha, x + 1);
  542. 				}
  543. 				return x;
  544. 			},
  545. 			setAttachmentData(data){
  546. 				console.log('图片数据',data)
  547. 				let that=this;
  548. 				data.forEach(item=>{
  549. 					let suffix = item.originalName.substring(item.originalName.lastIndexOf('.') + 1, item.originalName.length);
  550. 					let info = {
  551. 						// url: BASE_API_URL + '/minio' + item.bladeAttachmentPath.substring(that.findCharAt(item
  552. 						// 	.bladeAttachmentPath, '/', 2)),
  553. 						url: BASE_API_URL + '/minio' + item.bladeAttachmentPath,
  554. 						id: item.bladeAttachmentId,
  555. 						name:item.originalName
  556. 					}
  557. 					that.ids = that.ids.concat(item.bladeAttachmentId);
  558. 					if(this.suffix.indexOf(suffix)>=0){
  559. 						that.imageList = that.imageList.concat(info);
  560. 					} else if(this.videoSuffix.indexOf(suffix)>=0){
  561. 						that.videoList = that.videoList.concat(info);
  562. 					}else if(this.pageOfficeSuffix.indexOf(suffix)>=0){
  563. 						that.fileList = that.fileList.concat(info);
  564. 					}
  565. 				})	
  566. 			}
  567. 		}
  568. 	}
  569. </script>
  570.  
  571. <style>
  572. 	.uni-file-picker__container {
  573. 		display: flex;
  574. 		box-sizing: border-box;
  575. 		flex-wrap: wrap;
  576. 		margin: -5rpx;
  577. 		justify-content: start;
  578. 	}
  579.  
  580. 	.file-picker__box {
  581. 		position: relative;
  582. 		width: 200rpx;
  583. 		height: 0;
  584. 		padding-top: 200rpx;
  585. 		box-sizing: border-box;
  586. 	}
  587.  
  588. 	.file-picker__box-content {
  589. 		position: absolute;
  590. 		top: 0;
  591. 		right: 0;
  592. 		bottom: 0;
  593. 		left: 0;
  594. 		margin: 10rpx;
  595. 		border: 1rpx #eee solid;
  596. 		border-radius: 5px;
  597. 		overflow: hidden;
  598. 	}
  599.  
  600. 	.file-image {
  601. 		width: 100%;
  602. 		height: 100%;
  603. 	}
  604.  
  605. 	.is-add {
  606. 		display: flex;
  607. 		align-items: center;
  608. 		justify-content: center;
  609. 	}
  610.  
  611. 	.icon-add {
  612. 		width: 50rpx;
  613. 		height: 5rpx;
  614. 		background-color: #f1f1f1;
  615. 		border-radius: 2px;
  616. 	}
  617.  
  618. 	.rotate {
  619. 		position: absolute;
  620. 		transform: rotate(90deg);
  621. 	}
  622.  
  623. 	.icon-del-box {
  624. 		display: flex;
  625. 		align-items: center;
  626. 		justify-content: center;
  627. 		position: absolute;
  628. 		top: 3rpx;
  629. 		right: 3rpx;
  630. 		height: 26rpx;
  631. 		width: 26rpx;
  632. 		border-radius: 50%;
  633. 		background-color: rgba(0, 0, 0, 0.5);
  634. 		z-index: 2;
  635. 		transform: rotate(-45deg);
  636. 	}
  637.  
  638. 	.icon-del {
  639. 		width: 15rpx;
  640. 		height: 2rpx;
  641. 		background-color: #fff;
  642. 		border-radius: 2rpx;
  643. 	}
  644.  
  645. 	,
  646. 	.file_list__box {
  647. 		margin-bottom: 20rpx;
  648. 		display: flex;
  649. 		align-items: center;
  650. 		position: relative;
  651. 	}
  652.  
  653. 	.file_list__box text {
  654. 		font-size: 32rpx;
  655. 		padding-left: 5rpx;
  656. 		color: #949F94;
  657. 		overflow: hidden;
  658. 		word-break: break-all;
  659. 		/* break-all(允许在单词内换行。) */
  660. 		text-overflow: ellipsis;
  661. 		/* 超出部分省略号 */
  662. 		display: -webkit-box;
  663. 		/** 对象作为伸缩盒子模型显示 **/
  664. 		-webkit-box-orient: vertical;
  665. 		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
  666. 		-webkit-line-clamp: 1;
  667. 		/** 显示的行数 **/
  668. 	}
  669.  
  670. 	.file_list__box .delete_file {
  671. 		position: absolute;
  672. 		right: -15rpx;
  673. 		z-index: 2;
  674. 	}
  675. </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/Cpp五条/article/detail/586658
推荐阅读
相关标签

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

  

闽ICP备14008679号