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

服务器 0

最近在做一个需求,使用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>

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

也许您对下面的内容还感兴趣: