【全栈之路】uni-app实现用户头像上传，springboot后台接口

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的页面

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