Rumah > applet WeChat > pembangunan WeChat > 微信开发之调起摄像头、本地展示图片、上传下载图片方法

微信开发之调起摄像头、本地展示图片、上传下载图片方法

高洛峰
Lepaskan: 2017-03-09 15:33:23
asal
2163 orang telah melayarinya

本文介绍微信开发之调起摄像头、本地展示图片、上传下载图片方法

1.配置

页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口


1

2

3

4

5

6

7

8

9

10

11

12

wx.config({    /* debug: true,  */

    appId: appid, 

    timestamp: timestamp, 

    nonceStr: nonceStr, 

    signature: signature,

    jsApiList: [

         'chooseImage',//拍照或从手机相册中选图接口

         'previewImage',//预览图片接口

         'uploadImage',//上传图片接口

         'downloadImage'//下载图片接口

   ]

 });

Salin selepas log masuk


 

2.调起拍照/相册

将下面的方法放在需要点击事件的回调函数里面 


1

2

3

4

5

6

7

8

9

10

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')

   }

});

Salin selepas log masuk


 

这时我们可以看到这样的效果,代表调起成功了!chooseImage方法的成功回调里,我将选中的照片赋值给需要显示的img的src(因为我这里只有一张照片,如果有多张用循环赋值即可),这样一来,就可以直接显示刚刚拍照/相册里选中的照片了

微信开发之调起摄像头、本地展示图片、上传下载图片方法

 

3.上传照片

在上面chooseImage的success回调里面,可以看到我调用了uploadToWeixinServer方法,参数为本地照片的Id


1

uploadToWeixinServer: 1

Salin selepas log masuk


调用uploadImage接口后,将图片上传到了微信服务器,返回图片的ID,这个时候需要用ajax异步上传到自己的服务器里,调用微信提供的“获取临时素材”接口。当然也不一定是选择完照片就立即上传,还得根据实际业务需求出发,也有是静默上传(没有进度提示),也有是在最终提交表单时一起上传

js:


1

2

3

4

5

6

7

8

9

10

11

12

13

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

                         

                    }

                }

            });

        },

Salin selepas log masuk


 

Controller


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

@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;

        }

Salin selepas log masuk


这里我使用了一个UUID生成主键规则,通过类型+时间戳+唯一字符串定义图片名称。如果上传成功,同时又将自己服务器的图片地址返回给前端。

 

getInputStream

调用微信提供的获取临时素材接口下载还在微信服务器上的图片,参数为前端提交上来的媒体文件ID,最终将文件转化为输入流对象


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

     * 根据文件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;  

   

    }

Salin selepas log masuk


 

service

通过循环解析流对象,将文件写入自己的服务器


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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");

                }  

            }  

        }  

    }

Salin selepas log masuk


 

Atas ialah kandungan terperinci 微信开发之调起摄像头、本地展示图片、上传下载图片方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan