七牛云是一個提供云存儲、內容分發網絡和數據處理等服務的云平臺。在Vue中使用七牛云的功能可以幫助開發者更方便地上傳用戶生成的圖片、視頻等文件，并在網頁中展示。本文將介紹在Vue項目中如何使用七牛云上傳資源并展示。

首先，需要在七牛云上創建一個對象存儲空間，該空間用于存儲上傳的資源。在該存儲空間中生成一對Access Key和Secret Key，用于在Vue項目中鑒權。

const qiniu = require('qiniu')
const accessKey = 'your_accessKey'
const secretKey = 'your_secretKey'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)

在Vue中使用七牛云上傳資源需要使用第三方庫qiniu-js。該庫提供一個upload方法用于上傳文件，并返回文件的url、hash等信息。在上傳前需要創建一個UploadManager實例，該實例依賴于七牛云存儲空間的bucket和key，同時需要傳入操作的Mac對象。

import qiniu from 'qiniu-js'
const config = {
useCdnDomain: true,
region: qiniu.region.z0
}
const putExtra = {
mimeType: ['image/png', 'image/jpeg', 'image/gif']
}
const upload = (file, key) =>{
const uploadToken = qiniu.uploadToken('your_bucket')
const observable = qiniu.upload(file, key || null, uploadToken, putExtra, config)
return new Promise((resolve, reject) =>{
const subscription = observable.subscribe({
next(res) {},
error(err) {
reject(err)
},
complete(res) {
resolve(res)
}
})
})
}
const uploadManager = new qiniu.upload.UploadManager()
const key = 'your_key'
const file = document.querySelector('input').files[0]
upload(file, key).then(res =>{
const url = 'your_domain' + '/' + res.key
// save the url to database or do something you want
})

在上傳成功后，可以獲得資源在七牛云存儲空間中的url，可以在Vue項目中使用該url來展示圖片或視頻等資源。

總結：在Vue中使用七牛云上傳資源，需要先在七牛云創建一個存儲空間和獲取Access Key和Secret Key；使用qiniu-js庫的UploadManager實例上傳文件并獲得文件url；在Vue項目中使用該url來展示資源。