js阿里云上传
‘壹’ 如何在阿里云服务器上搭建nodejs
到小鸟云购买云服务器 作为一个穷逼+不熟悉服务器配置的菜鸟。选了最便宜的套餐: CPU: 1核 / 内存: 1024 MB / 带宽:1Mbps / 操作系统: CentOS 7.0 购买环节会设置 ssh 登陆密码,记下密码。 登陆到小鸟云,查看购买的实例。 注意公网 IP,下一步会用到
2. 登陆服务器 sudo ssh 你的服务器ip地址
提示输入mac的密码,提示输入服务器密码。 输入后连接成功并显示服务器信息,如下:
登陆服务器后。这里对于我这个 linux 菜鸟有个大坑………就是 Linux 系统常见的目录结构和文件放置区域。 使用 root 用户身份登陆后,会直接进入到下图 红色箭头标出的 root 目录下。先 cd .. 跳转到上一层, 再 ls -a ,就可以看到类似下图的目录结构了。
3.安装 node 和 mongodb
node – 编译后二进制文件应在/usr/local/bin/node 下 mongodb –安装在/usr/local/mongodb 下
下面就一步一步来,首先升级CentOS
yum -y update1
升级后,跳转到 /usr/local/src , 这个文件夹通常用来存放软件源代码
cd /usr/local/src1
下载 nodejs 代码,也可以使用scp命令直接上传,因为下载实在太慢了。
wget http://nodejs.org/dist/v0.12.5/node-v0.12.5.tar.gz//注*根据最新版本号为准12
解压
tar -xzvf node-v0.12.5.tar.gz1
进入解压后的文件夹
cd node-v0.12.51
执行配置脚本来进行编译预处理
./configure1
编译源代码
make//注*这个时间可能会很久12
当编译完成后,需要使之在系统范围内可用, 编译后的二进制文件将被放置到系统路径,默认情况下,Node二进制文件应该放在/user/local/bin/node文件夹下
make install1
安装 express 和 forever,这两个模块都推荐 global 安装
npm -g install express forever1
建立超级链接, 不然 sudo node 时会报 “command not found”
sudo ln -s /usr/local/bin/node /usr/bin/nodesudo ln -s /usr/local/lib/node /usr/lib/nodesudo ln -s /usr/local/bin/npm /usr/bin/npmsudo ln -s /usr/local/bin/node-waf /usr/bin/node-wafsudo ln -s /usr/local/bin/forever /usr/bin/forever12345
Nodejs到这里就基本安装完成了。
下面来安装mongodb
软件安装位置:/usr/local/mongodb 数据存放位置:/var/mongodb/data 日志存放位置:/var/mongodb/logs
首先下载安装包
cd /usr/localwget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz12
解压安装包,重命名文件夹为mongodb
tar zxvf mongodb-linux-x86_64-2.6.0.tgzmv mongodb-linux-x86_64-2.6.0 mongodb12
创建数据和日志存放目录
mkdir /var/mongodbmkdir /var/mongodb/datamkdir /var/mongodb/logs123
打开rc.local文件,添加CentOS开机启动项:
vim /etc/rc.d/rc.local1
将mongodb启动命令追加到本文件中,让mongodb开机自启动:
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork12
关闭 vim 后,直接手动启动mongodb
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork12
看到类似的信息,说明已启动成功。我在这里发了个傻,以为26308是port号,导致后面设置port时折腾了好久。其实这里的 forked process 和 port 号是两个东西, 这个是程序本身在Server上的进程。
forked process: 263081
启动mongo shell
cd /usr/local/mongodb/bin/./mongo12
在 mongo shell 中创建管理员及数据库
use admin //admin 数据库db.createUser({user: "用户名",pwd:"登陆密码",roles:["userAdminAnyDatabase"] //超级管理员})use databaseFoo //nodeapp 要连接的数据库db.createUser({user: "用户名",pwd:"登陆密码",roles:["readWrite"] //读写权限})12345678910111213
到这里 mongodb 基本已经安装设置完成了。具体数据的迁移导入可自行研究。
4.配置及启动node app
我们把 nodeapp 的程序放在 /home 下
‘贰’ vuejs怎么部署到阿里云linux
这个问题可以用代理对你的项目进行长期的维护。
我现在在用的就是pm2,你可以先安装他,然后去pm2 start XXX(项目名)
之后你关掉了ssh也是可以跑起来的。
‘叁’ javascript 上传文件到阿里云的oss,上传文件成功后怎么获取文件的真实路径
如果你直接使用 javascript 将阿里云的accessId、accessKey写在页面上是不安全的,你可以使用后台存储这些敏感的信息,官网有相关的SDK ,你可以选择你常用的。
在后台编写你的回调函数,将回调函数凭证信息返回给前端,前端使用回调函数凭证访问OSS,就可以获取到回调函数信息。
‘肆’ vue--阿里云视频上传
引入压缩文件
定义一个对陪御象,并通过mixin混入组件
data如下
methods如下
镇乱孝 fileChange
authUpload
御稿 createUploader
使用一个弹出层显示上传进度
将公共函数引入到组件
点击确定时触发上传
‘伍’ 怎么将本地文件传到阿里云服务器里面
步骤一:
在本地电脑上,快捷键“WIN+R"打开“运行”中输入“mstsc”,点击确定
步骤二:
在“远程桌面连接”框点击“显示选项”展开
步骤三:
在展开的“远程桌面连接”窗口,点击“本地资源”
计算机中输入阿里云ECS云服务器的IP地址
步骤四:
点击“详细信息”
步骤五:
勾选要上传阿里云ECS云服务器的文件所在的本地磁盘,点击确定
步骤六:
输入用户名和密码后连接上阿里云ECS云服务器,打开“我的电脑”,就可以看到勾选的本地磁盘映射的盘符
步骤七:
打开要上传文件所在路径,选择要上传的文件,复制后粘贴至阿里云ECS云服务器磁盘路径下,即可完成上传
‘陆’ 怎样往阿里云服务器传文件
1、在本地电脑上,快捷键“WIN+R"在“运行”中输入“MSTSC”,点击确定。
‘柒’ day06项目【整合阿里云OSS和Excel导入分类】
为了解决海量数据存储与弹性扩容,项目中我们采用云存储的解决方案- 阿里云OSS。
1、开通“对象存储OSS”服务
(1)申请阿里云账号
(2)实名认证
(3)开通“对象存储OSS”服务
(4)进入管理控制台
2、创建Bucket
选择:标准存储、公共读、不开通
3、上传默认头像
创建文件夹avatar,上传默认的用户头像
1、在service模块下创建子模块service-oss
2、配置pom.xml
service-oss上级模块service已经引入service的公共依赖,所以service-oss模块只需引入阿里云oss相关依赖即可,
service父模块已经引入了service-base模块,所以Swagger相关默认已经引入
3、配置application.properties
4、logback-spring.xml
5、创建启动类
创建OssApplication.java
6、启动项目
报错 :
spring boot 会默认加载org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这个类,
而DataSourceAutoConfiguration类使用了@Configuration注解向spring注入了dataSource bean,又因为项目(oss模块)中并没有关于dataSource相关的配置信息,所以当spring创建dataSource bean时因缺少相关的信息就会报错。
即可成功:
1、从配置文件读取常量
创建常量读取工具类:ConstantPropertiesUtil.java
使用@Value读取application.properties里的配置内容
用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息,这个方法将在所有的属性被初始化后调用。
2、文件上传
创建Service接口:uploadFileAvatar.java
实现:OssServiceImpl.java
参考SDK中的:Java->上传文件->简单上传->流式上传->上传文件流
3、控制层
创建controller:FileUploadController.java
4、重启oss服务
5、Swagger中测试文件上传
解决上传文件覆盖问题:
测试:
6、配置nginx反向代理
配置nginx实现请求转发的功能:
验证:
1、复制头像上传组件
从vue-element-admin复制组件:
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
2、前端参考实现
src/views/components-demo/avatarUpload.vue
3、前端添加文件上传组件
src/views/e/teacher/save.vue
template:
引入组件模块:
4、设置默认头像(也可不设置)
onfig/dev.env.js中添加阿里云oss bucket地址
组件中初始化头像默认地址
5、js脚本实现上传和图片回显
二、测试文件上传
前后端联调
1、数据导入:减轻录入工作量
2、数据导出:统计信息归档
3、数据传输:异构系统之间数据传输
1、EasyExcel特点
Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行,但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
EasyExcel是阿里巴巴开源的一个excel处理框架, 以使用简单、节省内存着称 。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中,而是从磁盘上一行行读取数据,逐个解析。
EasyExcel采用一行一行的解析模式,并将一行的解析结果以观察者的模式通知处理(AnalysisEventListener)。
1、创建一个普通的maven项目
项目名:excel-easydemo
2、pom中引入xml相关依赖
3、创建实体类
设置表头和添加的数据字段
4 、实现写操作
TestEasyExcel.java
(1)创建方法循环设置要添加到Excel的数据
(2)实现最终的添加操作(写法一)
(3)实现最终的添加操作(写法二)
public static void main(String[] args) throws Exception {
// 写法2,方法二需要手动关闭流
//实现excel写的操作
//1 设置写入文件夹地址和excel文件名称
String filename = "F:\write.xlsx";
ExcelWriter excelWriter=EasyExcel.write(fileName,DemoData.class).build();
WriteSheet writeSheet=EasyExcel.writerSheet("写入方法二").build();
excelWriter.write(data(),writeSheet);
/// 千万别忘记finish 会帮忙关闭流
excelWriter.finish();
}
1、创建实体类
2、创建读取操作的监听器
3、调用实现最终的读取
public class TestEasyExcel {
public static void main(String[] args) {
//实现excel读操作
// 写法1:
String filename = "F:\write.xlsx";
// 这里 需要指定读用哪个class去读,然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(filename,DemoData.class,new ExcelListener()).sheet().doRead();
// 写法2:
InputStream in = new BufferedInputStream(new FileInputStream("F:\01.xlsx"));
ExcelReader excelReader = EasyExcel.read(in, DemoData.class, new ExcelListener()).build();
ReadSheet readSheet = EasyExcel.readSheet(0).build();
excelReader.read(readSheet);
// 这里千万别忘记关闭,读的时候会创建临时文件,到时磁盘会崩的
excelReader.finish();
}
1、编辑Excel模板
2、将文件上传至阿里云OSS
1、添加路由
2、添加vue组件
1、js定义数据
2、template
3、js上传方法
4、回调函数
1、service-e模块配置依赖
1、ESubjectController
2、创建和Excel对应的实体类
3、ESubjectService
(1)接口
(2)实现类
4、创建读取Excel监听器
1、参考 views/tree/index.vue
2、创建api
api/e/subject.js
3、list.vue
1、创建vo
2、创建controller
‘捌’ 怎样往阿里云服务器传文件
有几种办法,您可以参考一下。
第一种:在阿里云服务器里建一个FTP服务商,在本地用FTP客户端上传文件。
第二种:进阿里云服务器远程界面的时候,把本地磁盘带进去,然后进服务器里直接从本地磁盘里把文件复制到服务器里。
第三种:QQ安装到阿里云服务器里,用QQ对传。
第四种:把本地文件上传到邮箱里 ,然后进阿里云服务器里打开您的邮箱,进去下载文件即可。