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

uniApp中图片文件上传插件(uniFilePicker)_uni-file-picker 手动上传

作者：繁依Fanyi0 | 2024-03-03 02:18:53

赞

踩

uni-file-picker 手动上传

首先去下载插件uni-file-picker 文件选择上传 - DCloud 插件市场

1.图片上传

  1. <template>
  2. 	<view class="content">
  3. 		<view class="wrap">
  4. 			<timeWeek></timeWeek>
  5. 			<view class="data_info">
  6. 				<view class="list">
  7. 					<text style="color: #666666;">{{dataFrom.checkUserName}}</text>
  8. 				</view>
  9. 				<view class="foods" v-if="details">
  10. 					<view class="foods_img">
  11. 						<view class="text">
  12. 							<text>菜谱图片</text>
  13. 						</view>
  14. 						<view class="img" @click="previewImage">
  15. 							<image :src="supplyPicture[0]" v-if="details"></image>
  16. 							<image v-else></image>
  17. 						</view>
  18. 					</view>
  19. 					<view class="foods_text">
  20. 						<view class="text">
  21. 							<text>菜谱内容</text>
  22. 						</view>
  23. 						<view class="foods_list">
  24. 							<text v-for="(item,index) in supplyMenu" :key="index" v-if="supplyMenu">{{item}}</text>
  25. 						</view>
  26. 					</view>
  27. 				</view>
  28. 				<view class="list">
  29. 					<text>菜品数量：</text>
  30. 					<view class="checkbox">
  31. 						<radio-group>
  32. 							<label v-for="(item,index) in scoreList" :key="index" @click="number_change(index)">
  33. 								<radio color="#007aff" :value="item.id + ''" :checked="item.id==numberCurrent" />
  34. 								<text>{{item.text}}</text>
  35. 							</label>
  36. 						</radio-group>
  37. 					</view>
  38. 				</view>
  39. 				<view class="list">
  40. 					<text>菜品味道：</text>
  41. 					<view class="checkbox">
  42. 						<radio-group>
  43. 							<label v-for="(item,index) in scoreList" :key="index" @click="taste_change(index)">
  44. 								<radio color="#007aff" :value="item.id + ''" :checked="item.id==tasteCurrent" />
  45. 								<text>{{item.text}}</text>
  46. 							</label>
  47. 						</radio-group>
  48. 					</view>
  49. 				</view>
  50. 				<view class="feedback">
  51. 					<text>意见留言</text>
  52. 					<textarea placeholder-style="color:#999999" placeholder="请填写意见留言" v-model="dataFrom.suggestion" />
  53. 				</view>
  54. 				<view class="add_image">
  55. 					<text>添加图片</text>
  56. 					<view class="upload">
  57. 						<uni-file-picker limit="9" @select="select" @delete='del_img' v-model="fileLists">
  58. 							<view class="add">
  59. 								<image src="@/static/images/imgAdd.png" mode="widthFix"></image>
  60. 							</view>
  61. 						</uni-file-picker>
  62. 					</view>
  63. 				</view>
  64. 			</view>
  65. 			<view class="btn" @click="submit" v-if="!stateFlag">
  66. 				<button type="primary">提交</button>
  67. 			</view>
  68. 			<view class="btn" @click="modification" v-if="stateFlag">
  69. 				<button type="primary">修改</button>
  70. 			</view>
  71. 		</view>
  72. 	</view>
  73. </template>
  74. <script>
  75. 	import timeWeek from "@/common/time-week/index.vue"
  76. 	import uniFilePicker from "@/components/uni-file-picker/uni-file-picker.vue"
  77. 	import urlConfig from "@/utils/config.js"
  78. 	import {
  79. 		foodSafetyMenuDetailByTime,
  80. 		foodSafetyParentCheckAdd,
  81. 		foodSafetyParentCheckDetail,
  82. 		foodSafetyParentCheckEdit
  83. 	} from "@/api/food_safety.js"
  84. 	import upload from "@/api/upload.js"
  85. 	export default {
  86. 		components: {
  87. 			timeWeek
  88. 		},
  89. 		data() {
  90. 			return {
  91. 				scoreList: [{ //评分标准
  92. 						text: '优',
  93. 						id: 1
  94. 					},
  95. 					{
  96. 						text: '中',
  97. 						id: 2
  98. 					}, {
  99. 						text: '差',
  100. 						id: 3
  101. 					}
  102. 				],
  103. 				id: null,
  104. 				timer: null,
  105. 				numberCurrent: null, //菜品数量状态
  106. 				tasteCurrent: null, //菜品味道状态
  107. 				dataFrom: {
  108. 					checkType: null, //检查类型
  109. 					checkUserCode: null, //检查者
  110. 					checkUserName: null, //检查者姓名
  111. 					pictures: null, //检查记录图片
  112. 					suggestion: null, //意见建议
  113. 					tasteEvaluate: null, //菜品味道评价
  114. 					quantityEvaluate: null //菜品数量评价
  115. 				},
  116. 				details: "", //详情
  117. 				supplyMenu: [], //菜谱列表
  118. 				supplyPicture: [], //菜谱图片列表
  119. 				fileImg: [], //上传图片列表
  120. 				fileLists: [],
  121. 				stateFlag: false
  122. 			}
  123. 		},
  124. 		created() {
  125. 			this.get_details() //获取数据详情
  126. 			this.get_detaisl_same() //查询当天是否有检查记录
  127. 		},
  128. 		methods: {
  129. 			number_change(index) { //菜品数量
  130. 				if (this.numberCurrent == this.scoreList[index].id) {
  131. 					this.numberCurrent = null
  132. 					this.dataFrom.quantityEvaluate = null
  133. 				} else {
  134. 					this.numberCurrent = this.scoreList[index].id
  135. 					this.dataFrom.quantityEvaluate = this.scoreList[index].id
  136. 				}
  137. 			},
  138. 			taste_change(index) { //菜品味道
  139. 				if (this.tasteCurrent == this.scoreList[index].id) {
  140. 					this.tasteCurrent = null
  141. 					this.dataFrom.tasteEvaluate = null
  142. 				} else {
  143. 					this.tasteCurrent = this.scoreList[index].id
  144. 					this.dataFrom.tasteEvaluate = this.scoreList[index].id
  145. 				}
  146. 			},
  147. 			get_detaisl_same() { //查询当天是否有检查记录
  148. 				var time = new Date();
  149. 				var year = time.getFullYear(); //年
  150. 				var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
  151. 				var date = (time.getDate() + "").padStart(2, "0"); //日
  152. 				this.timer = `${year}-${month}-${date}`
  153. 				var data = {
  154. 					createTime: this.timer,
  155. 					checkType: 0
  156. 				}
  157. 				foodSafetyParentCheckDetail(data).then(res => {
  158. 					if (res.data) {
  159. 						this.stateFlag = true
  160. 						this.dataFrom.checkUserName = res.data.checkUserName //获取新的检测员
  161. 						this.dataFrom.suggestion = res.data.suggestion //获取新的意见留言
  162. 						this.numberCurrent = res.data.quantityEvaluate //获取新的菜品数量状态
  163. 						this.tasteCurrent = res.data.tasteEvaluate //获取新的菜品数量状态
  164. 						this.dataFrom.tasteEvaluate = res.data.tasteEvaluate //获取新的菜品数量
  165. 						this.dataFrom.quantityEvaluate = res.data.quantityEvaluate //获取新的菜品数量
  166. 						this.dataFrom.checkType = res.data.checkTyp //获取新的检查类型
  167. 						this.id = res.data.id //获取id
  168. 						this.imgDetailsList = res.data.pictures //获取返回的图片
  169. 						this.fileLists = []
  170. 						if (res.data.pictures) {
  171. 							var arrImg = res.data.pictures.split(',')
  172. 							for (var i = 0; i < arrImg.length; i++) {
  173. 								var url = urlConfig +
  174. 									'/sysFileInfo/previewByObjectName?fileBucket=defaultBucket&fileObjectName=' +
  175. 									arrImg[i]
  176. 								var mydata = {
  177. 									"url": url,
  178. 									"fileID": arrImg[i]
  179. 								}
  180. 								this.fileLists.push(mydata);
  181. 							}
  182. 						}
  183. 					} else {
  184. 						this.stateFlag = false
  185. 					}
  186. 				})
  187. 			},
  188. 			get_details() { //获取数据详情
  189. 				this.dataFrom.checkUserName = uni.getStorageSync('Admin-Account'); //获取用户
  190. 				var time = new Date();
  191. 				var year = time.getFullYear(); //年
  192. 				var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
  193. 				var date = (time.getDate() + "").padStart(2, "0"); //日
  194. 				this.timer = `${year}-${month}-${date}`
  195. 				var data = {
  196. 					supplyTime: this.timer
  197. 				}
  198. 				foodSafetyMenuDetailByTime(data).then(res => { //获取详情
  199. 					if (res.data) {
  200. 						this.details = res.data
  201. 						this.dataFrom.checkUserCode = this.details.supplyCode; //检查者
  202. 						this.supplyMenu = this.details.supplyMenu.split(/，| |,/)
  203. 						if (this.details.supplyPicture) {
  204. 							var imgList = this.details.supplyPicture.split(',')
  205. 							imgList.forEach(item => {
  206. 								this.supplyPicture.push(urlConfig +
  207. 									'/sysFileInfo/previewByObjectName?fileBucket=defaultBucket&fileObjectName=' +
  208. 									item);
  209. 							})
  210. 						}
  211. 					}
  212. 				})
  213. 			},
  214. 			submit() { //提交
  215. 				var arrImg = [];
  216. 				for (var i = 0; i < this.fileImg.length; i++) {
  217. 					arrImg.push(this.fileImg[i].fileObjectName)
  218. 				}
  219. 				this.dataFrom.pictures = arrImg.join(','); //检查记录图片
  220. 				this.dataFrom.checkType = 0 //检查类型
  221. 				if (this.dataFrom.quantityEvaluate == null) {
  222. 					uni.showToast({
  223. 						icon: 'none',
  224. 						title: '请评价菜品数量',
  225. 						duration: 2000
  226. 					})
  227. 				} else if (this.dataFrom.tasteEvaluate == null) {
  228. 					uni.showToast({
  229. 						icon: 'none',
  230. 						title: '请评价菜品味道',
  231. 						duration: 2000
  232. 					})
  233. 				} else if (this.dataFrom.suggestion == null) {
  234. 					uni.showToast({
  235. 						icon: 'none',
  236. 						title: '请输入意见留言',
  237. 						duration: 2000
  238. 					})
  239. 				} else if (this.dataFrom.pictures == "") {
  240. 					uni.showToast({
  241. 						icon: 'none',
  242. 						title: '请添加图片',
  243. 						duration: 2000
  244. 					})
  245. 				} else {
  246. 					foodSafetyParentCheckAdd(this.dataFrom).then(res => {
  247. 						if (res.code == "00000") {
  248. 							uni.showToast({
  249. 								title: '提交成功',
  250. 								duration: 2000
  251. 							})
  252. 							this.dataFrom = {
  253. 								pictures: null, //检查记录图片
  254. 								suggestion: null, //意见建议
  255. 								tasteEvaluate: null, //菜品味道评价
  256. 								quantityEvaluate: null //菜品数量评价
  257. 							}
  258. 							this.fileImg = []
  259. 							this.fileLists = []
  260. 							this.numberCurrent = null //菜品数量状态
  261. 							this.tasteCurrent = null //菜品味道状态
  262. 							this.get_details()
  263. 							this.get_detaisl_same()
  264. 						}
  265. 					})
  266. 				}
  267. 			},
  268. 			modification() { //修改
  269. 				this.dataFrom.id = this.id //获取修改id
  270. 				var oldList = null
  271. 				var arr = []
  272. 				if (this.fileLists && this.fileLists.length > 0) {
  273. 					oldList = this.fileLists.map(item => item.fileID).join(',')
  274. 				}
  275. 				//检查记录图片
  276. 				if (this.fileImg != null && this.fileImg.length > 0) {
  277. 					this.fileImg.forEach(item => {
  278. 						arr.push(item.fileObjectName)
  279. 					})
  280. 					if (oldList) {
  281. 						this.dataFrom.pictures = oldList + ',' + arr.join(',')
  282. 						this.fileImg = []
  283. 					} else {
  284. 						this.dataFrom.pictures = arr.join(',')
  285. 						this.fileImg = []
  286. 					}
  287. 				} else {
  288. 					if (oldList) {
  289. 						this.dataFrom.pictures = oldList
  290. 					} else {
  291. 						this.dataFrom.pictures = arr.join(',')
  292. 					}
  293. 				}
  294.  
  295.  
  296. 				// this.dataFrom.pictures = ""
  297. 				foodSafetyParentCheckEdit(this.dataFrom).then(res => {
  298. 					if (res.code == "00000") {
  299. 						uni.showToast({
  300. 							title: '修改成功',
  301. 							duration: 2000
  302. 						})
  303. 						this.get_detaisl_same() //查询当天是否有检查记录
  304. 					}
  305. 				})
  306. 			},
  307. 			select(e) { //上传图片
  308. 				let that = this
  309. 				uni.showLoading({
  310. 					title: "上传中"
  311. 				});
  312. 				const tempFilePaths = e.tempFilePaths;
  313. 				for (var i = 0; i < tempFilePaths.length; i++) {
  314. 					const tempFile = e.tempFiles[i];
  315. 					uni.uploadFile({
  316. 						url: urlConfig + '/sysFileInfo/upload',
  317. 						header: {
  318. 							'Authorization': uni.getStorageSync('Admin-Token')
  319. 						},
  320. 						formData: {
  321. 							secretFlag: 'N',
  322. 							fileLocation: 5
  323. 						},
  324. 						filePath: tempFilePaths[i],
  325. 						name: 'file',
  326. 						success: (uploadFileRes) => {
  327. 							uni.hideLoading();
  328. 							const back = JSON.parse(uploadFileRes.data);
  329. 							if (uploadFileRes.statusCode == 200) {
  330. 								that.$set(back.data, "uuid", tempFile.uuid)
  331. 								that.$set(back.data, "path", tempFile.path)
  332. 								that.$set(back.data, "url", tempFile.url)
  333. 								that.fileImg.push(back.data);
  334. 							}
  335. 						},
  336. 						fail: () => {
  337. 							uni.hideLoading();
  338. 							uni.showToast("上传失败，请联系开发！")
  339. 						},
  340. 						complete: function() {
  341. 							uni.hideLoading();
  342. 						}
  343. 					});
  344. 				}
  345. 			},
  346. 			del_img(e) { //删除图片
  347. 				this.fileImg.map((item, index) => {
  348. 					if (item.url == e.tempFile.url) {
  349. 						this.fileImg.splice(index, 1)
  350. 					}
  351. 				})
  352. 				this.fileLists.map((item, index) => {
  353. 					if (item.fileID == e.tempFile.fileID) {
  354. 						this.fileLists.splice(index, 1)
  355. 					}
  356. 				})
  357. 			},
  358. 			previewImage() { //预览图片
  359. 				uni.previewImage({
  360. 					current: 0,
  361. 					urls: this.supplyPicture
  362. 				})
  363. 			}
  364. 		}
  365. 	}
  366. </script>
  367.  
  368. <style lang="scss" scoped>
  369. 	.content {
  370.  
  371. 		.title {
  372. 			background-color: #F5F5F5;
  373. 			margin-bottom: 24rpx;
  374. 			margin-top: 24rpx;
  375. 			display: flex;
  376. 			align-items: center;
  377.  
  378. 			text {
  379. 				display: block;
  380. 				padding: 20rpx 0;
  381.  
  382. 				&:last-child {
  383. 					padding-left: 10rpx;
  384. 				}
  385.  
  386. 				&:first-child {
  387. 					padding-right: 10rpx;
  388. 					padding-left: 20rpx;
  389. 				}
  390. 			}
  391. 		}
  392.  
  393. 		.wrap {
  394. 			width: 95%;
  395. 			margin: 0 auto;
  396. 		}
  397.  
  398.  
  399. 		.data_info {
  400. 			.list {
  401. 				display: flex;
  402. 				align-items: center;
  403. 				margin-bottom: 24rpx;
  404. 				background-color: #F5F5F5;
  405. 				padding: 20rpx;
  406. 				box-sizing: border-box;
  407.  
  408. 				text {
  409. 					display: inline-block;
  410.  
  411. 					&:last-child {
  412. 						color: #999999;
  413. 						flex: 3;
  414. 					}
  415. 				}
  416.  
  417. 				.checkbox {
  418. 					display: flex;
  419. 					align-items: center;
  420.  
  421. 					label {
  422. 						padding-right: 20rpx;
  423. 					}
  424.  
  425. 					radio {
  426. 						transform: scale(.8)
  427. 					}
  428. 				}
  429. 			}
  430.  
  431. 			.foods {
  432. 				padding-bottom: 24rpx;
  433.  
  434. 				text {
  435. 					font-size: 28rpx;
  436. 					color: #666666;
  437. 					display: block;
  438. 					text-align: center;
  439. 				}
  440.  
  441. 				.foods_img {
  442. 					display: flex;
  443. 					align-items: center;
  444. 					justify-content: space-between;
  445. 					border: 1px solid #EEEEEE;
  446.  
  447. 					.text {
  448. 						flex: 1;
  449. 						width: 50%;
  450. 					}
  451.  
  452. 					.img {
  453. 						flex: 1;
  454. 						width: 50%;
  455. 						box-sizing: border-box;
  456. 						border-left: 1px solid #EEEEEE;
  457.  
  458. 						image {
  459. 							width: 80%;
  460. 							height: 180rpx;
  461. 							display: block;
  462. 							margin: 24rpx auto;
  463. 						}
  464. 					}
  465. 				}
  466.  
  467. 				.foods_text {
  468. 					border: 1px solid #EEEEEE;
  469. 					border-top: none;
  470. 					display: flex;
  471. 					align-items: center;
  472. 					justify-content: space-between;
  473.  
  474. 					.text {
  475. 						flex: 1;
  476. 						width: 50%;
  477. 					}
  478.  
  479. 					.foods_list {
  480. 						border-left: 1px solid #EEEEEE;
  481. 						flex: 1;
  482. 						width: 50%;
  483. 						padding: 24rpx 0;
  484.  
  485. 						text {
  486. 							line-height: 40rpx;
  487. 						}
  488. 					}
  489. 				}
  490. 			}
  491.  
  492. 			.feedback {
  493. 				padding-bottom: 24rpx;
  494.  
  495. 				text {
  496. 					display: block;
  497. 					background-color: #F5F5F5;
  498. 					padding: 20rpx;
  499. 				}
  500. 			}
  501.  
  502. 			.add_image {
  503. 				padding-bottom: 24rpx;
  504.  
  505. 				text {
  506. 					display: block;
  507. 					background-color: #F5F5F5;
  508. 					padding: 20rpx;
  509. 				}
  510.  
  511. 				.upload {
  512. 					.add {
  513.  
  514. 						image {
  515. 							width: 100rpx;
  516. 						}
  517. 					}
  518. 				}
  519. 			}
  520. 		}
  521. 	}
  522. </style>
  523.

