uview-ui使用表单u-upload图片上传

1、效果图

2、页面代码

<template>
	<view class="box">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelWidth="120" labelPosition="top" labelAlign="left" :labelStyle="{'fontSize':'14px'}" 
		:model="guideline" ref="uForm" :rules="rules">
			<u-form-item label="标题" prop="guidelineTitle" ref="guidelineTitle">
				<u--input v-model="guideline.guidelineTitle" placeholder="请输入标题"></u--input>
			</u-form-item>
			<u-form-item label="图片">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple 
				:maxCount="6" :previewFullImage="true"></u-upload>
			</u-form-item>

			<u-form-item label="简介" prop="guidelineContent">
				<u-textarea v-model="guideline.guidelineContent" style="width: 100%;" placeholder="请输入详情"
				 height="200" maxlength="20000">
				</u-textarea>
			</u-form-item>
		</u--form>

		<view style="padding-bottom: 20px;padding-top: 10px;">
			<u-row>
				<u-col :span="6">
					<u-button type="primary" @click="submit" size="big" :text="articleId?'确认修改':'发布'">
					</u-button>
				</u-col>
				<u-col :span="6">
					<u-button style="margin-top: 20px;" type="error " @click="resetForm" size="big" text="重置">
					</u-button>
				</u-col>
			</u-row>
		</view>

		<u-notify ref="uNotify" message="Hi uview-plus"></u-notify>
	</view>
</template>

<script>
	import { addGuideline, getGuideline, updateGuideline } from '@/api/tourism/guideline.js';

	export default {
		data() {
			return {
				redirect: '/pages/tourism-tabbar/guideline/index',
				show: false,
				guidelineId: null,
				guideline: {},
				spotId: null,
				comboId: null,
				fileList: [],
				rules: {
					'guidelineTitle': {
						required: true,
						message: "标题不能为空",
						trigger: "blur"
					}
				}
			};
		},

		onLoad(option) {
			if (option && option.spotId) {
				this.spotId = option.spotId;
			}

			if (option && option.comboId) {
				this.comboId = option.comboId;
			}

			this.getGuidelineInfo();
		},

		onReady() {
			// 微信小程序需要用此写法设置校验规则
			//this.$refs.uForm.setRules(this.rules)
		},

		methods: {
			getGuidelineInfo() {
				if (!this.guidelineId) {
					return
				}
				getGuideline(this.guidelineId).then(res => {
					if (res.code == 200) {
						this.guideline = res.data;

						this.fileList = [];
						for (let i = 0; i < JSON.parse(this.guideline.pictures).length; i++) {
							this.fileList.push({
								url: JSON.parse(this.guideline.pictures)[i]
							})
						}
					}
				})
			},
			submit() {
				//this.$refs.uForm.validate().then(valid => {

					const list = [];
					for (let i = 0; i < this.fileList.length; i++) {
						list.push(this.fileList[i].url)
					}
					this.guideline.pictures = JSON.stringify(list)

					if (this.guideline.guidelineId != null) {
						updateGuideline(this.guideline).then(res => {
							this.finish("修改", res.code, res.msg)
						})
					} else {
						this.guideline.spotId = this.spotId;
						this.guideline.comboId = this.comboId;
						addGuideline(this.guideline).then(res => {
							this.finish("新增", res.code, res.msg)
						})
					}
				// }).catch(errors => {
				// 	uni.$u.toast('请正确填写信息!')
				// })
			},

			finish(txt, code, msg) {
				if (code != 200) {
					this.$u.toast(msg);
					return
				}

				this.$u.toast(txt + "成功!");
				this.redirectPage(this.redirect);
			},

			resetForm() {
				this.guideline = {
					guidelineId: null,
					userId: null,
					spotId: null,
					comboId: null,
					guidelineTitle: null,
					guidelineContent: null,
					pictures: null,
					createTime: null
				};
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//请求到后端上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: process.env.BASE_APP_URL + '/upload/spotPictures',
						filePath: url,
						header: {
							"Content-Type": "multipart/form-data",
							"Authorization": uni.getStorageSync('token')
						},
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).url)
							}, 1000)
						}
					});
				})
			},

			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			}
		},
	};
</script>

<style>
	page {
		height: 100%;
		background: white;
	}

	.box {
		margin: 10px 20px 20px 20px;
	}

	.confirmButton {
		padding-bottom: 50px;
	}

	.u-form-item__body__left.data-v-5e7216f1 {
		position: relative;
	}

	.u-form-item__body__left__content.data-v-5e7216f1 {
		position: absolute;
		top: 0;
	}
</style>

3、java代码，oss处理代码参考文章java调用对象存储OSS-优快云博客

package com.ruoyi.oss;  
  
import com.ruoyi.common.core.domain.AjaxResult;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.web.bind.annotation.PostMapping;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
import org.springframework.web.multipart.MultipartFile;  
  
@RestController  
@RequestMapping("/mobile/upload")  
public class UploadController {  
	@Autowired  
	private UploadService uploadService;  
	  
	@Autowired  
	private StorageOss storageOss;  
	  
	@PostMapping("/spotPictures")  
	public AjaxResult uploadSpotPictures(MultipartFile file) {  
		return uploadService.upload(file,storageOss.getSoptPath());  
	}  
}