1. 程式人生 > >weex開發實戰(8)--在weex頁面實現圖片上傳

weex開發實戰(8)--在weex頁面實現圖片上傳

不同於移動端原生開發,當開發者使用weex移動開發時,使用第三方SDK比較棘手。因為第三方的JS SDK是無法直接拿來使用的,環境不同。必須使用原生SDK,下面我介紹一下自己是如何在weex開發時(安卓)使用leancloud的服務的。


首先去leancloud的安卓SDK下載頁面,下載SDK,這裡我只使用了最基礎的SDK包

其實用Gradle也可以啊,我喜歡下載手動整合。
然後在mainApplication.java檔案中onCreat()方法裡初始化


    AVOSCloud.initialize(this,yourappid,yourappkey)   
做過weex開發都知道,這個方法裡面還會初始化WXSDKEngine和ImageAdapter,它們不衝突。
 


    InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this,config);
現在進入正題了,如何在weex頁面實現上傳圖片呢?
Step.1  擴充套件一個Module,呼叫手機系統的相簿


    @WXModuleAnno(runOnUIThread = true)
    public void uploadimage(){
        int REQUESTCODE_PICK = 0;
        Intent intent;
        if(Build.VERSION.SDK_INT < 19){
            Log.d("chenlei api level","Your api is lower than 19");
            intent = new Intent(Intent.ACTION_GET_CONTENT);
            intent.setType("image/*");
        }else{
            Log.d("chenlei api level","Your api is higher than 19");
            intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        }
        ((Activity)mWXSDKInstance.getContext()).startActivityForResult(intent,REQUESTCODE_PICK);
    }



Step.2 在負責渲染weex頁面的activity類裡,重寫onActivityResult方法


 
   protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        Toast.makeText(getApplicationContext(),"這個函式有效嗎?",Toast.LENGTH_SHORT);
        super.onActivityResult(requestCode, resultCode, data);
        String s = String.valueOf(resultCode);
        if(resultCode == Activity.RESULT_OK && requestCode ==  REQUESTCODE_PICK){
            Uri uri = data.getData();
            Cursor cursor = getContentResolver().query(uri, null, null, null,null);
            if (cursor != null && cursor.moveToFirst()) {
                Path = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA));
                Log.d("Path", Path);
            }
            try {
                final AVFile file = AVFile.withAbsoluteLocalPath("test.png",Path);
                file.saveInBackground(new SaveCallback() {
                    @Override
                    public void done(AVException e) {
                        Log.d(TAG, file.getUrl());
                        WXBridgeManager manager = WXBridgeManager.getInstance();
                        Map<String,String> urlData = new HashMap<String, String>();
                        urlData.put("url",file.getUrl());
                        urlData.put("showimage","true");
                        urlData.put("uploadhint","改變圖片");
                        urlData.put("showdelete","true");
                        String jsonStr = JSON.toJSONString(urlData);
                        WXRefreshData refreshData = new WXRefreshData(jsonStr,false);
                        manager.refreshInstance(mInstance.getInstanceId(),refreshData);
                    }
                }, new ProgressCallback() {
                    @Override
                    public void done(Integer integer) {
                        Toast.makeText(getApplicationContext(),"已經上傳"+String.valueOf(integer)+"%",Toast.LENGTH_SHORT).show();
                    }
                });
            }catch(Exception e){
                Toast.makeText(getApplicationContext(),"上傳圖片失敗",Toast.LENGTH_SHORT).show();
            }
        }else {
            Toast.makeText(getApplicationContext(),"請選擇圖片",Toast.LENGTH_SHORT).show();
        }
    }



小提示:我們可以在AVFile的回撥函式中建立WXBridgeManager獲取當前例項,獲取檔案上傳的進度和最終URL,來更新頁面元件狀態和資訊。
簡單幾步,就實現了leancloud在weex開發中的使用,感謝leancloud提供的優秀資源,你們是開發者的福音呀。
更多原始碼可以去github上檢視,歡迎拍磚和star。
專案地址----------->[leancloud在weex開發中的使用專案例項][1]




  [1]: https://github.com/iChenLei/weex-android-joke
有任何疑問可以聯絡我的Email [email protected]
,交流weex和leancloud開發。

相關推薦

weex開發實戰(8)--在weex頁面實現圖片

不同於移動端原生開發,當開發者使用weex移動開發時,使用第三方SDK比較棘手。因為第三方的JS SDK是無法直接拿來使用的,環境不同。必須使用原生SDK,下面我介紹一下自己是如何在weex開發時(安卓)使用leancloud的服務的。 首先去leancloud的安卓SDK

CKEditor實現圖片,並且回調圖片路徑

