成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

lcodecorex / 1810人閱讀

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

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

上傳流程

圖不重要看文字
input[type="file"] change事件觸發(fā)后，先去（如果是圖片，可以同時(shí)通過FileReader以及readAsDataURL將圖片預(yù)覽在頁面上）后臺(tái)請(qǐng)求七牛的上傳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)建一個(gè)保存文件名
    //這里沒有處理文件后綴,需要自己傳遞過來,然后在這里處理加在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 或者其他上傳組件，這種方法代碼量最小。但是缺點(diǎn)也是顯而易見的，大量html5 API的使用，勢(shì)必會(huì)回到兼容性這個(gè)老大難上來，慎重的選擇性使用吧

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81756.html

相關(guān)文章

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

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

    DDreach 評(píng)論0 收藏0

  • 文件上傳進(jìn)度提示

    摘要：需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。 需求 當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。而要在上傳過程實(shí)時(shí)顯示上傳進(jìn)度，則需要已上傳的大小和文件總大小。 前提 請(qǐng)求是異步的。因?yàn)橐獙?shí)時(shí)獲取到上傳的進(jìn)度...

    MageekChiu 評(píng)論0 收藏0

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

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

    Salamander 評(píng)論0 收藏0

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

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

    banana_pi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<