最近搜索

小程序 获取 头像 上传头像。

浏览:172
管理员 2023-12-25 00:58



image.png




wxml代码


    <view class="item">
        <view class="left">
            <image src="{{baseURL+weixinUser.headimgurl}}" mode="scaleToFill" />
        </view>
        <view class="right">
            <button open-type="chooseAvatar" bindchooseavatar="onChooseImage">修改头像</button>
            <image src="/assets/images/right2.png" mode="scaleToFill" />
        </view>
    </view>



js代码


onChooseImage: function (e) {
        console.log('选择的图片信息:', e.detail.avatarUrl);
        //这个图片如何保存服务器。
        //{avatarUrl: "wxfile://tmp_e4fb3d8712140d013a7ee534d65a08e1fed20e38e0803457.jpg"}
        //不管选择图片 还是 选择相册  都是这个内容。
        // 进行相应的处理
        var this_ = this;
        wx.showLoading({
            title: '上传中',
            mask:true
          })
         //上传文件
         wx.uploadFile({
            url: baseURL+"/api/xcx/wx/user/uploadimage",//请求接口地址
            filePath: e.detail.avatarUrl,//图片路径,如tempFilePaths[0] 为第一张图片
            name: 'file',
            header: {
              "Content-Type": "multipart/form-data"
            },formData: {
                'openid': app.globalData.openid
              },
            success: function (res) {
              console.log(res);
              var result = JSON.parse(res.data); //
              console.log(result.url);
              this_.setData({
                'weixinUser.headimgurl': result.url
                });
              wx.hideLoading();
            },
            fail: function (res) {
              console.log(res);
            },
            complete: function (res) {
            }
          })
          //上传文件



    },


java后台代码。


/**
 * 文件 上传,
 * /api/xcx/wx/user/uploadimage
 */
@ResponseBody
@RequestMapping("/uploadimage")
public JSONObject uploadimage(HttpServletRequest request)throws Exception {
    JSONObject result = new  JSONObject();
    //获取文件需要上传到的路径
    String webPath=request.getServletContext().getRealPath("");
    String openid =request.getParameter("openid");
    System.out.println(openid);
    String filePath= "/static/xcx_upload/image/"+ DateUtil.formatDate(new Date(), "yyyyMMdd")+"/";
    FileUtil.makeDirs(webPath+filePath);
    request.setCharacterEncoding("utf-8"); //设置编码
    try {
        StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
        Iterator<String> iterator = req.getFileNames();
        while (iterator.hasNext()) {
            HashMap<String, Object> res = new HashMap<String, Object>();
            MultipartFile file = req.getFile(iterator.next());
            // 获取文件名
            String fileNames = file.getOriginalFilename();
            int split = fileNames.lastIndexOf(".");
            //获取上传文件的后缀
            String extName = fileNames.substring(split + 1, fileNames.length());
            //申明UUID
            String uuid = UUID.randomUUID().toString().replace("-", "");
            //组成新的图片名称
            String newName = uuid + "." + extName;
            System.out.println(newName);
            String destPath = webPath+filePath + newName;
            //真正写到磁盘上
            File file1 = new File(destPath);
            OutputStream out = new FileOutputStream(file1);
            out.write(file.getBytes());
            res.put("url", destPath);
            result.put("url", filePath+ newName);
            out.close();
        }
    } catch (Exception e) {
    }
    //更新 头像,
    WeixinUser weixinUser = weixinUserService.findByOpenid(openid);
    weixinUser.setHeadimgurl(result.getString("url"));
    weixinUser.updateById();

    return result;
}



联系站长

站长微信:xiaomao0055

站长QQ:14496453