2.文件上传

  1. <template>
  2. 	<view class="file">
  3. 					<uni-file-picker file-mediatype="all" @select="select" @delete='del' v-model="showDetalistFile">
  4. 						<view class="text_img">
  5. 							<image src="@/static/images/upload.png" mode=""></image>
  6. 							<text>添加附件</text>
  7. 						</view>
  8. 					</uni-file-picker>
  9. 				</view>
  10. </template>
  11.  
  12. <script>
  13. 	import uniFilePicker from "@/components/uni-file-picker/uni-file-picker.vue"
  14. 	import {
  15. 		courseActivityTeacheractivityCode
  16. 	} from "@/api/course_activity.js"
  17. 	import urlConfig from "@/utils/config.js"
  18. 	export default {
  19. 		data() {
  20. 			return {
  21. 				submitFrom: {
  22. 					activityCode: null, //activityCode
  23. 					experience: null, //心得体会
  24. 					coursewares: null //上传文档
  25. 				},
  26. 				fileUrl: [],
  27. 				dataDetails: {},
  28. 				detalistFile: [],
  29. 				showDetalistFile: []
  30. 			}
  31. 		},
  32.  
  33. 		async mounted() {
  34. 			await this.get_details()
  35. 		},
  36. 		components: {
  37. 			uniFilePicker
  38. 		},
  39. 		methods: {
  40. 			get_details() { //获取详情数据
  41. 				courseActivityTeacherDetail(this.code).then(res => {
  42. 					if (res.data.courseActivityTeacher) {
  43. 						this.dataDetails = res.data.courseActivityTeacher
  44. 						this.submitFrom.experience = this.dataDetails.experience
  45. 					}
  46. 					if (res.data.fileinfos) {
  47. 						this.detalistFile = res.data.fileinfos
  48. 						for (var i = 0; i < this.detalistFile.length; i++) {
  49. 							var mydata = {
  50. 								"name": this.detalistFile[i].fileOriginName,
  51. 								"extname": this.detalistFile[i].fileSuffix,
  52. 								"url": "",
  53. 								"fileId": this.detalistFile[i].fileId,
  54. 							}
  55. 							this.showDetalistFile.push(mydata);
  56. 						}
  57. 					}
  58. 					if (res.data.courseActivityTeacher) {
  59. 						this.stateFlag = res.data.courseActivityTeacher.statusFlag
  60. 					} else {
  61. 						this.stateFlag = null
  62. 					}
  63. 				})
  64. 			},
  65. 			submit() { //点击提交
  66. 					var coursewares = [];
  67. 					for (var i = 0; i < this.detalistFile.length; i++) {
  68. 						coursewares.push(this.detalistFile[i].fileId)
  69. 					}
  70. 					this.submitFrom.coursewares = coursewares.join(',');
  71. 					courseActivityTeacheraddExperience(this.submitFrom).then(res => {
  72. 						if (res.code == "00000") {
  73. 							this.submitFrom = null
  74. 							uni.redirectTo({
  75. 								url: "/pages/course_activity/course_activity_manager/activity-list"
  76. 							})
  77. 							uni.showToast({
  78. 								title: '提交成功',
  79. 								duration: 2000
  80. 							})
  81. 						}
  82. 					})
  83. 			},
  84. 			select(e) {
  85. 				let that = this
  86. 				uni.showLoading({
  87. 					title: "上传中"
  88. 				});
  89. 				const tempFilePaths = e.tempFilePaths;
  90. 				for (var i = 0; i < tempFilePaths.length; i++) {
  91. 					const tempFile = e.tempFiles[i];
  92. 					uni.uploadFile({
  93. 						url: urlConfig + '/sysFileInfo/upload',
  94. 						header: {
  95. 							'Authorization': uni.getStorageSync('Admin-Token')
  96. 						},
  97. 						formData: {
  98. 							secretFlag: 'N',
  99. 							fileLocation: 5
  100. 						},
  101. 						filePath: tempFilePaths[i],
  102. 						name: 'file',
  103. 						success: (uploadFileRes) => {
  104. 							uni.hideLoading();
  105. 							const back = JSON.parse(uploadFileRes.data);
  106. 							if (uploadFileRes.statusCode == 200) {
  107. 								that.$set(back.data, "uuid", tempFile.uuid)
  108. 								that.detalistFile.push(back.data);
  109. 							}
  110. 						},
  111. 						fail: () => {
  112. 							uni.hideLoading();
  113. 							uni.showToast("上传失败，请联系开发！")
  114. 						},
  115. 						complete: function() {
  116. 							uni.hideLoading();
  117. 						}
  118. 					});
  119. 				}
  120. 			},
  121. 			del(e) { //删除
  122. 				this.detalistFile.map((item, index) => {
  123. 					if (item.uuid) {
  124. 						if (item.uuid == e.tempFile.uuid) {
  125. 							this.detalistFile.splice(index, 1)
  126. 						}
  127. 					} else {
  128. 						if (item.fileId == e.tempFile.fileId) {
  129. 							this.detalistFile.splice(index, 1)
  130. 						}
  131. 					}
  132. 				})
  133. 			}
  134. 		}
  135. 	}
  136. </script>
  1. <template>
  2. 	<view class="content">
  3. 		<view class="wrap">
  4.  
  5. 			<!-- 活动通知开始 -->
  6. 			<view class="activity_inform">
  7. 				<view class="list">
  8. 					<text>教研活动主题：</text>
  9. 					<text>{{details.name}}</text>
  10. 				</view>
  11. 				<view class="list">
  12. 					<text>教研活动时间：</text>
  13. 					<text>{{details.updateTime}} 至 {{details.endTime}}</text>
  14. 				</view>
  15. 				<view class="list">
  16. 					<text>教研活动地点：</text>
  17. 					<text>{{details.place}}</text>
  18. 				</view>
  19. 				<view class="list">
  20. 					<text>参加活动成员：</text>
  21. 					<text>{{details.teacherGrades}}</text>
  22. 				</view>
  23. 			</view>
  24. 			<!-- 活动通知结束 -->
  25.  
  26. 			<!-- 心得体会开始 -->
  27. 			<view class="activity_experience" v-if="stateFlag == 1">
  28. 				<view class="textarea">
  29. 					<textarea placeholder-style="color:#999999" placeholder="请填写心得体会" v-model="submitFrom.experience" />
  30. 				</view>
  31. 				<view class="file">
  32. 					<uni-file-picker file-mediatype="all" @select="select" @delete='del' v-model="showDetalistFile">
  33. 						<view class="text_img">
  34. 							<image src="@/static/images/upload.png" mode=""></image>
  35. 							<text>添加附件</text>
  36. 						</view>
  37. 					</uni-file-picker>
  38. 				</view>
  39. 			</view>
  40. 			<!-- 心得体会结束 -->
  41.  
  42. 			<!-- 按钮开始 -->
  43. 			<view class="btn" v-if="stateFlag == null">
  44. 				<button type="primary" @click="join_activities">参加活动</button>
  45. 				<button type="default" @click="go_back">返回</button>
  46. 			</view>
  47. 			<view class="btn" v-if="stateFlag == 0">
  48. 				<button type="primary" @click="sign_in">签到</button>
  49. 			</view>
  50. 			<view class="btn" v-if="stateFlag == 1">
  51. 				<button type="default">签到成功</button>
  52. 				<button type="primary" @click="submit">提交</button>
  53. 			</view>
  54. 			<!-- 按钮结束 -->
  55.  
  56. 		</view>
  57. 	</view>
  58. </template>
  59.  
  60. <script>
  61. 	import uniFilePicker from "@/components/uni-file-picker/uni-file-picker.vue"
  62. 	import {
  63. 		courseActivityTeacherDetail,
  64. 		courseActivityTeacherAdd,
  65. 		courseActivityTeacheraddExperience,
  66. 		courseActivityTeacheractivityCode
  67. 	} from "@/api/course_activity.js"
  68. 	import upload from "@/api/upload.js"
  69. 	export default {
  70. 		data() {
  71. 			return {
  72. 				details: null, //详情	
  73. 				stateFlag: null, //状态
  74. 				code: null,
  75. 				dataFrom: {
  76. 					activityCode: null //活动code
  77. 				},
  78. 				submitFrom: {
  79. 					activityCode: null, //activityCode
  80. 					experience: null, //心得体会
  81. 					coursewares: null //上传文档
  82. 				},
  83. 				fileUrl: [],
  84. 				dataDetails: {},
  85. 				detalistFile: [],
  86. 				showDetalistFile: []
  87. 			}
  88. 		},
  89. 		onLoad(option) {
  90. 			this.details = JSON.parse(decodeURIComponent(option.item))
  91. 			this.code = this.details.code
  92. 			this.dataFrom.activityCode = this.details.code
  93. 			this.submitFrom.activityCode = this.details.code
  94. 		},
  95. 		async mounted() {
  96. 			await this.get_details()
  97. 		},
  98. 		components: {
  99. 			uniFilePicker
  100. 		},
  101. 		methods: {
  102. 			get_details() { //获取详情数据
  103. 				courseActivityTeacherDetail(this.code).then(res => {
  104. 					if (res.data.courseActivityTeacher) {
  105. 						this.dataDetails = res.data.courseActivityTeacher
  106. 						this.submitFrom.experience = this.dataDetails.experience
  107. 					}
  108. 					if (res.data.fileinfos) {
  109. 						this.detalistFile = res.data.fileinfos
  110. 						for (var i = 0; i < this.detalistFile.length; i++) {
  111. 							var mydata = {
  112. 								"name": this.detalistFile[i].fileOriginName,
  113. 								"extname": this.detalistFile[i].fileSuffix,
  114. 								"url": this.detalistFile[i].fileId,
  115. 								"fileId": this.detalistFile[i].fileId,
  116. 							}
  117. 							this.showDetalistFile.push(mydata);
  118. 						}
  119. 					}
  120. 					if (res.data.courseActivityTeacher) {
  121. 						this.stateFlag = res.data.courseActivityTeacher.statusFlag
  122. 					} else {
  123. 						this.stateFlag = null
  124. 					}
  125. 				})
  126. 			},
  127. 			join_activities() { //点击参加活动
  128. 				courseActivityTeacherAdd(this.dataFrom).then(res => {
  129. 					this.get_details()
  130. 				})
  131. 			},
  132. 			go_back() { //点击返回
  133. 				uni.navigateTo({
  134. 					url: "/pages/course_activity/course_activity_manager/activity-list"
  135. 				})
  136. 			},
  137. 			sign_in() { //点击签到
  138. 				courseActivityTeacheractivityCode(this.dataFrom).then(res => {
  139. 					this.get_details()
  140. 				})
  141. 			},
  142. 			submit() { //点击提交
  143. 				if (this.submitFrom.experience == null) {
  144. 					uni.showToast({
  145. 						icon: 'none',
  146. 						title: '请填写心得体会',
  147. 						duration: 2000
  148. 					})
  149. 				} else {
  150. 					var coursewares = [];
  151. 					for (var i = 0; i < this.detalistFile.length; i++) {
  152. 						coursewares.push(this.detalistFile[i].fileId)
  153. 					}
  154. 					this.submitFrom.coursewares = coursewares.join(',');
  155. 					courseActivityTeacheraddExperience(this.submitFrom).then(res => {
  156. 						if (res.code == "00000") {
  157. 							this.submitFrom = null
  158. 							uni.redirectTo({
  159. 								url: "/pages/course_activity/course_activity_manager/activity-list"
  160. 							})
  161. 							uni.showToast({
  162. 								title: '提交成功',
  163. 								duration: 2000
  164. 							})
  165. 						}
  166. 					})
  167. 				}
  168. 			},
  169. 			select(e) {
  170. 				let that = this
  171. 				uni.showLoading({
  172. 					title: "上传中"
  173. 				});
  174. 				const tempFilePaths = e.tempFilePaths;
  175. 				for (var i = 0; i < tempFilePaths.length; i++) {
  176. 					const tempFile = e.tempFiles[i];
  177. 					uni.uploadFile({
  178. 						url: upload,
  179. 						header: {
  180. 							'Authorization': uni.getStorageSync('Admin-Token')
  181. 						},
  182. 						filePath: tempFilePaths[i],
  183. 						name: 'file',
  184. 						success: (uploadFileRes) => {
  185. 							uni.hideLoading();
  186. 							const back = JSON.parse(uploadFileRes.data);
  187. 							if (uploadFileRes.statusCode == 200) {
  188. 								that.$set(back.data, "uuid", tempFile.uuid)
  189. 								that.$set(back.data, "path", tempFile.path)
  190. 								that.$set(back.data, "url", tempFile.url)
  191. 								that.detalistFile.push(back.data);
  192. 							}
  193. 						},
  194. 						fail: () => {
  195. 							uni.hideLoading();
  196. 							uni.showToast("上传失败，请联系开发！")
  197. 						},
  198. 						complete: function() {
  199. 							uni.hideLoading();
  200. 						}
  201. 					});
  202. 				}
  203. 			},
  204. 			del(e) { //删除
  205. 				this.detalistFile.map((item, index) => {
  206. 					if (e.tempFile.uuid) {
  207. 						if (item.uuid == e.tempFile.uuid) {
  208. 							this.detalistFile.splice(index, 1)
  209. 						}
  210. 					} else {
  211. 						if (item.url == e.tempFile.fileId || item.fileId == e.tempFile.fileId) {
  212. 							this.detalistFile.splice(index, 1)
  213. 						}
  214. 					}
  215. 				})
  216.  
  217. 			}
  218. 		}
  219. 	}
  220. </script>
  221.  
  222. <style lang="scss" scoped>
  223. 	.content {
  224.  
  225. 		.wrap {
  226. 			width: 95%;
  227. 			margin: 0 auto;
  228. 		}
  229.  
  230. 		.activity_inform {
  231. 			.list {
  232. 				margin-top: 24rpx;
  233. 				background-color: #F5F5F5;
  234. 				padding: 20rpx;
  235. 				border-radius: 8rpx;
  236. 				box-sizing: border-box;
  237. 				display: flex;
  238. 				align-items: center;
  239.  
  240. 				&:nth-child(2) {
  241. 					display: block;
  242.  
  243. 					text:last-child {
  244. 						display: block;
  245. 						padding-top: 10rpx;
  246. 					}
  247. 				}
  248.  
  249. 				text {
  250. 					color: #333333;
  251.  
  252. 					&:last-child {
  253. 						color: #999999;
  254. 						flex: 3;
  255. 					}
  256. 				}
  257. 			}
  258. 		}
  259.  
  260. 		.activity_experience {
  261. 			.textarea {
  262. 				padding-top: 24rpx;
  263. 			}
  264.  
  265. 			.file {
  266. 				padding-top: 24rpx;
  267.  
  268. 				text {
  269. 					display: block;
  270. 				}
  271.  
  272. 				.text_img {
  273. 					display: flex;
  274. 					align-items: center;
  275.  
  276. 					image {
  277. 						width: 40rpx;
  278. 						height: 40rpx;
  279. 						padding-right: 10rpx;
  280. 					}
  281. 				}
  282. 			}
  283.  
  284. 		}
  285.  
  286. 		.btn {
  287. 			padding-top: 24rpx;
  288. 		}
  289. 	}
  290. </style>

