UNIAPP云开发用uni-file-picker组件实现单图片上传

1. 在html部分

		<form @submit="formSubmit">
			<view>Name</view>
			<uni-easyinput  v-model="name" placeholder="" name="name"/>
			<view>price</view>
			<uni-easyinput v-model="price"  name="price"></uni-easyinput>
			<view>desc</view>
			<uni-file-picker @success="su" return-type="object" v-model="desc" name="desc" title="hello imge"  file-mediatype="image"></uni-file-picker>
			<button form-type="submit" size="default">提交</button>
		</form>

2.在脚本部分

	function formSubmit(e){
		console.log(e);
		   const {name,price}=e.detail.value
			const db = uniCloud.databaseForJQL();
			db.collection('sj-product')
			.add({name:name,price:parseInt(price),desc:desc.value.path+desc.value.extname})
			.then((res) => {
				console.log(res);
			})
			.catch((err) => {
				uni.showToast({
					title: '出错了,请联系管理员'
				});
			})
			
		}

需要注意,

1.在提交事件中并不到自动得到uni-file-picker组件的上传成功的返回值

2.组件中的return-type取值为array和Object, 默认为arrar,改为Object后只就能单文件上.

3.在数据库jql中,用得到的数组值或对象值(即上传文件的云储地址)来拼接add方法参数.

UniApp 中使用 `uni-file-picker` 组件实现图片上传功能,可以通过结合 `uni.uploadFile` API 来完成。以下是一个完整的代码示例,涵盖了模板部分、脚本逻辑以及样式定义。 ### 模板部分(HTML) ```html <template> <view class="container"> <uni-forms :modelValue="formData" @submit="onSubmit"> <uni-forms-item label="选择头像" name="avatar" labelWidth="90"> <uni-file-picker limit="1" :del-icon="false" :disable-preview="true" :imageStyles="imageStyles" file-mediatype="image" :auto-upload="false" @select="upload" > 选择头像 </uni-file-picker> </uni-forms-item> <button type="primary" form-type="submit">提交</button> </uni-forms> <!-- 展示上传的图片 --> <view v-if="formData.avatar" class="avatar-preview"> <image :src="formData.avatar" mode="aspectFit" style="width: 100px; height: 100px;"></image> </view> </view> </template> ``` ### 脚本部分(JavaScript) ```javascript <script> export default { data() { return { formData: { avatar: null // 存储上传后的图片路径或 URL }, imageStyles: { width: '100px', height: '100px' } }; }, methods: { upload(e) { const tempFilePaths = e.tempFilePaths; uni.uploadFile({ url: 'http://localhost:9191/files/upload', // 替换为你的后端接口地址 filePath: tempFilePaths[0], name: 'file', // 后端接收文件的字段名 success: res => { try { const response = JSON.parse(res.data); // 假设后端返回的是 JSON 格式 this.formData.avatar = response.url; // 将上传成功的图片 URL 存入表单数据 console.log(this.formData.avatar, "头像上传成功"); } catch (error) { console.error("解析响应失败", error); } }, fail: err => { console.error("上传失败", err); } }); }, onSubmit() { console.log("表单提交的数据:", this.formData); // 这里可以发送 formData 到后端进行处理 uni.request({ url: 'http://localhost:9191/user/update', // 替换为你的表单提交接口 method: 'POST', data: this.formData, success: res => { console.log("提交成功", res.data); }, fail: err => { console.error("提交失败", err); } }); } } }; </script> ``` ### 样式部分(CSS) ```css <style scoped> .container { padding: 20px; } .avatar-preview { margin-top: 20px; } </style> ``` ### 功能说明 - **`uni-file-picker`**:用于选择图片文件,设置 `auto-upload="false"` 表示手动控制上传时机。 - **`uni.uploadFile`**:将选中的图片文件上传到指定的后端接口,并通过 `success` 回调获取服务器返回的图片地址。 - **`formData.avatar`**:存储上传后的图片地址,用于后续提交表单时一并发送给后端[^1]。 - **`@select="upload"`**:当用户选择图片后,触发 `upload` 方法执行上传操作。 - **`<image>`**:展示已上传的图片预览。 该代码示例覆盖了从图片选择、上传、存储到最终提交的完整流程,适用于 UniApp 开发中常见的头像上传场景。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值