uni-app上传图片及表单数据

代码只需要修改对应的接口即可，还有许多待优化的地方，我会慢慢优化。

这里给form里添加点数据就行了。把接口改成对应的上传接口。

根据个人情况灵活运用。

<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#1f2a66" status-bar left-icon="left" left-text="返回"
			title="手动上传" @clickLeft="back" color="#fff" />
		<view class="box">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="产品名:" name="projectName">
					<uni-easyinput type="text" v-model="formData.projectName" placeholder="请输入产品名称"
						:disabled="start===300" />
				</uni-forms-item>
				<uni-forms-item label="规 格:" name="projectModel">
					<uni-easyinput v-model="formData.projectModel" type="text" placeholder="请输入规格"
						:disabled="start===300" />
				</uni-forms-item>

				<uni-forms-item label="重 量:" name="weight">
					<uni-easyinput v-model="formData.weight" type="text" placeholder="请输入重量" />
				</uni-forms-item>

				<uni-forms-item label="件 数:" name="goodsNumber">
					<uni-easyinput v-model="formData.goodsNumber" type="text" placeholder="请输入件数" />
				</uni-forms-item>
				<uni-forms-item name="imageOne">
					<view class="imagestop">上传产品标签照:</view>
					<view>
						<img :src="src2" alt="">

						<!-- 	<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
								@progress="progress" @success="success" @fail="fail" limit="1" /> -->
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:previewFullImage="true" width="250" height="250" :maxCount="1">
						</u-upload>
						示例图片
					</view>

				</uni-forms-item>
				<uni-forms-item name="imageTow">
					<view class="imagestop">上传称重数量照:</view>
					<view>
						<img :src="src1" alt="">
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
							:multiple="false" :previewFullImage="false" width="250" height="250" :maxCount="1" >
						</u-upload>
						示例图片
					</view>
				</uni-forms-item>
			</uni-forms>
			<u-button text="提交" @click="submit" color="#1f2a66"></u-button>
		</view>
	</view>

</template>

