七牛 js 是七牛云提供的一組前端操作七牛云存儲的 JavaScript SDK。這套 SDK 將前端常用的文件上傳、下載、刪除、管理等操作封裝成了簡單易用的 API，可以幫助開發者快速的將文件上傳并展示到前端頁面。Vue.js 是一套構建用戶界面的漸進式框架，使用它可以非常方便的實現組件化開發、雙向數據綁定、虛擬 DOM 等功能。

在使用 Vue.js 開發前端頁面時，經常需要將一些文件儲存在七牛云上，通過七牛 js SDK 可以很輕松的實現文件上傳的功能。下面詳細介紹一下如何使用七牛 js 實現 Vue.js 中文件上傳功能。

var config = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 6,
region: qiniu.region.z2
};
var putExtra = {
fname: "",
params: {},
mimeType: null
};
var qiniu = require("qiniu");
var observer = {
next(res) {
console.log(res);
},
error(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
}
var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer)；

以上代碼中使用了標準的七牛云上傳方式，使用默認配置上傳文件到七牛云，其中 uploader 是上傳行為的實例對象，該對象可以綁定文件選擇、文件上傳等事件的回調函數，以便于我們在上傳過程中進行一些特定的操作。

七牛 js 還提供了豐富的 API，允許開發者在上傳過程中直接獲取文件的進度以及上傳成功后的文件的外鏈等信息。我們可以利用這個外鏈將文件展示在頁面上。

var observer = {
next(res) {
console.log(res);
},
error(err) {
console.log(err);
},
complete(res) {
console.log(res);
document.getElementById('img').setAttribute('src', domain + "/" + res.key);
}
}
var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer)；

以上代碼就可以在上傳成功后將文件外鏈作為圖片的 src 屬性進行展示。當然在展示圖片的時候，我們還可以通過設置圖片的寬高，控制圖片在頁面上的大小。

總結一下，利用七牛 js 可以輕松實現前端的文件上傳并在上傳完成后展示文件。在 Vue.js 中結合七牛 js 可以使開發者更加方便的快速搭建一個具有文件上傳和展示功能的前端頁面。