veterans_H5/h5_web/pages/entrepreneurshipGuidelines/addPlan/addPlan.vue

<template>
	<view class="plan">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }"
			:border-bottom="false"></u-navbar>
		<u-form :model="form" ref="uForm">
			<u-form-item label="名称:" prop="title" label-position="top">
				<u-input v-model="form.title" placeholder="请输入名称" :border="true" />
			</u-form-item>
			<u-form-item label="描述:" prop="description" label-position="top">
				<view class="box">
					<jinEdit placeholder="请输入描述" @editOk="editOk" :uploadFileUrl="config.uploadUrl" :header="{
								Authorization: `Bearer ${vuex_token}`
							}"></jinEdit>
				</view>
			</u-form-item>
			<u-form-item label="创业计划书:" prop="planBookUrl" label-position="top">
				<view class="upload">
					<view class="upload-box" @click="uploadFile">
						<text>+上传文件，格式：pdf</text>
					</view>
					<view class="file-list">
						<view class="file-list-item" v-for="(item, index) in fileList" :key="index">
							<view>{{ item.fileName }}</view>
							<view class="close">
								<u-icon name="close" size="20" color="#9B9B9B" @click="delFile(index)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-form-item>
		</u-form>
		<view class="plan-bottom">
			<view class="plan-bottom-box" @click="submitPlan">提交</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import jinEdit from '../../../components/jin-edit/jin-edit.vue';
	export default {
		components: {
			jinEdit
		},
		data() {
			return {
				form: {
					title: '',
					description: '',
					planBookUrl: '',
					planBookName: ''
				},
				rules: {
					title: [{
						required: true,
						message: '请输入名称',
						trigger: ['change', 'blur'],
					}],
					description: [{
						required: true,
						message: '请输入描述',
						trigger: ['change', 'blur'],
					}],
					planBookUrl: [{
						required: true,
						message: '请上传企业计划书',
						trigger: ['change', 'blur'],
					}]
				},
				fileList: []
			}
		},
		mounted() {
			// this.$nextTick(function() {
			// 	const input = document.createElement('input')
			// 	input.style.width = "100%";
			// 	input.type = 'file' //添加file类型
			// 	// input.multiple = 'multiple' // 可以选择多个
			// 	input.accept = ".pdf" // 限制只能上传PDF文件，可以不限制，能上传任何类型
			// 	input.style.height = "100%";
			// 	input.style.position = "absolute";
			// 	input.style.top = "0";
			// 	input.style.right = "0";
			// 	input.style.opacity = "0";
			// 	input.style.overflow = "hidden"; //防止注意input 元素溢出
			// 	input.id = 'file';
			// 	var _this = this;
			// 	setTimeout(() => {
			// 		this.$refs.input.$el.appendChild(
			// 			input
			// 		); // 这里可能会报$el找不到错误，所以加了延时器，报错的原因是this.$refs.input没有找到为null，所以需要等页面结构加载完后再将其添加进去
			// 		input.onchange = (event) => { // 点击上传选择文件
			// 			var file = event.target.files;
			// 			if (file.length > 0) {
			// 				file.forEach(item => { // 因为后台限制，只能一个一个文件的上传，所以当选择多个文件后，需要遍历一个一个调用上传接口
			// 					_this.uploadAPI(item); // 上传图片
			// 				})
			// 			}
			// 		}
			// 	}, 1000)
			// })
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			/**
			 * 富文本返回值
			 * @param {Object} res
			 */
			editOk(res) {
				this.form.description = res?.html
			},
			/**
			 * 上传文件
			 */
			uploadFile() {
				uni.chooseFile({
					count: 1,
					extension: ['.pdf'],
					success: async (res) => {
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							// 图片上传服务器
							await uni.uploadFile({
								url: this.config.uploadUrl,
								filePath: temp,
								header: {
									Authorization: `Bearer ${vuex_token}`
								},
								success: res => {
									const data = JSON.parse(res.data).data
									if (data.suffix === 'pdf') {
										this.fileList = [{
											...data
										}]
										this.form.planBookUrl = data.url
										this.form.planBookName = data.fileName
									} else {
										uni.showToast({
											title: '只能上传pdf文件',
											duration: 2000
										})
									}
									uni.hideLoading()
								},
								fail: err => {
									uni.hideLoading()
								}
							});
						}
					}
				});
			},
			uploadAPI(path) {
				uni.showLoading({
					title: '上传中'
				})
				var _this = this
				var fData = new FormData();
				fData.append("file", path);
				var xhr = new XMLHttpRequest();
				var surl = this.config.uploadUrl; // 文件上传地址
				xhr.open("POST", surl, true);
				xhr.onload = function(e) {
					let response = JSON.parse(e.currentTarget.response)
					let file = response.data.url; //获取服务端传过来的文件地址
				};
				xhr.onreadystatechange = () => {
					if (xhr.readyState == 4 && xhr.status == 200) { //上传后台成功
						uni.hideLoading()
						const res = JSON.parse(xhr.responseText)
						_this.fileList.push(res.data); // 上传成功后放进fileList数组用于展示
					} else {
						uni.hideLoading()
					}
				}

				// 这里设置请求头，做的时候遇到一个问题，明明上传的是FormData，可是在请求中变成了request payload,后台需要的是FormData，解决方法，设置enctype为multipart/form-data，不要设置Content-Type，切记直接不设置Content-Type
				xhr.setRequestHeader('enctype', "multipart/form-data");
				xhr.send(fData)
			},
			/**
			 * 删除文件
			 * @param { Number } index
			 */
			delFile(index) {
				this.fileList.splice(index, 1)
			},
			submitPlan() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.entrepreneurship.addEntrepreneurshipApi(this.form).then(res => {
							if (res.code === 200) {
								this.$refs.uToast.show({
									title: '提交成功!',
									type: 'success',
									url: 'pages/entrepreneurshipGuidelines/entrepreneurshipGuidelines'
								})
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.plan {
		padding: 34rpx 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;

		.box {
			border: solid 1px #dcdfe6;
		}

		.upload {
			width: 100%;
			display: flex;
			flex-direction: column;

			&-box {
				width: 100%;
				height: 59rpx;
				line-height: 59rpx;
				text-align: center;
				border: solid 1px #D1D1D1;
				border-radius: 5rpx;
				color: #9B9B9B;
				font-size: 28rpx;
				position: relative;
			}

			.file-list {
				margin-top: 30rpx;

				.file-list-item {
					height: 59rpx;
					line-height: 59rpx;
					display: flex;
					justify-content: center;
					border: dashed 1px #0091FF;
					color: #008FFF;
					font-size: 28rpx;
					position: relative;

					.close {
						position: absolute;
						right: 30rpx;
						top: -2rpx;
					}
				}
			}
		}

		.plan-bottom {
			position: fixed;
			bottom: 0;
			width: calc(100% - 60rpx);
			height: 166rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;

			&-box {
				background-color: #709078;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 26rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}
</style>