uni-file-picker上传图片到后端服务器并存入数据库
最近在做一个需求,使用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:
头像上传 ... methods:{ Imageupload(){ uni.chooseImage(){ .... } } }
然后就是 自己写样式了。不过还要写图片回显的函数,不然不能看到图片上传的效果,还是挺麻烦的。
所以,为了方便,我用的是uni-file-picker+uni.uploadFile组合。也算是偷懒的方法吧。
(图片来源网络,侵删)
选择 ... 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, "头像") } }) }
当然我这个是一种偷懒的方法,要学东西还是要深入的去了解其所以然。
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...