手写图片上传

  1. <template>
  2.  
  3. 	<view class="center">
  4.  
  5. 		<!-- 上传图片 -->
  6. 		<view class="uploadcontainer">
  7. 			<view class="uploadBox" v-for="(item, i) in imgList" :key="i.id">
  8. 				<view class="uploadCenter">
  9. 					<image :src="item.url" width='aspectFill' @click="viewImage(i)">
  10. 					</image>
  11. 					<uni-icons color='#fff' type="closeempty" class="closeClass" size="20" @click="delImg(i)">
  12. 					</uni-icons>
  13. 				</view>
  14. 			</view>
  15. 			<view class="uploadAdd" @tap="upload" v-if="imgList.length < 9">
  16. 				<view class="uploadAddImg">
  17. 					<image src="../../static/imgAdd.png" mode="aspectFill"></image>
  18. 				</view>
  19. 			</view>
  20. 		</view>
  21.  
  22.  
  23. 		<button type="default" @click="submit" :disabled="cannotFlag">提交</button>
  24. 	</view>
  25. </template>
  26.  
  27.  
  28.  
  29. <script>
  30. 	export default {
  31. 		data() {
  32. 			return {
  33. 				imgList: [],
  34. 				imgUrl: '/sysFileInfo/previewByObjectName?fileBucket=defaultBucket&fileObjectName=',
  35. 				urlConfig: "http://192.168.10.109:8080",
  36. 				cannotFlag: false
  37. 			}
  38. 		},
  39. 		methods: {
  40. 			submit() {
  41. 				var arrList = []
  42. 				arrList = (this.imgList.map(item => item.id)).join(',')
  43. 				console.log(arrList)
  44. 			},
  45. 			upload() {
  46. 				var that = this;
  47. 				uni.chooseImage({
  48. 					count: 10,
  49. 					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
  50. 					sourceType: ['album', 'camera'], //从相册、相机选择
  51. 					success: function(res) {
  52. 						that.cannotFlag = true
  53. 						var countupload = 0;
  54. 						for (var i = 0; i < res.tempFiles.length; i++) {
  55. 							if (res.tempFiles[i].size / 1024 / 1024 > 5) {
  56. 								uni.showToast({
  57. 									icon: 'none',
  58. 									title: '图片过大,请重新上传',
  59. 									duration: 3000
  60. 								})
  61. 								return
  62. 							}
  63. 							var imageType = res.tempFiles[i].type == "image/jpeg" || res.tempFiles[i].type ==
  64. 								"image/jpg" || res.tempFiles[i].type == "image/png" || res.tempFiles[i].type ==
  65. 								"image/gif"
  66. 							if (!imageType) {
  67. 								uni.showToast({
  68. 									icon: 'none',
  69. 									title: '图片类型不正确,请重新上传',
  70. 									duration: 3000
  71. 								})
  72. 								return
  73. 							}
  74. 							if (res.tempFiles.length > 9) {
  75. 								uni.showToast({
  76. 									icon: 'none',
  77. 									title: '一次最多只能添加9张图片',
  78. 									duration: 3000
  79. 								})
  80. 								that.cannotFlag = false;
  81. 								return
  82. 							}
  83. 							if (that.imgList.length + res.tempFiles.length > 10) {
  84. 								uni.showToast({
  85. 									icon: 'none',
  86. 									title: '最多只能上传10张',
  87. 									duration: 3000
  88. 								})
  89. 								that.cannotFlag = false;
  90. 								return
  91. 							}
  92. 							const tempFilePaths = res.tempFiles[i].path;
  93. 							// 图片传
  94. 							uni.showLoading({
  95. 								title: "上传中"
  96. 							});
  97. 							const uploadTask = uni.uploadFile({
  98. 								url: 'http://192.168.10.109:8080/sysFileInfo/upload?secretFlag=N', // post请求地址
  99. 								filePath: tempFilePaths,
  100. 								name: 'file', // 待确认
  101. 								header: {
  102. 									'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE1NTQwMzAxMjU2MTEzMjMzOTQsImFjY291bnQiOiJ6Y3dsIiwidXVpZCI6ImY1NDRkYTBjLWE2ZmEtNGJmMy1hNjAzLTY0M2JmNTAwZWZlNCIsInJlbWVtYmVyTWUiOmZhbHNlLCJleHBpcmF0aW9uRGF0ZSI6MTY2MjAwMTg2NDA4MiwiY2FUb2tlbiI6ImVlNzY1Yzk5NGM0NzZhNjYxODlkNzNkODJjYjQyNTNiIiwib3RoZXJzIjpudWxsLCJzdWIiOiIxNTU0MDMwMTI1NjExMzIzMzk0IiwiaWF0IjoxNjYxMzk3MDY0LCJleHAiOjE2NjIwMDE4NjR9.lIgZSZeuMZBiCZcgnJ-CfEdWHsXUo9v3997ZNU-lzR6YHhjnYgry8E-dK0zt-qAaGL3w6khA_9-033wKqMe8Xw'
  103. 								},
  104. 								success: function(uploadFileRes) {
  105. 									var arrList = []
  106. 									arrList.push(JSON.parse(uploadFileRes.data).data);
  107. 									arrList.forEach(item => {
  108. 										that.imgList.push({
  109. 											url: `${that.urlConfig}${that.imgUrl}${item.fileObjectName}`,
  110. 											id: item.fileObjectName
  111. 										})
  112. 									})
  113. 									uni.hideLoading();
  114. 								},
  115. 								fail: function(uploadFileFail) {
  116. 									uni.hideLoading();
  117. 								},
  118. 								complete: (e) => {
  119. 									countupload++;
  120. 									if (countupload == res.tempFiles.length) {
  121. 										that.cannotFlag = false;
  122. 									}
  123. 									uni.hideLoading();
  124. 								}
  125. 							});
  126. 						}
  127. 					},
  128. 					error: function(e) {
  129. 						console.log(e);
  130. 					}
  131. 				});
  132. 			},
  133. 			delImg(i) {
  134. 				this.imgList.splice(i, 1);
  135. 			},
  136. 			viewImage(i) {
  137. 				var arrList = []
  138. 				arrList = this.imgList.map(item => item.url)
  139. 				uni.previewImage({
  140. 					current: i,
  141. 					urls: arrList
  142. 				});
  143. 			}
  144. 		}
  145. 	}
  146. </script>
  147.  
  148.  
  149. <style>
  150. 	.center {
  151. 		margin: 20rpx;
  152. 	}
  153.  
  154. 	.uploadcontainer {
  155. 		display: flex;
  156. 		box-sizing: border-box;
  157. 		flex-wrap: wrap;
  158. 		margin: -10rpx
  159. 	}
  160.  
  161. 	.uploadBox {
  162. 		width: 33.3%;
  163. 		padding-top: 33.33%;
  164. 		height: 0%;
  165. 		position: relative;
  166. 	}
  167.  
  168. 	.uploadAdd {
  169. 		width: 33.3%;
  170. 		padding-top: 33.3%;
  171. 		height: 0%;
  172. 		position: relative;
  173. 	}
  174.  
  175.  
  176. 	.closeClass {
  177. 		position: absolute;
  178. 		top: 3px;
  179. 		right: 3px;
  180. 		height: 26px;
  181. 		line-height: 26px;
  182. 		width: 26px;
  183. 		border-radius: 50%;
  184. 		background-color: rgba(0, 0, 0, 0.5);
  185. 	}
  186.  
  187. 	.uploadCenter {
  188. 		position: absolute;
  189. 		top: 0;
  190. 		right: 0;
  191. 		bottom: 0;
  192. 		left: 0;
  193. 		margin: 5px;
  194. 		border: 1px #eee solid;
  195. 		border-radius: 5px;
  196. 		overflow: hidden;
  197. 	}
  198.  
  199. 	.uploadCenter image {
  200. 		width: 100%;
  201. 		height: 100%;
  202. 	}
  203.  
  204. 	.uploadAddImg {
  205. 		position: absolute;
  206. 		top: 0;
  207. 		right: 0;
  208. 		bottom: 0;
  209. 		left: 0;
  210. 		margin: 5px;
  211. 		border: 1px #ccc solid;
  212. 		border-radius: 5px;
  213. 		overflow: hidden;
  214. 	}
  215.  
  216. 	.uploadAddImg image {
  217. 		width: 100%;
  218. 		height: 100%;
  219. 		padding: 25px;
  220. 		box-sizing: border-box;
  221. 	}
  222. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/183470?site
推荐阅读
相关标签

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

  

闽ICP备14008679号