js文件 文件上傳 hid class mode 兩種方法 review 重名 action CKEditor編輯器的工具欄中初始的時候應該是這樣子的,沒有圖片上傳按鈕 並且預覽中有一堆火星文,可以修改相應配置刪除它。 第一種方法:打開ckeditor/plugins/im

微信端調取相冊和攝像頭,實現圖片,並到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

HTML5+Canvas+jQuery調用手機拍照功能實現圖片(二)

customer mkdir 狀態保存 ont false lan else if 項目 action 上一篇僅僅講到前臺操作,這篇專門涉及到Java後臺處理。前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java後臺,然後Java這邊進行接收處理。通過

一個完整的springmvc + ajaxfileupload實現圖片的案例

multipart per cnblogs not his let facade func connector 一,原理 詳細原理請看這篇文章 springmvc + ajaxfileupload解決ajax不能異步上傳圖片的問題。java.lang.ClassCastEx

formData實現圖片

call 目錄 encode 之前 html 上傳圖片 tar ade keep 前言   在 上一篇 已經實現了圖片預覽,那麽如何上傳圖片呢?有兩種思路:   1、將圖片轉化為dataURL(base64),這樣就成為了一串字符串,再傳到服務端。不過這樣缺點很多,數據量比

js實現圖片實時顯示

input res window splay ack 顯示 style rip 是否 在開發的時候經常遇到這樣的需求,用戶在上傳圖片的時候,想要看到自己上傳的圖片是否正確,這時候需要把用戶上傳的圖片及時顯示出來,然後等他點擊上傳的時候,程序再執行上傳到服務器。 <!

node.js實現圖片(包含縮略圖)

http close path return new tde log img thumb 圖片上傳 使用multiparty插件實現上傳 安裝multiparty npm i --save multiparty 代碼實現 const multiparty = requi

django實現圖片和顯示

代碼 ngs 文件路徑 ont 添加 pac pre bubuko contex 首先安裝pillow模塊 在models.py下設置 class Notices(models.Model): NoticeCategory=models.CharField(max_

JQuery實現 圖片

elf ref log ava cti jquer dde ttr onchange 用到的文件,我都已經打包好了,自行下載: https://files.cnblogs.com/files/lguow/lib.rar 核心代碼如下: <input type="hi

接口自動化實現圖片(selenium/RF)

herf ict 上傳圖片 帶圖片 amp 怎麽 top .get imp 最近做自動化碰到一個問題: 就是帶圖片上傳的不知道怎麽實現自動化:整理了下實現如下: 上傳圖片postman 結果請求如下,上傳圖片後返回一個圖片地址: post請求 body 是form-da

tp5實現圖片

html部分 <form action="{:url('upload')}" method="post" enctype="multipart/form-data"> <div class="layui-form-item"> <label

SpringMvc實現圖片

首先是設定一下tomcat的虛擬路徑,有兩種方法(以在C:/upfile/為例) 第一種是在tomcat的bin目錄下的server.xml新增一句 < Context docBase=“C:/upfile/” path="/upload" reloada

elementUI+koa實現圖片功能

elementUI中的上傳元件為: 大家可以先在自己的專案中執行一下餓了麼上傳元件 <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :o

javascript實現圖片實時顯示圖片

我們平時會用到圖片上傳要求上傳的圖片要實時顯示,那麼下面就是我的方法 HTML程式碼如下 <input type="file" name="file" onchange="showImg(this)" /> <img id=

【SSH網上商城專案實戰13】Struts2實現檔案功能

  轉自:https://blog.csdn.net/eson_15/article/details/51366384 上一節我們做完了新增和更新商品的功能,這兩個部分裡有涉及到商品圖片的上傳,並沒有詳細解說。為此,這篇文章詳細介紹一下Struts2實現檔案上傳的功能。 1

html5實現圖片預覽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #te

vue實現圖片

專案中用到的是上傳頭像,前端通過input[type="file"]來選擇圖片,給後端傳遞一個formData格式的資料,然後上傳。程式碼如下: 我寫了個元件,引數如下: uploadType: 上傳型別 width: 圖片顯示的寬度 height: 圖片顯示的高度 imgUrl: 如果之前有圖片,

副文字編輯器 KindEditor 實現圖片到騰訊雲物件儲存 COS

目錄   一、主要功能實現 二、效果圖 三、需要匯入的包 四、前端程式設計 五、後臺程式設計 六、github 下載 附加內容: 一、主要功能實現 1、配置 KindEditor  2、在 KindEditor 中實現圖片上傳

《商城專案03》--用FastDFS實現圖片

一, 圖片伺服器的下載安裝配置 1, 下載資源-image-server.7z 連結: https://pan.baidu.com/s/1jtfpBtlocrhfmdFb5q3nCg 提取碼:0hjw 2, 下載解壓至自定義位置 3, 雙擊開啟Redis_02.v