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)
	}
  })
}
相关推荐
我是伪码农2 小时前
Vue 1.23
前端·javascript·vue.js
毕设源码-郭学长8 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n8 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
1登峰造极9 小时前
uniapp 运行安卓报错reportJSException >>>> exception function:createInstanceContext, exception:white screen
android·java·uni-app
ヤ鬧鬧o.9 小时前
多彩背景切换演示
前端·css·html·html5
lethelyh9 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒9 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海9 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大10 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
一起养小猫10 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter