Vue 使用云存储（七牛云）

项目将数据与应用混在一起，不利于对系统进行维护。可以考虑如下场景：

1、希望通过 CDN 加速来提高图片资源的访问速度

2、服务器存储满了，需要多图片等文件资源做迁移，但是服务不能中断，域名不能变化 …

通过数应分离思想，就可以解决以上问题。几乎所有系统都会涉及到图片、视频等资源的上传和管理；项目中使用存储图片、视频的云存储数应分离后，可以将图片等文件资源独立出来，存储到云端。常见的云有阿里云、腾讯云、华为云、七牛云等。本次以七牛云提供的 OSS 存储服务为基础，通过 Node 搭建后端业务服务器，通过 Vue 构建用户端。

服务端：

app.js

const express = require('express')
const app = express();
const qiniu = require('./qiniu')// 创建上传凭证
app.get('/token', (req, res) => {let token = new qiniu().uploadToken();// console.log(token);res.status(200).send(token);
})
// app.post('/deletes',(req,res)=>{// })app.get('/test', (req, res) => {let result = {msg: 'ok'}res.send(result)
})
app.listen(3000, () => {console.log('server running at http://127.0.0.1:3000');
})

qiniu.js

const sdk = require('qiniu');
// https://developer.qiniu.com/kodo/1289/nodejs
class qiniu {constructor() {this.accessKey = '';//此处填写公钥this.secretKey = '';//私钥this.options = {scope: 'leviash',expires: 7200}}//创建上传凭证uploadToken() {let mac = new sdk.auth.digest.Mac(this.accessKey, this.secretKey);let putPolicy = new sdk.rs.PutPolicy(this.options);let uploadToken = putPolicy.uploadToken(mac);return uploadToken;}// deleteFile() {//     let mac = new qiniu.auth.digest.Mac(this.accessKey, this.secretKey);//     let config = new qiniu.conf.Config();//     //config.useHttpsDomain = true;//     config.zone = qiniu.zone.Zone_z2; // 华南//     let bucketManager = new sdk.rs.BucketManager(mac, config);//     let bucket = 'leviash';//     let key = 'fileWed Nov 16 2022 19:52:12 GMT+0800 (中国标准时间)54.';// 传递文件名//     bucketManager.delete(bucket, key, function (err, respBody, respInfo) {//         if (err) {//             console.log(err);//             //throw err;//         } else {//             console.log(respBody, respInfo) // 最后还是res.end//         }//     });// }
}
module.exports = qiniu

运行服务端：node app

客户端：

组件QiNiuUpload.vue

<template><div><!-- 七牛云上传 --><!-- https://element.eleme.cn/#/zh-CN/component/upload --><el-upload class="avatar-uploader" :action="domain" :auto-upload="false" :on-change="fileChange":file-list="fileList"><img v-if="imageUrl" :src="data:imageUrl" class="avatar" id="imgae" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><el-button type="primary" v-on:click="upload()">上传文件</el-button><el-button type="primary" v-on:click="deleteFile()">删除文件</el-button></div>
</template><script>// https://developer.qiniu.com/kodo/1283/javascript
export default {name: 'QiniuUpload',data() {return {fileList: [],imageUrl: '',// 七牛云的上传地址，根据自己所在地区选择，我这里是华南区domain: "http://upload.qiniup.com",// 这是七牛云空间的外链默认域名qiniuaddr: "",file: null,}},methods: {fileChange(file) {this.fileList.push(file.raw);this.file = file.raw;console.log(this.fileList);},// 验证文件合法性beforeUpload(file) {if (!file) {this.$message.error("请选择图片!");return false;}const isJPG = file.type === "image/jpeg" || file.type ==="image/png";const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error("上传头像图片只能是 JPG 格式!");}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");}return isJPG && isLt2M;},// 上传文件到七牛云upqiniu() {if (!this.beforeUpload(this.file)) {return;}this.$http.request('/api/token').then(res => {// 组装数据，上传七牛云const formdata = new FormData();formdata.append("file", this.file);formdata.append("token", res.data);// 重命名要上传的文件let filetype = "";const keyname = "file" + new Date() +Math.floor(Math.random() * 100) + "." + filetype;formdata.append("key", keyname);const config = {headers: { "Content-Type": "multipart/form-data" },};// 获取到凭证之后再将文件上传到七牛云空间let that = this;this.$http.post(this.domain, formdata, config).then((res) => {// console.log(res);that.imageUrl = "http://" + this.qiniuaddr + "/" +res.data.key;that.$message({message: "上传成功",type: "success",});}).catch((err) => {console.log(err);});}).catch(err => {console.log(err);})},// 上传按钮upload() {this.upqiniu();},//删除按钮// deleteFile() {//     console.log(file,fileList);//     deletes('/api/delete').then((res)=>{//         console.log(res);//     })// }}
}</script><style>
/* 不能有 scoped 否则 element-ui 样式不生效*/
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}.avatar-uploader .el-upload:hover {border-color: #409EFF;
}/* 让+居中 */
.el-upload .el-icon-plus {line-height: 178px;
}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}.avatar {width: 178px;height: 178px;display: block;
}
</style>

App.vue配置

<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/> --><QiniuUpload/></div></template><script>// import HelloWorld from './components/HelloWorld.vue'import QiniuUpload from './components/QiniuUpload.vue'export default {name: 'App',components: {// HelloWorldQiniuUpload,}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 挂载 axios
import Axios from 'axios'
// Axios.defaults.baseURL='http://localhost:3000';
Vue.prototype.$http=Axios;
Vue.use(ElementUI)
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

运行客户端

上传成功：

Vue 使用云存储（七牛云）相关推荐

一个集成阿里云、腾讯云、七牛云对象存储的SDK
概述一个集成阿里云.腾讯云.七牛云对象存储的SDK An SDK integrating Alibaba cloud, Tencent cloud and qiniu cloud object st ...
视频转码能力哪家强？腾讯云、阿里云、七牛云多维度对比
随着大量视频产生,怎样才能够高效精准地对视频进行云端转码和处理,来适配多终端展示需求和应对复杂的网络情况,是我们视频行业开发人员工作的重中之重.作为从业者,我们会经常接触各大云转码服务商,对音视频转码 ...
golang使用minio摆脱阿里云，七牛云
文章目录前言一.minio是什么? 二.使用步骤 1.安装 Docker容器苹果系统二进制下载 GNU / Linux 微软Windows 2.在golang项目中的使用前言昨天在做自己的 ...
阿里云，腾讯云，保利威视，金山云，七牛云的视频云方案的不同之处。
前几年,国内的视频云竞争确实超级火爆,以公共云为代表的阿里云.腾讯云等大力投入视频云研发及市场推广,都取得了不错的成绩:金山云.七牛云等也纷纷推出了自家的视频云平台. 阿里云由于初期承诺只做底层,而视 ...
Maven仓库搭建（二）：GitHub、又拍云、七牛云存储
转载自:http://blog.csdn.net/xiao__gui/article/details/52640280 在上一篇博文中,主要介绍了Maven仓库搭建原理,除了Nexus外,随意使用一个 ...
tp6腾讯云、七牛云对象存储的工具类以及异步上传
composer安装 composer require lorine/oss-utils 代码: use Lorine\OssUtils\OssService;$config = ['ak' => ...
一个集成阿里云、腾讯云、七牛云对象存储的工具类
1.安装composer扩展 composer require china-lishuo/oss-utils 2.这是图片上传到云存储+cdn /*** @param Request $request ...
阿里云 VS 腾讯云 VS 华为云 VS 七牛云 VS Ucloud 国内五大云服务商云主机评测报告...
前言对于所有的公有云服务商来说,云主机是非常基础且重要的业务.那么在高性能云计算方面,作为互联网巨头的阿里云.腾讯云以及新兴云计算企业的代表华为云.七牛云和UCloud又有怎样的表现呢? 最近,我们 ...
OSS对象存储——七牛云存储
七牛云存储需求: 项目中用户头像.文章图片等数据需要使用文件存储系统来保存. 方案: 自己搭建文件系统服务选用第三方对象存储服务七牛云 http://www.qiniu.com 使用 CDN 使 ...

Vue 使用云存储（七牛云）

服务端：

客户端：

Vue 使用云存储（七牛云）相关推荐

最新文章

热门文章