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

資訊專(zhuān)欄INFORMATION COLUMN

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

lcodecorex / 1742人閱讀

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

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

上傳流程

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

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

exports.token = function*() {
    //構(gòu)建一個(gè)保存文件名
    //這里沒(méi)有處理文件后綴,需要自己傳遞過(guò)來(lái),然后在這里處理加在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)也是顯而易見(jiàn)的，大量html5 API的使用，勢(shì)必會(huì)回到兼容性這個(gè)老大難上來(lái)，慎重的選擇性使用吧

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

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

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

相關(guān)文章

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

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

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

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

    摘要：需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒(méi)有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。 需求 當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒(méi)有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。而要在上傳過(guò)程實(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è)用戶的此就是上面說(shuō)到的，用于用戶登陸的基礎(chǔ)，請(qǐng)保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 說(shuō)明（Instructions） 本項(xiàng)目后臺(tái)基于express、mongodb，前臺(tái)基于Vue2.0全家桶、bootstrap、scss預(yù)編譯器以及一眾工具類(lèi)插件 項(xiàng)目前后臺(tái)代碼在同一個(gè)目錄中...

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

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

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<