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)
	}
  })
}
相关推荐
IT_陈寒27 分钟前
Spring Boot 3.2 性能翻倍秘诀:这5个配置优化让你的应用起飞🚀
前端·人工智能·后端
b***676439 分钟前
【JavaEE】Spring Web MVC
前端·spring·java-ee
Mintopia44 分钟前
🧭 Claude Code 用户工作区最佳实践指南
前端·人工智能·claude
一 乐2 小时前
健身达人小程序|基于java+vue健身达人小程序的系统设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序
笑醉踏歌行4 小时前
NVM 在安装老版本 Node环境时,无法安装 NPM的问题
前端·npm·node.js
YUJIANYUE4 小时前
Gemini一次成型龙跟随鼠标html5+canvas特效
前端·计算机外设·html5
abiao19814 小时前
npm WARN ERESOLVE overriding peer dependency
前端·npm·node.js
TechExplorer3654 小时前
禁用 npm 更新检查
前端·npm·node.js
行云流水6267 小时前
uniapp pinia实现数据持久化插件
前端·javascript·uni-app
zhangyao9403307 小时前
uniapp动态修改 顶部导航栏标题和右侧按钮权限显示隐藏
前端·javascript·uni-app