搜尋
首頁微信小程式微信開發微信開發之調起相機、本地展示圖片、上傳下載圖片方法

本文介紹微信開發之調起相機、本地展示圖片、上傳下載圖片方法

1.配置

頁面引入透過jssdk授權後,傳入wx對象,先配置需要的介面


wx.config({    /* debug: true,  */
    appId: appid, 
    timestamp: timestamp, 
    nonceStr: nonceStr, 
    signature: signature,
    jsApiList: [
         'chooseImage',//拍照或从手机相册中选图接口
         'previewImage',//预览图片接口
         'uploadImage',//上传图片接口
         'downloadImage'//下载图片接口
   ]
 });


 

2.調起拍照/相簿

將下面的方法放在需要點選事件的回呼函數裡面 


wx.chooseImage({
    count: 1, 
    sizeType: ['compressed'], 
    sourceType: ['album', 'camera'], 
    success: function (res) {
    //var localIds = res.localIds;
      $('.driver-card img').prop('src',res.localIds[0]);
      uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')
   }
});


這時我們可以看到這樣的效果,代表調起成功了! chooseImage方法的成功回調裡,我將選取的照片賦值給需要顯示的img的src(因為我這裡只有一張照片,如果有多張用循環賦值即可),這樣一來,就可以直接顯示剛拍照/相簿裡選取的照片了

微信開發之調起相機、本地展示圖片、上傳下載圖片方法

 

#3.上傳照片

在上面chooseImage的success回呼裡面,可以看到我呼叫了uploadToWeixinServer方法,參數為本機照片的Id


uploadToWeixinServer: 1


呼叫uploadImage介面後,將圖片上傳到了微信伺服器,返回圖片的ID,這個時候需要用ajax非同步上傳到自己的伺服器裡,呼叫微信提供的「取得臨時素材」介面。當然也不一定是選擇完照片就立即上傳,還得根據實際業務需求出發,也有是靜默上傳(沒有進度提示),也有是在最終提交表單時一起上傳

js:


uploadToOwnerServer: function(serverId,type){
            $.ajax({
                data: {serverId:serverId,type:type},
                type : "POST",
                url : WX_ROOT + "wechat/uploadPhoto",
                success : function(json) {                    if (json) {                        var data = JSON.parse(json.data);                        if ('car' == type) 
                            uploadPhoto.options.carImage = data.path + data.name                        else
                            uploadPhoto.options.idCardImage = data.path + data.name
                        
                    }
                }
            });
        },


 

#Controller


