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)
	}
  })
}
相关推荐
毕设十刻21 分钟前
基于Vue的鲜花销售系统33n62(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
IT_陈寒27 分钟前
Spring Boot 3.2震撼发布:5个必知的新特性让你开发效率提升50%
前端·人工智能·后端
初遇你时动了情33 分钟前
前端使用TensorFlow.js reactjs调用本地模型 实现图像、文本、音频/声音、视频相关识别
前端·javascript·tensorflow
广州华水科技39 分钟前
单北斗GNSS变形监测系统安装与应用解析,提升位移监测精度
前端
J***Q29241 分钟前
前端微前端框架原理,qiankun源码分析
前端·前端框架
菜鸟‍42 分钟前
【前端学习】React学习【万字总结】
前端·学习·react.js
百***84451 小时前
Webpack、Vite区别知多少?
前端·webpack·node.js
Mintopia1 小时前
零信任架构下的 WebAIGC 服务安全技术升级方向
前端·人工智能·trae
敏姐的后花园3 小时前
模考倒计时网页版
java·服务器·前端
AiXed4 小时前
PC微信WDA算法
前端·javascript·macos