uniapp使用u-upload组件来实现图片上传功能

<template>
	<view>
		<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				filesArr: []
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			}
		}
	}
</script>

<template>
	<u-form :model="deviceInfo" ref="uForm">
		<view class="top">
			<u-form-item prop="imgUrl" label-width="10" :border-bottom='false'>
				<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :custom-btn="true"
					:show-upload-list="true" :auto-upload="false" :file-list="fileList" :show-progress="true"
					:deletable="true" max-count="1" class="test2">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="../static/img/addDevice.jpg" mode="aspectFill"></image>
					</view>
				</u-upload>
			</u-form-item>
		</view>
	</u-form>
</template>

<script>
	// 这里引入的 Config 中配置了整个项目的接口地址
	import Config from '@/core/config'
	// 这里引入 store 是为了获取 token
	import store from '@/store/index.js';
	// 后端api地址
	const uploadUrl = Config.get('apiUrl') + 'admin-api/infra/file/upload';
	export default {
		data() {
			return {
				// 预置上传列表
				fileList: [],
				deviceInfo: {
					photoUrl: '',
				}
			}
		},
		methods: {
			onChooseComplete(lists, name) {
				const app = this;
				uni.uploadFile({
					// 这里是你上传图片的地址
					// url: 'https://xxx.xx.xx.xx/admin-api/infra/file/upload',
					url: uploadUrl,
					filePath: lists[0].url,
					name: 'file',
					header: {
						"Authorization": `Bearer ${store.getters.token}`
					},
						//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
					success: (res) => {
						app.deviceInfo.photoUrl = JSON.parse(res.data).data;
						console.log(JSON.parse(res.data).data)
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 224rpx;
		height: 224rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		margin-top: 50rpx;

		image {
			width: 224rpx;
			height: 224rpx;
			border-radius: 50%;
		}

		.tips {
			font-size: 28rpx;
			color: $u-type-primary;
		}
	}
</style>