微信上传图片_微信图片上传 - CSDN
精华内容
参与话题
  • 微信小程序实现图片上传功能

    万次阅读 热门讨论 2019-05-02 23:15:34
    这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //上传图片 uploadImage: function () { var that = this; wx.chooseImage({ count: 1, //最多可以选择的图片...

    前端: 微信开发者工具

    后端:.Net

    服务器:阿里云

    这里介绍微信小程序如何实现上传图片到自己的服务器上

    前端代码

    data: {
      productInfo: {}
    },
    //上传图片
    uploadImage: function () {
      var that = this;
    
      wx.chooseImage({
        count: 1,  //最多可以选择的图片总数
        sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          //启动上传等待中...
          wx.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          })
    
            wx.uploadFile({
              url: '192.168.1.1/home/uploadfilenew',
              filePath: tempFilePaths[0],
              name: 'uploadfile_ant',
              formData: {
              },
              header: {
                "Content-Type": "multipart/form-data"
              },
              success: function (res) {
                var data = JSON.parse(res.data);
                //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
                console.log(data);
              },
              fail: function (res) {
                wx.hideToast();
                wx.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false,
                  success: function (res) { }
                })
              }
            });
        }
      });
    }

    后端上传代码(将文件上传到服务器临时文件夹内)

    [HttpPost]
    public ContentResult UploadFileNew()
    {
        UploadFileDTO model = new UploadFileDTO();
        HttpPostedFileBase file = Request.Files["uploadfile_ant"];
        if (file != null)
        {
            //公司编号+上传日期文件主目录
            model.Catalog = DateTime.Now.ToString("yyyyMMdd");
    
            //获取文件后缀
            string extensionName = System.IO.Path.GetExtension(file.FileName);
    
            //文件名
            model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;
    
            //保存文件路径
            string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
            if (!System.IO.Directory.Exists(filePathName))
            {
                System.IO.Directory.CreateDirectory(filePathName);
            }
            //相对路径
            string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
            file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));
    
            //获取临时文件相对完整路径
            model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
        }
        return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
    }
    /// <summary>
    /// 上传文件 返回数据模型
    /// </summary>
    public class UploadFileDTO
    {
        /// <summary>
        /// 目录名称
        /// </summary>
        public string Catalog { set; get; }
        /// <summary>
        /// 文件名称,包括扩展名
        /// </summary>
        public string FileName { set; get; }
        /// <summary>
        /// 浏览路径
        /// </summary>
        public string Url { set; get; }
        /// <summary>
        /// 上传的图片编号(提供给前端判断图片是否全部上传完)
        /// </summary>
        public int ImgIndex { get; set; }
    }
    
    #region 获取配置文件Key对应Value值
    /// <summary>
    /// 获取配置文件Key对应Value值
    /// </summary>
    /// <param name="key"></param>
    /// <returns></returns>
    public static string GetConfigValue(string key)
    {
        return ConfigurationManager.AppSettings[key].ToString();
    }
    #endregion

    设置配置文件上传文件对应的文件夹信息

    <appSettings>
      <!--图片临时文件夹 绝对路径-->
      <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
      <!--图片正式文件夹 绝对路径-->
      <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />
    
      <!--图片临时文件夹 相对路径-->
      <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
      <!--图片正式文件夹 相对路径-->
      <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
    </appSettings>

    PS:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下

    小程序演示

    自定义上传头像

     

    不清楚的可以加微信联系我

    展开全文
  • 微信小程序开发(二)图片上传+服务端接收

    万次阅读 多人点赞 2019-04-13 16:06:22
    文/YXJ ... 上次介绍了小程序开发中的微信登录。...这次介绍下小程序当中常用的图片上传。 前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信上传api。这里的filePath就是图片的存储路径,类型居然是个St

    文/YXJ
    地址:http://blog.csdn.net/sk719887916/article/details/54312573

    上次介绍了小程序开发中的微信登录。文章:
    微信小程序开发(一) 微信登录流程

    这次介绍下小程序当中常用的图片上传。
    下篇:
    微信小程序开发(三) 微信小程序授权获取用户信息openid
    https://tamic.blog.csdn.net/article/details/89284104

    前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信的上传api。

    这里写图片描述

    这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口。

    看一下页面效果图

    这里写图片描述

    一个很常见的修改头像效果,选择图片(拍照),然后上传。

    下面就是贴代码了

    ###首先是小程序的wxml代码###


    {{logo}}

    昵称



    宝宝性别





    宝宝年龄



    保存


    css代码我就不贴了,一些样式而已。

    ###对应的JS代码 ###
    var util = require(’…/…/…/utils/util.js’)
    var app = getApp()
    Page({
    data: {
    sex_items: [
    {name:‘1’, value:‘小王子’},
    {name:‘2’, value:‘小公主’},
    {name:‘0’, value:‘尚无’}
    ],
    logo:null,

    userInfo: {}
      },
    
    	 //事件处理函数
      bindViewTap: function() {
    wx.navigateTo({
      // url: '../logs/logs'
    //   url: '../load/load'
    })
      },
      onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      console.log(userInfo);
      that.setData({
        userInfo:userInfo,
        logo:userInfo.logo
      })
    })
      },
    
      bindSaveTap: function(e){
    console.log(e)
    var formData = {
      uid:util.getUserID(),
      user_name:e.detail.value.nick_name,
      baby_sex:e.detail.value.baby_sex,
      baby_age:e.detail.value.baby_age
    }
     console.log(formData)
    app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData, 
    function(res){
      console.log(res);
    },
    function(){
    })
      },  
    
      chooseImageTap: function(){
    let _this = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#f7982a",
      success: function(res) {
        if (!res.cancel) {
          if(res.tapIndex == 0){
            _this.chooseWxImage('album')
          }else if(res.tapIndex == 1){
            _this.chooseWxImage('camera')
          }
        }
      }
    })
    
      },
    chooseWxImage:function(type){
    let _this = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        console.log(res);
        _this.setData({
          logo: res.tempFilePaths[0],
        })
      }
     })
      }
    })
    

    主要讲解一下JS代码

    1、chooseImageTap方法
    用来显示一个选择图片和拍照的弹窗,用到了微信的一个页面交互的api showActionSheet,点击查看详细使用
    显示操作菜单

    2、chooseWxImage方法
    主要是用来选择图片以及接收图片路径回调的监听,点击查看详细使用
    从本地相册选择图片或使用相机拍照

    3、上传
    在chooseWxImage方法的success回调中我们可以看到,我把返回的图片路径res.tempFilePaths[0] 赋值给了logo,下面我们只需要调用upload方法就ok了,微信的uploadFile方法被我封装了一下变成了upload_file。

    ####uploadFile方法 ####
    //上传文件
    function upload_file(url, filePath, name, formData, success, fail) {
    console.log(‘a=’+filePath)
    wx.uploadFile({
    url: rootUrl + url,
    filePath:filePath,
    name:name,
    header: {
    ‘content-type’:‘multipart/form-data’
    }, // 设置请求的 header
    formData: formData, // HTTP 请求中其他额外的 form data
    success: function(res){
    console.log(res);
    if(res.statusCode ==200 && !res.data.result_code){
    typeof success == “function” && success(res.data);
    }else{
    typeof fail == “function” && fail(res);
    }
    },
    fail: function(res) {
    console.log(res);
    typeof fail == “function” && fail(res);
    }
    })
    }
    filePath就是upload_file中我们传进来的logo变量,也就是图片的绝对路径。

    ###服务器的接收图片代码###
    看过我上篇文章登录流程的文章的都熟悉了我服务器用的是php框架是Laravel。

    这里我只贴一下接收image的代码;

     if(!empty($_FILES['photos'])){
                        $up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
                        $up_arr['logo'] = $up_arr['logo'][0];
                        $user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
       }
    

    核心方法在upload_log中。

    ####图片接收保存####
    if( !function_exists(‘upload_logo’)){
    function upload_logo( $key_name=‘photos’, $logo_path=‘manage/images/nurse’, $pre_name=‘logo’, salt=′20160101′,salt=&#x27;20160101&#x27;,salt=20160101,encode = 1,$make=0 ){
    $result_arr = array();
    global ServerHttpPath,Server_Http_Path,ServerHttpPath,App_Error_Conf;
    //分文件夹保存
    $date_info = getdate();
    $year = $date_info[‘year’];
    $mon = $date_info[‘mon’];
    $day = $date_info[‘mday’];
    logopath=sprintf(&quot;logo_path = sprintf(&quot;%s/%s/%s/%s&quot;,logopath=sprintf("logo_path,year,year,year,mon,day);if(!isdir(day); if(!is_dir(day);if(!isdir(logo_path)){
    res=mkdir(res=mkdir(res=mkdir(logo_path,0777,true);
    }
    //图片上传
    //foreach($photos as $key => $photo ){
    $photo = $_FILES[‘photos’];
    $name = $key_name;

                $file_id = Input::file($name);
                if(!empty($file_id) && $file_id -> isValid()){
                        $entension = $file_id -> getClientOriginalExtension();
                        if($pre_name == 'baby'){
                                $new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
                        }else {
                                $new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
                        }
                        $path_id = $file_id -> move($logo_path,$new_name."_b.".$entension);
                        if(!empty($path_id)){
                                $path_name = $path_id->getPathName();
                                $image_size=getimagesize($path_name);
     $weight=$image_size["0"];//
     $height=$image_size["1"];
     ///获取图片的高
     $photo_info['url']    = $path_name;                                            
     $photo_info['width']  = $weight;
     $photo_info['height'] = $height;
     $result_arr[] = $photo_info;
          }else{
         $result_arr[] = $path_name;
       }  
    //处理图片
    if($make == 1){
     $img = Image::make($path_name)->resize(200, $height*200/$weight);
    $img->save($logo_path ."/".$new_name."_s.".$entension);
       //dd($img);
      //  return $img->response('jpg');
                                }
                        }
    if(empty($result_arr)){
     $response['result_code'] = -1006;
       $response['result_msg'] = $App_Error_Conf[-1006];
             return response($response);
                        }
     if($encode == 1){
                                $result_arr = json_encode($result_arr);
                        }
                }
                return $result_arr;
         }
       }
    

    这个代码格式真的很烦人啊,我就大概整理了一下。

    这样我们就入门了小程序图片上传和接口功能了。

    系列文章:
    微信小程序开发(一) 微信登录流程
    http://blog.csdn.net/sk719887916/article/details/53761107
    微信小程序开发(二)图片上传+服务端接收
    微信小程序开发(三) 微信小程序授权获取用户信息openid
    https://tamic.blog.csdn.net/article/details/89284104

    第一时间获取技术文章请关注微信公众号!

    开发者技术前线

    展开全文
  • 微信小程序上传图片

    2020-07-05 14:43:14
    效果图: 代码 .js Page({ data: { // 1张图片 picturePathLocal:"", showPic: true, itemhide:false, // 多张图片 uploaderList: [], ... /*********1、上传单张图片******************

    效果图:

    在这里插入图片描述

    代码

    .js

    Page({
      data: {
        // 1张图片
        picturePathLocal:"",
        showPic: true,
        itemhide:false,
    
    
        // 多张图片
        uploaderList: [],
        uploaderNum: 0,
        showUpload: true
      },
      onLoad: function () {
    
      },
      /*********1、上传单张图片******************begin */
      //展示图片
      showImg: function (e) {
        var that = this;
        wx.previewImage({
          urls: that.data.picturePathLocal, 
        })
      },
      // 删除图片
      clearImg: function (e) {
        let that = this;
        that.setData({
          showPic: true,
          itemhide:false,
          picturePathLocal:""
        })
      },
    
      //选择图片
      choosePic: function (e) {
        var that = this;
        wx.chooseImage({
          count: 1, // 默认1
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            console.log(res)
              that.setData({
                showPic: false,
                itemhide:true,
                picturePathLocal:res.tempFilePaths[0]
              })
          }
        })
      },
      /**
       * 上传图片
       * @param {*} e 
       */
      upload: function (e) {
        var that = this;
        // console.log("上传成功",that.data.picturePathLocal)
        wx.uploadFile({
          url: '上传的地址', //仅为示例,非真实的接口地址
          filePath: that.data.picturePathLocal,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success (res){
            console.log("上传成功",res)
            // const data = res.data
            //do something
          },fail(e){
            console.log("上传失败",e)
          }
    
        })
      },
      /*********1、上传单张图片******************end */
    
      /*********2、上传多张图片******************begin */
      //展示图片
      showImg_d: function (e) {
        var that = this;
        wx.previewImage({
          urls: that.data.uploaderList,
          current: that.data.uploaderList[e.currentTarget.dataset.index]
        })
      },
      // 删除图片
      clearImg_d: function (e) {
        var nowList = []; //新数据
        var uploaderList = this.data.uploaderList; //原数据
    
        for (let i = 0; i < uploaderList.length; i++) {
          if (i == e.currentTarget.dataset.index) {
            continue;
          } else {
            nowList.push(uploaderList[i])
          }
        }
        this.setData({
          uploaderNum: this.data.uploaderNum - 1,
          uploaderList: nowList,
          showUpload: true
        })
      },
    
      //选择图片
      choosePic_d: function (e) {
        var that = this;
        wx.chooseImage({
          count: 9 - that.data.uploaderNum, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            console.log(res)
            // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths;
            let uploaderList = that.data.uploaderList.concat(tempFilePaths);
            if (uploaderList.length == 9) {
              that.setData({
                showUpload: false
              })
            }
            that.setData({
              uploaderList: uploaderList,
              uploaderNum: uploaderList.length,
            })
          }
        })
      },
      /*********2、上传多张图片******************end */
    
    })
    

    .wxml

    <view class="view_contain">
    
    	<text>上传单张图片</text>
    	<view class="ui_uploader_cell">
    		<view class='ui_uploader_item' wx:if="{{itemhide}}">
    			<icon class='ui_uploader_item_icon' bindtap='clearImg' type="clear" size="20" color="red" />
    			<image bindtap='showImg' src='{{picturePathLocal}}'></image>
    		</view>
    		<view class='ui_uploader' bindtap='choosePic' wx:if="{{showPic}}"></view>
    	</view>
    	<button bindtap="upload">上传</button>
    
    
    	<!-- 上传多张图片 -->
    	<text>上传多张图片</text>
    	<view class="ui_uploader_cell">
    		<view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
    			<icon class='ui_uploader_item_icon' bindtap='clearImg_d' data-index="{{index}}" type="clear" size="20" color="red" />
    			<image bindtap='showImg_d' data-index="{{index}}" src='{{item}}'></image>
    		</view>
    		<view class='ui_uploader' bindtap='choosePic_d' wx:if="{{showUpload}}"></view>
    	</view>
    
    	<button>上传</button>
    </view>
    

    .wxss

    .view_contain{
      display: flex;
      flex-direction: column;
    }
    
    /* uploader */
    .ui_uploader_cell {
      width: 100%;
      padding: 40rpx;
      box-sizing: border-box;
    }
    
    .ui_uploader_item_1{
      float: left;
      position: relative;
      margin-right: 30rpx;
      margin-bottom: 30rpx;
      width: 165rpx;
      height: 165rpx;
      margin-left: 40rpx;
    }
    .ui_uploader_item{
      float: left;
      position: relative;
      margin-right: 30rpx;
      margin-bottom: 30rpx;
      width: 165rpx;
      height: 165rpx;
    }
    .ui_uploader_item_icon{
      position: absolute;
      right: -20rpx;
      top: -20rpx;
      background: #fff;
      border-radius: 50%;
    }
    
    .ui_uploader_item image {
      width: 100%;
      height: 100%;
    }
    /* 方框+号 */
    .ui_uploader {
      float: left;
      position: relative;
      margin-right: 25rpx;
      margin-bottom: 25rpx;
      width: 165rpx;
      height: 165rpx;
      border: 2rpx solid #d9d9d9;
      box-sizing: border-box;
    }
    /* 方框+号 选择图片之前*/
    .ui_uploader:before {
      content: " ";
      position: absolute;
      width: 4rpx;
      height: 79rpx;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #d9d9d9;
    }
    /* 方框+号 选择图片之后*/
    .ui_uploader:after {
      content: " ";
      position: absolute;
      height: 4rpx;
      width: 79rpx;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #d9d9d9;
    }
    
    展开全文
  • 微信图片上传和下载最近在研究微信图片上传和下载,查看了很多资料,和自己的摸索,将其总结一下。一。上传二。下载package com.cxb.wx.media;/** * 微信通用接口凭证 * * @author Engineer-Jsp * @date ...
    微信的图片上传和下载


    最近在研究微信的图片上传和下载,查看了很多资料,和自己的摸索,将其总结一下。

    一。上传


    二。下载



    package com.cxb.wx.media;


    /** 
     * 微信通用接口凭证 
     *  
     * @author Engineer-Jsp 
     * @date 2014.06.23 
     */  
    public class AccessToken {  
        // 获取到的凭证  
        private String token;  
        // 凭证有效时间,单位:秒  
        private int expiresIn;  
      
        public String getToken() {  
            return token;  
        }  
      
        public void setToken(String token) {  
            this.token = token;  
        }  
      
        public int getExpiresIn() {  
            return expiresIn;  
        }  
      
        public void setExpiresIn(int expiresIn) {  
            this.expiresIn = expiresIn;  
        }  

    }  



    package com.cxb.wx.media;


    /**
     * @author ChenXb
     *
     * 2018年4月27日
     */
    public class WeixinMedia {
    //媒体文件类型
    private String type;
    //媒体文件标识或缩略图的媒体文件标识
    private String mediaId;
    //媒体文件上传的时间
    private int createdAt;
    public String getType() {
    return type;
    }
    public void setType(String type) {
    this.type = type;
    }
    public String getMediaId() {
    return mediaId;
    }
    public void setMediaId(String mediaId) {
    this.mediaId = mediaId;
    }
    public int getCreatedAt() {
    return createdAt;
    }
    public void setCreatedAt(int createdAt) {
    this.createdAt = createdAt;
    }
    @Override
    public String toString() {
    return "WxMedia [type=" + type + ", mediaId=" + mediaId + ", createdAt=" + createdAt + "]";
    }

    }





    package com.cxb.wx.media;


    /**
     * @author Engineer-Jsp
     * @date 2014.10.09
     * 请求数据通用类*/
    import java.io.BufferedReader;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.io.OutputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;


    import com.cxb.wx.menu.Menu;


    import net.sf.json.JSONObject;
    public class WeixinUtil {
        /** 
         * 发起https请求并获取结果 
         *  
         * @param requestUrl 请求地址 
         * @param requestMethod 请求方式(GET、POST) 
         * @param outputStr 提交的数据 
         * @return JSONObject(通过JSONObject.get(key)的方式获取json对象的属性值) 
         */  
    public static JSONObject HttpRequest(String request , String RequestMethod , String output ){
    JSONObject jsonObject = null;
    StringBuffer buffer = new StringBuffer();
    try {
    //建立连接
    URL url = new URL(request);
    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
    connection.setDoOutput(true);
    connection.setDoInput(true);
    connection.setUseCaches(false);
    connection.setRequestMethod(RequestMethod);
    if(output!=null){
    OutputStream out = connection.getOutputStream();
    out.write(output.getBytes("UTF-8"));
    out.close();
    }
    //流处理
    InputStream input = connection.getInputStream();
    InputStreamReader inputReader = new InputStreamReader(input,"UTF-8");
    BufferedReader reader = new BufferedReader(inputReader);
    String line;
    while((line=reader.readLine())!=null){
    buffer.append(line);
    }
    //关闭连接、释放资源
    reader.close();
    inputReader.close();
    input.close();
    input = null;
    connection.disconnect();
    jsonObject = JSONObject.fromObject(buffer.toString());
    } catch (Exception e) {
    }
    return jsonObject;

    // 获取access_token的接口地址(GET)   
    public final static String access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";  
      
    /** 
    * 获取access_token 
    *  
    * @param CorpID 企业Id 
    * @param SECRET 管理组的凭证密钥,每个secret代表了对应用、通讯录、接口的不同权限;不同的管理组拥有不同的secret 
    * @return 
    */  
    public static AccessToken getAccessToken(String corpID, String secret) {  
        AccessToken accessToken = null;  
      
        String requestUrl = access_token_url.replace("APPID", corpID).replace("APPSECRET", secret);  
        JSONObject jsonObject = HttpRequest(requestUrl, "GET", null);  
        // 如果请求成功  
        if (null != jsonObject) {  
            try {  
                accessToken = new AccessToken();  
                accessToken.setToken(jsonObject.getString("access_token"));  
                accessToken.setExpiresIn(jsonObject.getInt("expires_in"));
                System.out.println("获取token成功:"+jsonObject.getString("access_token")+"————"+jsonObject.getInt("expires_in"));
            } catch (Exception e) {  
                accessToken = null;  
                // 获取token失败  
                String error = String.format("获取token失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));  
                System.out.println(error);
            }  
        }  
        return accessToken;  
    }
    // 菜单创建(POST)   
    public static String menu_create_url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN";  
      
    /** 
    * 创建菜单 
    *  
    * @param menu 菜单实例 
    * @param accessToken 有效的access_token 
    * @param agentid  企业应用的id,整型,可在应用的设置页面查看
    * @return 0表示成功,其他值表示失败 
    */  
    public static int createMenu(Menu menu, String accessToken) {  
        int result = 0;  
      
        // 拼装创建菜单的url  
        String url = menu_create_url.replace("ACCESS_TOKEN", accessToken);  
        // 将菜单对象转换成json字符串  
        String jsonMenu = JSONObject.fromObject(menu).toString();  
        // 调用接口创建菜单  
        JSONObject jsonObject = HttpRequest(url, "POST", jsonMenu);  
      
        if (null != jsonObject) {  
            if (0 != jsonObject.getInt("errcode")) {  
                result = jsonObject.getInt("errcode");  
                String error = String.format("创建菜单失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));  
                System.out.println(error); 
            }  
        }  
      
        return result;  
    }  
    public static String URLEncoder(String str){
    String result = str ;
    try {
    result = java.net.URLEncoder.encode(result,"UTF-8");
    } catch (Exception e) {
            e.printStackTrace();
    }
    return result;
    }
    /**
    * 根据内容类型判断文件扩展名

    * @param contentType 内容类型
    * @return
    */
    public static String getFileEndWitsh(String contentType) {
    String fileEndWitsh = "";
    if ("image/jpeg".equals(contentType))
    fileEndWitsh = ".jpg";
    else if ("audio/mpeg".equals(contentType))
    fileEndWitsh = ".mp3";
    else if ("audio/amr".equals(contentType))
    fileEndWitsh = ".amr";
    else if ("video/mp4".equals(contentType))
    fileEndWitsh = ".mp4";
    else if ("video/mpeg4".equals(contentType))
    fileEndWitsh = ".mp4";
    return fileEndWitsh;
    }
    /**
    * 数据提交与请求通用方法
    * @param access_token 凭证
    * @param RequestMt 请求方式
    * @param RequestURL 请求地址
    * @param outstr 提交json数据
    * */
        public static int PostMessage(String access_token ,String RequestMt , String RequestURL , String outstr){
        int result = 0;
        RequestURL = RequestURL.replace("ACCESS_TOKEN", access_token);
        JSONObject jsonobject = WeixinUtil.HttpRequest(RequestURL, RequestMt, outstr);
        if (null != jsonobject) {  
              if (0 != jsonobject.getInt("errcode")) {  
                  result = jsonobject.getInt("errcode");  
                  String error = String.format("操作失败 errcode:{} errmsg:{}", jsonobject.getInt("errcode"), jsonobject.getString("errmsg"));  
                  System.out.println(error); 
              }  
          }
        return result;
        }
    }  






    package com.cxb.wx.media;


    import java.io.BufferedInputStream;
    import java.io.BufferedReader;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.io.OutputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;


    import com.cxb.wx.accesstoken.AccessTokenUtil;
    import com.cxb.wx.accesstoken.Account;


    import net.sf.json.JSONObject;


    /**
     * @author ChenXb
     *
     * 2018年4月27日
     */
    public class MUDload {


    /**
    * 上传媒体文件
    * @param accessToken 接口访问凭证
    * @param type 媒体文件类型,分别有图片(image)、语音(voice)、视频(video),普通文件(file)
    * @param media form-data中媒体文件标识,有filename、filelength、content-type等信息
    * @param mediaFileUrl 媒体文件的url
    * 上传的媒体文件限制
         * 图片(image):1MB,支持JPG格式
         * 语音(voice):2MB,播放长度不超过60s,支持AMR格式
         * 视频(video):10MB,支持MP4格式
         * 普通文件(file):10MB
    * */
    public static WeixinMedia uploadMedia(String accessToken, String type, String mediaFileUrl) {
    WeixinMedia weixinMedia = null;
    // 拼装请求地址
    String uploadMediaUrl = "https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE";
    uploadMediaUrl = uploadMediaUrl.replace("ACCESS_TOKEN", accessToken).replace("TYPE", type);


    // 定义数据分隔符
    String boundary = "------------7da2e536604c8";
    try {
    URL uploadUrl = new URL(uploadMediaUrl);
    HttpURLConnection uploadConn = (HttpURLConnection) uploadUrl.openConnection();
    uploadConn.setDoOutput(true);
    uploadConn.setDoInput(true);
    uploadConn.setRequestMethod("POST");
    // 设置请求头Content-Type
    uploadConn.setRequestProperty("Content-Type", "multipart/form-data;boundary=" + boundary);
    // 获取媒体文件上传的输出流(往微信服务器写数据)
    OutputStream outputStream = uploadConn.getOutputStream();


    URL mediaUrl = new URL(mediaFileUrl);
    HttpURLConnection meidaConn = (HttpURLConnection) mediaUrl.openConnection();
    meidaConn.setDoOutput(true);
    meidaConn.setRequestMethod("GET");


    // 从请求头中获取内容类型
    String contentType = meidaConn.getHeaderField("Content-Type");
    // 根据内容类型判断文件扩展名
    String fileExt = WeixinUtil.getFileEndWitsh(contentType);
    // 请求体开始
    outputStream.write(("--" + boundary + "\r\n").getBytes());
    outputStream.write(String.format("Content-Disposition: form-data; name=\"media\"; filename=\"file1%s\"\r\n", fileExt).getBytes());
    outputStream.write(String.format("Content-Type: %s\r\n\r\n", contentType).getBytes());


    // 获取媒体文件的输入流(读取文件)
    BufferedInputStream bis = new BufferedInputStream(meidaConn.getInputStream());
    byte[] buf = new byte[8096];
    int size = 0;
    while ((size = bis.read(buf)) != -1) {
    // 将媒体文件写到输出流(往微信服务器写数据)
    outputStream.write(buf, 0, size);
    }
    // 请求体结束
    outputStream.write(("\r\n--" + boundary + "--\r\n").getBytes());
    outputStream.close();
    bis.close();
    meidaConn.disconnect();


    // 获取媒体文件上传的输入流(从微信服务器读数据)
    InputStream inputStream = uploadConn.getInputStream();
    InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
    BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
    StringBuffer buffer = new StringBuffer();
    String str = null;
    while ((str = bufferedReader.readLine()) != null) {
    buffer.append(str);
    }
    bufferedReader.close();
    inputStreamReader.close();
    // 释放资源
    inputStream.close();
    inputStream = null;
    uploadConn.disconnect();


    // 使用JSON-lib解析返回结果
    JSONObject jsonObject = JSONObject.fromObject(buffer.toString());
    weixinMedia = new WeixinMedia();
    weixinMedia.setType(jsonObject.getString("type"));
    // type等于 缩略图(thumb) 时的返回结果和其它类型不一样
    if ("thumb".equals(type))
    weixinMedia.setMediaId(jsonObject.getString("thumb_media_id"));
    else{
    weixinMedia.setMediaId(jsonObject.getString("media_id"));
        weixinMedia.setCreatedAt(jsonObject.getInt("created_at"));
    }
    } catch (Exception e) {
    weixinMedia = null;
    String error = String.format("上传媒体文件失败:%s", e);
    System.out.println(error);
    }
    return weixinMedia;
    }

    /**
    * 获取媒体文件
    * @param accessToken 接口访问凭证
    * @param media_id 媒体文件id
    * @param savePath 文件在服务器上的存储路径
    * */
    public static String downloadMedia(String accessToken, String mediaId, String savePath) {
    String filePath = null;
    // 拼接请求地址
    String requestUrl = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
    requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
    System.out.println(requestUrl);
    try {
    URL url = new URL(requestUrl);
    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
    conn.setDoInput(true);
    conn.setRequestMethod("GET");


    if (!savePath.endsWith("/")) {
    savePath += "/";
    }
    // 根据内容类型获取扩展名
    String fileExt = WeixinUtil.getFileEndWitsh(conn.getHeaderField("Content-Type"));
    // 将mediaId作为文件名
    filePath = savePath + mediaId + fileExt;


    BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
    FileOutputStream fos = new FileOutputStream(new File(filePath));
    byte[] buf = new byte[8096];
    int size = 0;
    while ((size = bis.read(buf)) != -1){
    fos.write(buf, 0, size);
    }
    fos.close();
    bis.close();


    conn.disconnect();
    String info = String.format("下载媒体文件成功,filePath=" + filePath);
    System.out.println(info);
    } catch (Exception e) {
    filePath = null;
    String error = String.format("下载媒体文件失败:%s", e);
    System.out.println(error);
    }
    return filePath;
    }

    /**
    * 演示实例
    */

    public static void main(String[] args) {

                    //这里获取accessToken 可以参考我的获取accessToken 博客完成。

    String accessToken = AccessTokenUtil.getAccessToken(Account.APPID, Account.APPSECRET);
    //上传           这里模拟的是将图片放在Tomcat里面  http://localhost:8080/a.jpg 这里是Tomcat能访问的图片即可
    WeixinMedia wxMedia = uploadMedia(accessToken, "image", "http://localhost:8080/a.jpg");
    System.out.println(wxMedia.toString());

    //下载
    String mediaId = wxMedia.getMediaId();
    String file = downloadMedia(accessToken, mediaId, "F:/CSDN");
    System.out.println(file);
    }
    }


    执行效果:



    需要的jar



    展开全文
  • 微信公众号开发中一般会涉及到在手机公众号程序中选择本地图片或者拍照,将图片上传到本地后台服务器的功能,网上的做法一般是调用微信官方提供的chooseImage方法,再判断是android还是ios并且是否使用WKWebview内核...
  • 调用微信JS-SDK接口上传图片

    万次阅读 多人点赞 2020-07-04 18:54:13
    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...
  • js使用微信上传图片功能

    千次阅读 2019-03-26 16:42:54
    在说上传图片之前,先说一下准备工作,其实在上一篇微信分享功能那篇文章已经说过了,就是使用wx.config里面去把appId、timestamp、nonceStr、signature这四个参数的值给加上,这些准备工作跟分享是一样的,微信目前...
  • 微信小程序实现图片上传

    万次阅读 2018-07-25 17:26:20
    如图: 直接上代码: wxml: &lt;view class="weui-uploader"&gt; &lt;view class="weui-uploader__hd"...图片上传&lt;/view&gt; &lt;/view&gt; &lt;v
  • 微信小程序多张图片上传

    万次阅读 2018-11-19 10:32:34
    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片上传完成后,就不再调用该函数。 首先,我们来看一看wx....
  • 微信图片上传

    千次阅读 2018-05-24 16:55:14
    可是事情没有那么顺利,因为有一个上传图片的功能。刚开始做的时候感觉没有任何问题,结果部署到app上和进行微信测试的时候出大毛病了 方案一: 使用单机事件,单机的时候创建一个type=file的input并且执行click...
  • /** *@name判断微信浏览器 */ exportconstisWeiXin=()=>{ letua=window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ returntrue; ...
  • 通过企业微信获取token后,实现上传用户图片文件,并通过后台修改头像。
  • 微信开发 — 调用微信上传图片接口,并保存到自己的服务器 整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器 前几个步骤在之前的博客上有...
  • 接下来记录我在项目过程中利用企业微信js-sdk去实现图片打开,上传,需要预览的可以继续更新 1.配置sdkConfig: const sdkConfig = (config, jsApiList, ready, error) => { wx.config({ beta: true, // 必须...
  • 在Vue中调用微信上传图片功能

    千次阅读 2019-07-19 18:45:33
    在Vue中调用微信上传图片功能 效果 说明 后台微信参数获取(略) 上传流程 点击图片控件位置,进行选择图片 选择相机拍照或图库上传 上传完成显示到图片控件 开发流程 引入weixin插件 页面初始化时获取...
  • 微信开发者工具问题, 之前可以在开发工具上测试上传, 现在上传的都是错误文件, 只能在微信上测试.
  • 我调用了getChooseImage的接口 然后我想把这样图片上传到自己的云服务器上 继续做后台的处理 请问这一功能要怎么实现 请高人指点
  • https://www.jb51.net/article/71417.htm
  • 调用微信接口上传图片

    千次阅读 2018-08-27 09:55:27
    thinkphp5.1框架 ...amp;id=mp1421141115 1.在php中获取微信配置  public function upload(){    //先获取配置  $config = Config::pull('wechat');  ...
  • 后台
1 2 3 4 5 ... 20
收藏数 41,123
精华内容 16,449
关键字:

微信上传图片