@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)    public @ResponseBody HttpResult uploadPhoto(@RequestParam String serverId,@RequestParam String type) throws Exception{
        LOGGER.info("RestFul of uploadPhoto parameters serverId:{},type:{}",serverId,type);        
        try {            /** 将图片保存到本地服务器 **/
            String photoName = type + new Date().getTime() + UUID.randomUUID().toString();            
            //文件路径不存在则创建
            File saveFile = new File(PIC_PATH + type);            if (!saveFile.mkdir()) saveFile.mkdir();
            
            wechatService.saveImageToDisk(serverId, photoName, PIC_PATH + type + "/");
            LOGGER.info("Download the picture from weixin server pathL:{}",PIC_PATH + type + "/");
            JSONObject data = new JSONObject();
            data.put("name", type + "/" + photoName+".jpg");
            data.put("path", PIC_SERVER + "/");
            
            HttpResult rs = new HttpResult();
            rs.setCode(200);
            rs.setData(data.toJSONString());
            LOGGER.info("Download the picture from weixin server is successful!serverId:{},photoName:{}",serverId,photoName);
            LOGGER.info("HttpResult data:{}",rs.getData());            return rs;
        } catch (Exception e) {
            LOGGER.error("Download the picture from weixin server is error",serverId);            return null;
        }


這裡我使用了一個UUID產生主鍵規則,透過型別+時間戳+唯一字串定義圖片名稱。如果上傳成功,同時又將自己伺服器的圖片位址回傳給前端。

 

getInputStream


呼叫微信提供的取得臨時素材介面下載還在微信伺服器上的圖片,參數為前端提交上來的媒體檔案ID,最終將檔案轉化為輸入流對象

/**
     * 根据文件id下载文件 
     * @param accessToken
     * @param mediaId 
     * @return 文件流对象     */
    public InputStream getInputStream(String accessToken, String mediaId) {  
        InputStream is = null;  
        String url = "http://www.php.cn/"+ accessToken + "&media_id=" + mediaId;  
        try {  
            URL urlGet = new URL(url);  
            HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
            http.setRequestMethod("GET"); // 必须是get方式请求  
            http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
            http.setDoOutput(true);  
            http.setDoInput(true);  
            System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
            System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒              http.connect();  
            // 获取文件转化为byte流  
            is = http.getInputStream();  
        } catch (Exception e) {  
            LOGGER.error("Failed to convert inputStream from weixin server,accessToken:{},mediaId:{}",accessToken,mediaId);
        }  
        return is;  
  
    }


service


透過循環解析流對象,將文件寫入自己的伺服器

###
public void saveImageToDisk(String mediaId, String picName, String picPath) throws Exception {  
        String accessToken = getBaseAccessToken();
        InputStream inputStream = getInputStream(accessToken, mediaId); 
        
        // 循环取出流中的数据
        byte[] data = new byte[1024];  
        int len = 0;  
        FileOutputStream fileOutputStream = null;  
        try {  
            fileOutputStream = new FileOutputStream(picPath+picName+".jpg");  
            while ((len = inputStream.read(data)) != -1) {  
                fileOutputStream.write(data, 0, len);  
            }  
            LOGGER.info("Write the fileInputStream is successful");
        } catch (IOException e) {  
            LOGGER.error("Write the fileInputStream is error");
        } finally {  
            if (inputStream != null) {  
                try {  
                    inputStream.close();  
                } catch (IOException e) {  
                    LOGGER.error("Close the fileInputStream is error");
                }  
            }  
            if (fileOutputStream != null) {  
                try {  
                    fileOutputStream.close();  
                } catch (IOException e) {  
                    LOGGER.error("Close the fileOutputStream is error");
                }  
            }  
        }  
    }
############# ###

以上是微信開發之調起相機、本地展示圖片、上傳下載圖片方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP微信开发:如何实现消息加密解密PHP微信开发:如何实现消息加密解密May 13, 2023 am 11:40 AM

PHP是一种开源的脚本语言,广泛应用于Web开发和服务器端编程,尤其在微信开发中得到了广泛的应用。如今,越来越多的企业和开发者开始使用PHP进行微信开发,因为它成为了一款真正的易学易用的开发语言。在微信开发中,消息的加密和解密是一个非常重要的问题,因为它们涉及到数据的安全性。对于没有加密和解密方式的消息,黑客可以轻松获取到其中的数据,对用户造成威胁

PHP微信开发:如何实现用户标签管理PHP微信开发:如何实现用户标签管理May 13, 2023 pm 04:31 PM

在微信公众号开发中,用户标签管理是一个非常重要的功能,可以让开发者更好地了解和管理自己的用户。本篇文章将介绍如何使用PHP实现微信用户标签管理功能。一、获取微信用户openid在使用微信用户标签管理功能之前,我们首先需要获取用户的openid。在微信公众号开发中,通过用户授权的方式获取openid是比较常见的做法。在用户授权完成后,我们可以通过以下代码获取用

用PHP开发微信群发工具用PHP开发微信群发工具May 13, 2023 pm 05:00 PM

随着微信的普及,越来越多的企业开始将其作为营销工具。而微信群发功能,则是企业进行微信营销的重要手段之一。但是,如果只依靠手动发送,对于营销人员来说是一件极为费时费力的工作。所以,开发一款微信群发工具就显得尤为重要。本文将介绍如何使用PHP开发微信群发工具。一、准备工作开发微信群发工具,我们需要掌握以下几个技术点:PHP基础知识微信公众平台开发开发工具:Sub

PHP微信开发:如何实现客服聊天窗口管理PHP微信开发:如何实现客服聊天窗口管理May 13, 2023 pm 05:51 PM

微信是目前全球用户规模最大的社交平台之一,随着移动互联网的普及,越来越多的企业开始意识到微信营销的重要性。在进行微信营销时,客服服务是至关重要的一环。为了更好地管理客服聊天窗口,我们可以借助PHP语言进行微信开发。一、PHP微信开发简介PHP是一种开源的服务器端脚本语言,广泛运用于Web开发领域。结合微信公众平台提供的开发接口,我们可以使用PHP语言进行微信

PHP微信开发:如何实现群发消息发送记录PHP微信开发:如何实现群发消息发送记录May 13, 2023 pm 04:31 PM

随着微信成为了人们生活中越来越重要的一个通讯工具,其敏捷的消息传递功能迅速受到广大企业和个人的青睐。对于企业而言,将微信发展为一个营销平台已经成为趋势,而微信开发的重要性也逐渐凸显。在其中,群发功能更是被广泛使用,那么,作为PHP程序员,如何实现群发消息发送记录呢?下面将为大家简单介绍一下。1.了解微信公众号相关开发知识在了解如何实现群发消息发送记录之前,我

PHP微信开发:如何实现语音识别PHP微信开发:如何实现语音识别May 13, 2023 pm 09:31 PM

随着移动互联网的普及,微信作为一款社交软件,越来越多的人开始使用,并且微信开放平台也给开发者带来了众多的机会。近年来,随着人工智能技术的发展,语音识别技术逐渐成为了移动端开发的热门技术之一。在微信开发中,如何实现语音识别成为很多开发者关注的问题。本文将介绍如何利用PHP开发微信应用实现语音识别功能。一、语音识别原理在介绍如何实现语音识别之前,我们先了解一下语

ThinkPHP6微信开发指南:快速搭建微信公众号应用ThinkPHP6微信开发指南:快速搭建微信公众号应用Aug 26, 2023 pm 11:55 PM

ThinkPHP6微信开发指南:快速搭建微信公众号应用引言:微信公众号作为一种重要的社交媒体平台,为个人和企业在市场推广、信息传播等方面提供了很大的机会。在这篇文章中,我们将介绍如何使用ThinkPHP6快速搭建一个微信公众号应用,并且提供一些常用的代码示例。环境准备在开始开发之前,我们首先需要准备好以下环境:PHP7以上版本ThinkPHP6框架微信公众号

如何使用PHP进行微信开发?如何使用PHP进行微信开发?May 21, 2023 am 08:37 AM

随着互联网和移动智能设备的发展,微信成为了社交和营销领域不可或缺的一部分。在这个越来越数字化的时代,如何使用PHP进行微信开发已经成为了很多开发者的关注点。本文主要介绍如何使用PHP进行微信开发的相关知识点,以及其中的一些技巧和注意事项。一、开发环境准备在进行微信开发之前,首先需要准备好相应的开发环境。具体来说,需要安装PHP的运行环境,以及微信公众平台提

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),