【全栈之路】uni-app实现用户头像上传,springboot后台接口
uniapp项目,java后端实现用户头像上传,uni-app主要用到两个方法:uni.chooseImage、uni.uploadFile接口文档地址:https://uniapp.dcloud.io/api/request/network-file?id=uploadfile将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipar...
·
uniapp项目,java后端实现用户头像上传,uni-app主要用到两个方法:uni.chooseImage、uni.uploadFile
接口文档地址:https://uniapp.dcloud.io/api/request/network-file?id=uploadfile
将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data。
直接上代码,vue的页面
<view class="portrait-box">
<image class="portrait" :src="imgMemberPath(unifiedUser.avatar)" @click="uploadImg"></image>
<text class="pt-upload-btn yticon icon-paizhao"></text>
</view>
uploadImg:function(){
var _this=this;
uni.chooseImage({
success: function (res) {
const tempFilePaths = res.tempFilePaths;
_this.sendUpload({
url : 'image_Up',
filePath: tempFilePaths[0],
name: 'file',
success:function (res) {
if(res.code=='200'){
_this.$api.msg(res.message);
_this.unifiedUser.avatar=res.data.fileUrl;
}else{
_this.$api.msg(res.message);
}
}
});
},fail:function(res){
console.log("用户取消上传文件")
}
});
},
由于自己的项目需要携带公共的参数或者token,那么开始重新封装一下uni.uploadFile的方法(main.js)
//封装文件上传
Vue.prototype.sendUpload = function(param){
var _self = this,
url = param.url,
method = param.method,
header = {},
token = "",
hideLoading = param.hideLoading || false;
//拼接完整请求地址
var requestUrl = this.siteBaseUrl + url;
//固定参数:仅仅在小程序绑定页面通过code获取token的接口默认传递了参数token = login
if(!header.token){//其他业务接口传递过来的参数中无token
token = uni.getStorageSync(this.sessionKey);//参数中无token时在本地缓存中获取
console.log("当前token:" + token);
if(!token){//本地无token需重新登录(退出时清缓存token)
// _self.login(backpage, backtype);
// return;
}else{
header.token = token;
}
}
var timestamp = Date.parse(new Date());//时间戳
header["timestamp"] = timestamp;
// #ifdef MP-WEIXIN
header["appid"] = "";
// #endif
// #ifdef APP-PLUS || H5
header["appid"] = "";
// #endif
// header["content-type"]="application/json";
//用户交互:加载圈
if (!hideLoading) {
uni.showLoading({title:'加载中...'});
}
console.log("网络请求start");
//网络请求
uni.uploadFile({
url: requestUrl,
filePath: param.filePath,
method: method,
name: param.name,
header: header,
formData: param.data,
success: res => {
console.log("网络请求success:" + JSON.stringify(res));
if (res.statusCode && res.statusCode != 200) {//api错误
uni.showModal({
content:"" + res.errMsg
});
return;
}
let data=JSON.parse(res.data);
if (data.code) {//返回结果码code判断:0成功,1错误,-1未登录(未绑定/失效/被解绑)
if (data.code == "10001"||data.code == "10002") {
uni.setStorageSync(this.sessionKey,'');
uni.setStorageSync("unifiedUser",'');
uni.navigateTo({
url: '../public/login',
})
return;
}
if (data.code == "10000") {
uni.showModal({
showCancel:false,
content:"" + data.message
});
return;
}
} else{
uni.showModal({
showCancel:false,
content:"No ResultCode:" + data.message
});
return;
}
typeof param.success == "function" && param.success(data);
},
fail: (e) => {
console.log("网络请求fail:" + JSON.stringify(e));
uni.showModal({
content:"" + e.errMsg
});
typeof param.fail == "function" && param.fail(e.data);
},
complete: () => {
console.log("网络请求complete");
if (!hideLoading) {
uni.hideLoading();
}
typeof param.complete == "function" && param.complete();
return;
}
});
}
开源项目地址:https://gitee.com/shuogesha
更多推荐
已为社区贡献4条内容
所有评论(0)