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)
	}
  })
}
相关推荐
LinXunFeng2 分钟前
Flutter - Xcode16 还原编译速度
前端·flutter·xcode
夏之小星星2 分钟前
element-ui自制树形穿梭框
前端·javascript·ui·elementui·vue
zhangivon25 分钟前
如何设计灵活可扩展的前端日志解决方案:提升应用稳定性与可观测性
前端
程序员黄同学1 小时前
解释观察者模式,如何实现观察者模式?
前端·算法·观察者模式
观无2 小时前
JWT认证服务
前端·c#·vue
匹马夕阳2 小时前
(一)前端程序员转安卓开发分析和规划建议
android·前端
Monly212 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
我自纵横20233 小时前
使用 JavaScript 动态设置 CSS 样式
开发语言·前端·javascript·css·html·json·html5
Z编程3 小时前
纯css实现环形进度条
前端·css
CopyLower3 小时前
优化 Web 性能:压缩 CSS 文件(Unminified CSS)
前端·css