<script>

	export default {
	
		data() {
			return {
				src1: "" ,//放置预览图1
				src2: "",//放置预览图2
				show: true,
				start: null, //判断是300还说400，控制input框
				fileList1: [],
				fileList2: [],
				// imageValue: [],
				// 表单数据
				formData: {
					projectName: '', //名称
					projectModel: "", //规格
					weight: null, //重量
					goodsNumber: "", //数量
					imageOne: "",
					imageTow: "",

				},
				rules: {
					// 对projectName字段进行必填验证
					projectName: {
						rules: [{
							required: true,
							errorMessage: '请输入产品名称',
						}]
					},
					// 对规格字段进行必填验证
					projectModel: {
						rules: [{
							required: true,
							errorMessage: '请输入规格',
						}]
					},
					//对数量字段进行必填验证
					goodsNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入数量',
						}]
					}
				},

			}
		},
		onLoad(a) {
			var userdatas = uni.getStorageSync('userdatas')
			console.log("neicun")
			this.formData.projectModel = userdatas.projectModel
			this.formData.projectName = userdatas.projectName
			if (a.query === "300") {
				this.start = 300
			}

		},
		methods: {
			// 触发提交表单
			submit() {
				var that = this
				this.$refs.form.validate().then(async res => {   
					uni.showLoading({
						title: '加载中'
					});
					console.log('表单数据信息：', res, 1);
					console.log(this.fileList1.length, this.fileList2.length)
					console.log(this.formData.imageOne, this.formData.imageTow)
					if (this.formData.imageOne === "" || this.formData.imageTow === "") {
						uni.showToast({
							title: '需要上传图片',
							duration: 2000
						});
						return
					} else {
						uni.request({
							url: '',//接口路径
							method: 'POST',
							data: {
								projectName: res.projectName, //名称
								projectModel: res.projectModel, //规格
								weight: res.weight, //重量
								goodsNumber: parseInt(res.goodsNumber), //数量
								imageOne: res.imageOne,
								imageTow: res.imageTow,
							},
							header: {
								'Authorization': uni.getStorageSync("token"),
								'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
							},
							success(res) {
								uni.hideLoading()
								uni.removeStorageSync("userdatas")
								uni.navigateBack({
									delta: 1
								})
								that.formData = {}
								that.fileList1 = []
								that.fileList2 = []
							}
						})
					}


				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},



			// 删除图片
			deletePic(event) {

				var ids = JSON.parse(event.file.url.data).id
				console.log(event, "删除")
				console.log(JSON.parse(event.file.url.data).id)
				this[`fileList${event.name}`].splice(event.index, 1)

				uni.request({
					url: "",
					method: 'DELETE',
					header: {
						'Authorization': uni.getStorageSync("token"),
					},
					data: [ids],
					success: (res) => {
						this.fileList1 = ""

					}
				})
			},
			// 新增图片
			async afterRead(event) {
			
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i],event)
					console.log(result, "f")
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url,event) {
				console.log(event,"event")
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: '', //仅为示例，非真实的接口地址
						header: {
							'Authorization': uni.getStorageSync("token"),
							'content-type': 'multipart/form-data'
						},
						filePath: url.thumb, //＜（＾－＾）＞本地路径
						name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						success: (uploadFileRes) => {
							console.log(uploadFileRes, "kasidjasijdiasjd")
							if(event.name==="1"){
								setTimeout(() => {
									var img = JSON.parse(uploadFileRes.data)
									console.log(img, "img")
									this.formData.imageOne =//拼接图片路径
										'http://192.168.10.19:8081/api/localStorage/pictures' + img
										.realName
									console.log(this.formData.imageOne)
									resolve(uploadFileRes)
								}, 1000)
							}else{
								setTimeout(() => {
									var img = JSON.parse(uploadFileRes.data)
									console.log(img, "img")
									this.formData.imageTow =
										'http://192.168.10.19:8081/api/localStorage/pictures' + img
										.realName
									console.log(this.formData.imageTow)
									resolve(uploadFileRes)
								}, 1000)
							}
						
						}
					});
				})
			},


			// 删除图片
			deletePic2(event) { //在这调删除接口
				var that = this
				console.log(event, "删除2")
				console.log(JSON.parse(event.file.url.data).id)
				var ids = JSON.parse(event.file.url.data).id
				this[`fileList${event.name}`].splice(event.index, 1)
				uni.request({
					url: "",
					method: 'DELETE',
					header: {
						'Authorization': uni.getStorageSync("token"),
					},
					data: [ids],
					success: (res) => {
						this.fileList2 = ""
						this.formData.imageTow = ""
					}
				})
			},


		
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}










	// 获取上传状态
	// select(e) {

	// 	uni.uploadFile({
	// 		fileType: "image",
	// 		url: '', //仅为示例，非真实的接口地址
	// 		filePath: e.tempFilePaths[0],
	// 		name: 'image',
	// 		header: {
	// 			Authorization: ""
	// 		},
	// 		success: (uploadFileRes) => {
	// 			// console.log(JSON.parse(uploadFileRes.data), "???");
	// 			var img = JSON.parse(uploadFileRes.data)
	// 			// console.log(img.data.url)
	// 			this.formData.img = img.data.url
	// 			console.log(this.formData.img)
	// 		}
	// 	});



	// },
	// // 获取上传进度
	// progress(e) {
	// 	console.log('上传进度：', e)
	// },

	// // 上传成功
	// success(e) {
	// 	console.log('上传成功')
	// },

	// // 上传失败
	// fail(e) {
	// 	console.log('上传失败：', e)
	// }
</script>
<style lang="scss">
	img {
		height: 128px;
		display: inline-block;
		width: 128px;
		float: left;
	}

	.u-button {
		width: 50%;
		margin-bottom: 10rpx;
	}

	.imagestop {
		margin-bottom: 5rpx;
	}


	.box {
		margin-top: 25rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>