springboot + uniapp 实现单文件上传及图片回显

关注

VIP免费原创 2024-06-15 20:56:30 2.9k 阅读 AI 写同款· GEO 优化 ›

uniapp学习笔记——基于＜uni-file-picker＞组件和uni.uploadFile()方法实现图片上传在编辑页面，有图片字段需要选择手机图片进行上传、预览、回显、删除等，尤其是当提交表单后，再次选择编辑该表单页面时，如何正确的显示图片，并保证再次提交时，可以没有异常。这里主要记录了一种在编辑表单时（图片字段返回的是图片地址）的一种处理方式，不一定是最佳实践，但是可以实现功能的正常使用。组件和uni.uploadFile()方法在官方文档已经有非常详细的介绍了，这里只是简单说明一下，需要了解详细信息的请移步官方文档进行查看。文件选择上传组件，可以选择图片、视频等任阅读详情

一、使用 uni-file-picker 组件标签

具体使用方法请查看 uniapp 官网 uni-file-picker 的介绍。

前端代码

代码如下，通过 uni.uoloadFile 上传到后端返回 url 地址赋值 value 进行图片回显。

<template>
	<view class="container">
		<uni-file-picker file-mediatype="image" mode="grid" @select="select" />
		<!-- 图片上传 -->
		<image :src="value" mode=""></image>
	</view>
</template>

<script>
	export default {
     
     
		data() {
     
     
			return {
     
     
                value: ''
			}
		},
		methods: {
     
     
			select(e) {
     
     
				uni.uploadFile({
     
     
					url: `http://localhost:5050/files/file`,//你后端服务器地址
					filePath: e.tempFilePaths[0],//要上传文件资源的路径
					name: 'file',//文件对应的名称，与后端接收的属性名一直 
					formData: {
     
     },//请求中其他额外的数据
					success: (uploadFileRes) => {
     
     
						this.value = uploadFileRes.data;
					}
				});