uni-file-picker上传图片到后端服务器并存入数据库

最新推荐文章于 2025-02-18 14:06:06 发布

芝士味奶酪

最新推荐文章于 2025-02-18 14:06:06 发布

阅读量1w

点赞数 10

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/CJB2020818/article/details/129156642

版权

文章讲述了在uniapp中实现用户头像上传的两种方式，一种是使用uni.uploadFile结合uni.chooseImage，另一种是使用uni-file-picker组件。作者提到，虽然uni-file-picker可以简化图片回显等操作，但深入学习uni.uploadFile仍然是必要的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个需求，使用uniapp上传用户头像。后端会有一个处理上传图片返回图像链接的接口。在uniapp官网关于上传的组件有两个：

（1）uni.uploadFile（object）

（2）uni-file-picker

如果使用uni.uploadFile,前端的代码大致可以这样写：

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

这是官网给出的范例。对应的HTML：

<view class="avatar" @click="Imageupload">头像上传</view>

<script>
...
methods:{
Imageupload(){
    uni.chooseImage(){
     ....
   }

}
}

</script>

然后就是自己写样式了。不过还要写图片回显的函数，不然不能看到图片上传的效果，还是挺麻烦的。

所以，为了方便，我用的是uni-file-picker+uni.uploadFile组合。也算是偷懒的方法吧。

<uni-forms-item label="选择头像" name="avatar" labelWidth="90">
<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"file-mediatype="image" :auto-upload="false" @select="upload">选择</uni-file-picker>
</uni-forms-item>


...

<script>
		upload(e) {
				const tempFilePaths = e.tempFilePaths;//e是获取的图片源
				uni.uploadFile({
					url: 'http://localhost:9191/files/upload', //上传图片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: res => {
						this.formData.avatar = res.data
						console.log(this.formData.avatar, "头像")
					}
				})
			}
</script>

当然我这个是一种偷懒的方法，要学东西还是要深入的去了解其所以然。