uniapp 使用 uni-file-picker 上传头像

此处使用 @select 处理选择完文件后的逻辑,即将文件上传到自己的服务器。

html 复制代码
<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
					file-mediatype="image" @select="upload">选择</uni-file-picker>

此处我需要将头像的存储地址存入数据库中,因此需要上传额外的参数(用户的id),所以需要使用 uni.uploadFile() 的 formData。

javascript 复制代码
/* 头像上传 */
upload(e) {
  console.log(e)
  uni.uploadFile({
	url: 'http://localhost:8887/uploadAvatar',
	filePath: e.tempFilePaths[0],
	name: 'file',
	formData: {
	  sid: this.student.sid
	},
	header: {
	  'content-type': 'multipart/form-data' // 使用multipart/form-data格式
	},
	success: (res) => {
	  console.log(res)
	}
  })
}
相关推荐
Wiktok1 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 天前
html.
前端
掘金安东尼1 天前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃1 天前
react context如何使用
前端·javascript·react.js
GDAL1 天前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒1 天前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
海绵宝宝不喜欢侬1 天前
【uniapp微信小程序】扫普通链接二维码打开小程序
微信小程序·小程序·uni-app
小蒜学长1 天前
基于uni-app的蛋糕订购小程序的设计与实现(代码+数据库+LW)
java·数据库·spring boot·后端·小程序·uni-app
小谭鸡米花1 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青1 天前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js