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)
	}
  })
}
相关推荐
LaughingDangZi12 分钟前
vue+java分离项目实现微信公众号开发全流程梳理
java·前端·后端
爬山算法13 分钟前
Netty(14)如何处理Netty中的异常和错误?
java·前端·数据库
再出发Start21 分钟前
并发事务 A/B 如何避免互相影响(UPDATE 有交集
前端
Running_slave21 分钟前
聊聊TCP滑窗的一些有趣“病症”
前端·网络协议·tcp/ip
恋猫de小郭21 分钟前
再次紧急修复,Flutter 针对 WebView 无法点击问题增加新的快速修复
android·前端·flutter
1024肥宅24 分钟前
浏览器存储 API:全面解析与高级实践
前端·数据库·浏览器
HIT_Weston26 分钟前
63、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(七)
前端·ubuntu·gitlab
jinxinyuuuus28 分钟前
vsGPU:硬件参数的数据仓库设计、ETL流程与前端OLAP分析
前端·数据仓库·etl
小信丶1 小时前
解决 pnpm dev 报错:系统禁止运行脚本的问题
前端·vue.js·windows·npm