栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java > SpringBoot

「小程序JAVA实战」小程序头像图片上传(中)(44)

SpringBoot 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

「小程序JAVA实战」小程序头像图片上传(中)(44)

用户可以上传了和用户的face更新到数据库,接下来我们需要对图片进行展示,tomcat本身就提供了虚拟目录的概念,直接把某个路径的图片映射到web服务器作为资源路径。其实在springboot可以通过代码的方式来进行映射。源码:https://github.com/limingios/wxProgram.git 中No.15

spring boot 映射路径的设置
  • api 中新建类

package com.idig8;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Value("${server.face.path}")
    private String fileSpace;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //资源的路径.swagger2的资源.所在的目录,
        registry.addResourceHandler("
  data: {
    faceUrl: "../../resource/images/noneface.png",
    nickname: "昵称",
    fansCounts: 0,
    followCounts: 0,
    receiveLikeCounts: 0,
  },
  
  logout:function(e){
    var user = app.userInfo;
    wx.showLoading({
      title: '正在注销中。。。'
    });
    wx.request({
      url: app.serverUrl + "/logout?userId="+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        wx.hideLoading();
        if (status == 200) {
          wx.showToast({
            title: "用户注销成功~!",
            icon: 'none',
            duration: 3000
          })
          app.userInfo = null;
          wx.redirectTo({
            url: '../userRegister/userRegister',
          })

        } else if (status == 500) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 3000
          })
        }
      }
    })
  },
  
  uploadFace:function(e){
    var user = app.userInfo;
    var me = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        if (tempFilePaths.length>0){
          console.log(tempFilePaths[0]);

          wx.showLoading({
            title: '正在加载中。。。'
          });
          wx.chooseImage({
            success: function (res) {
              var tempFilePaths = res.tempFilePaths
              wx.uploadFile({
                url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例,非真实的接口地址
                filePath: tempFilePaths[0],
                name: 'file',
                success: function (res) {
                  var data = JSON.parse(res.data);
                  console.log(data);
                   wx.hideLoading();
                  if (data.status == 200) {
                    wx.showToast({
                      title: "用户上传成功~!",
                      icon: 'none',
                      duration: 3000
                    })
                    me.setData({
                      faceUrl: app.serverUrl+data.data
                    })


                  } else if (data.status == 500) {
                    wx.showToast({
                      title: data.msg,
                      icon: 'none',
                      duration: 3000
                    })
                  }
                }
              })
            }
          })
        }

      }
    })
  },
  
  onLoad: function (options) {

  },

  
  onReady: function () {

  },

  
  onShow: function () {

  },

  
  onHide: function () {

  },

  
  onUnload: function () {

  },

  
  onPullDownRefresh: function () {

  },

  
  onReachBottom: function () {

  },

  
  onShareAppMessage: function () {

  }
})

手机端查看效果
  • 点击手机预览

  • 手机扫描,进行登录
    >但是始终无法登录

  • 在手机上如何像工具一样正常登录呢?
    >1. 手机app 和 后台 在同一个网段,也就是同一个wifi
    >2. 打开调试模式,重启登录小程序
    >3. 还有个不在同一个wifi的话,可以通过内网穿透的方式,之前说过,但是app.js里面设置下内网穿透的ip

PS:这次试用itools的方式在手机也演示了如何进行图片的选择和上传。wx的插件做的很棒,直接引用不会存在各种问题。稳~!



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/234814.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号