国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue2.0利用vue-resource上傳文件到七牛

lcodecorex / 1741人閱讀

摘要：年底，公司項目番茄表單的前端部分，開始了從傳統(tǒng)的到的徹底重構(gòu)。上傳流程圖不重要看文字事件觸發(fā)后，先去如果是圖片，可以同時通過以及將圖片預(yù)覽在頁面上后臺請求七牛的上傳，將拿到的和以及通過傳遞過來的一起到中。

關(guān)于上傳，總是有很多可以說道的。
16年底，公司項目番茄表單的前端部分，開始了從傳統(tǒng)的jquery到vue 2.0的徹底重構(gòu)。但是上傳部分，無論是之前的傳統(tǒng)版本，還是Vue新版本，都是在使用著FileAPI這款優(yōu)秀的開源庫，只是進行了簡單的directive化。為什么呢？因為兼容性。沒辦法，公司項目不等同于個人項目，必須要考慮大多數(shù)瀏覽器。否則，上傳部分完全可以利用Vue-Resource以及FormData來拋開對FileAPI的依賴。這讓我深感遺憾，幸好這個簡單的遺憾在個人博客Vue化重構(gòu)的時候得以彌補。

上傳流程

圖不重要看文字
input[type="file"] change事件觸發(fā)后，先去（如果是圖片，可以同時通過FileReader以及readAsDataURL將圖片預(yù)覽在頁面上）后臺請求七牛的上傳token，將拿到的token和key以及通過change傳遞過來的files一起append到formData中。然后將formData通過post傳遞給七牛，七牛在處理后將返回真正的文件地址

獲取token 
const qiniu = require("qiniu")
const crypto = require("crypto")
const Config = require("qiniu-config")

exports.token = function*() {
    //構(gòu)建一個保存文件名
    //這里沒有處理文件后綴,需要自己傳遞過來,然后在這里處理加在key上,非必須
    const key = crypto.createHash("md5").update(((new Date()) * 1 + Math.floor(Math.random() * 10).toString())).digest("hex")
    //Config 七牛的秘鑰等配置
    const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket] 
    qiniu.conf.ACCESS_KEY = ACCESS_KEY
    qiniu.conf.SECRET_KEY = SECRET_KEY
    const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key)
    try {
        const token = upToken.token()
        return this.body = {
            key: key,
            token: token
        }
    } catch (e) {
        // throw error
    }
}

//假設(shè)api 地址是 /api/token
上傳組件 upload.vue
父組件調(diào)用
小結(jié)

相比于FILEApi 或者其他上傳組件，這種方法代碼量最小。但是缺點也是顯而易見的，大量html5 API的使用，勢必會回到兼容性這個老大難上來，慎重的選擇性使用吧

本文首發(fā)于我的博客

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81756.html

相關(guān)文章

  • 關(guān)于數(shù)據(jù)遷移，你應(yīng)該知道的那些方法

    摘要：數(shù)據(jù)遷移過程中的速率問題。關(guān)閉源站數(shù)據(jù)遷移典型案例剖析七牛客戶陌陌的數(shù)據(jù)量非常大，如果采用常用的傳輸辦法，整個遷移過程要耗時半年，并且會嚴重影響線上的業(yè)務(wù)。為此，七牛為陌陌制定了個性化的數(shù)據(jù)遷移方案。 showImg(http://sharlyne-lee.qiniudn.com/m1.png); 無論是計劃擁抱云服務(wù)還是打算從正在使用的云服務(wù)切換到另外一家，這其中數(shù)據(jù)的遷移是很關(guān)鍵...

    DDreach 評論0 收藏0

  • 文件上傳進度提示

    摘要：需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。 需求 當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。而要在上傳過程實時顯示上傳進度，則需要已上傳的大小和文件總大小。 前提 請求是異步的。因為要實時獲取到上傳的進度...

    MageekChiu 評論0 收藏0

  • XBlog： Vue+Express+Mongodb的全棧可擴展的完整博客系統(tǒng)

    摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎(chǔ)，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預(yù)編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...

    Salamander 評論0 收藏0

  • XBlog： Vue+Express+Mongodb的全棧可擴展的完整博客系統(tǒng)

    摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎(chǔ)，請保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions） 本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預(yù)編譯器以及一眾工具類插件 項目前后臺代碼在同一個目錄中...

    banana_pi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<