又拍云存储和七牛云存储有什么区别
云存储是提供存储空间的服务，就类似卖web空间，只不过云存储卖的是一个LUN或者一个基于NAS协议的vol，加之的服务细节比如带宽，速度，io属性，是否常驻cache等。之后的发展则是卖数据，提供商使用基于对象的数据服务直接向客户提供数据服务。而云计算和云存储整合之后的最终形态我推测将是卖IT服务。企业的目标是利润，企业不愿意付出的人力物力财力来维护IT系统，而提供商则可以全盘接收使IT服务外包。
thinkphp3.2.3 怎么上传form表单
上传表单
在ThinkPHP中使用上传功能无需进行特别处理。例如，下面是一个带有附件上传的表单提交：
注意，要使用上传功能 你的表单需要设置 enctype="multipart/form-data"
多文件上传支持
如果需要使用多个文件上传，只需要修改表单，把
改为
或者
两种方式的多附件上传系统的文件上传类都可以自动识别。
上传操作
ThinkPHP文件上传操作使用Think\Upload类，假设前面的表单提交到当前控制器的upload方法，我们来看下upload方法的实现代码：
public function upload(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传（子）目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$this->success('上传成功！');
}
}
上传类对图片文件的上传安全做了支持，如果企图上传非法的图像文件，系统会提示 非法图像文件。 为了更好的使用上传功能，建议你的服务器开启finfo模块支持
上传参数
在上传操作之前，我们可以对上传的属性进行一些设置，Upload类支持的属性设置包括：
属性描述
maxSize文件上传的最大文件大小（以字节为单位），0为不限大小
rootPath文件上传保存的根路径
savePath文件上传的保存路径（相对于根路径）
saveName上传文件的保存规则，支持数组和字符串方式定义
saveExt上传文件的保存后缀，不设置的话使用原文件后缀
replace存在同名文件是否是覆盖，默认为false
exts允许上传的文件后缀（留空为不限制），使用数组或者逗号分隔的字符串设置，默认为空
mimes允许上传的文件类型（留空为不限制），使用数组或者逗号分隔的字符串设置，默认为空
autoSub自动使用子目录保存上传文件 默认为true
subName子目录创建方式，采用数组或者字符串方式定义
hash是否生成文件的hash编码 默认为true
callback检测文件是否存在回调，如果存在返回文件信息数组
上面的属性可以通过两种方式传入：
实例化传入
我们可以在实例化的时候直接传入参数数组，例如：
$config = array(
'maxSize' => 3145728,
'rootPath' => './Uploads/',
'savePath' => '',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => true,
'subName' => array('date','Ymd'),
);
$upload = new \Think\Upload($config);// 实例化上传类
关于saveName和subName的使用后面我们会有详细的描述。
动态赋值
支持在实例化后动态赋值上传参数，例如：
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728;
$upload->rootPath = './Uploads/';
$upload->savePath = '';
$upload->saveName = array('uniqid','');
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');
$upload->autoSub = true;
$upload->subName = array('date','Ymd');
上面的设置和实例化传入的效果是一致的。
上传文件信息
设置好上传的参数后，就可以调用Think\Upload类的upload方法进行附件上传，如果失败，返回false，并且用getError方法获取错误提示信息；如果上传成功，就返回成功上传的文件信息数组。
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传（子）目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
foreach($info as $file){
echo $file['savepath'].$file['savename'];
}
}
每个文件信息又是一个记录了下面信息的数组，包括：
属性描述
key附件上传的表单名称
savepath上传文件的保存路径
name上传文件的原始名称
savename上传文件的保存名称
size上传文件的大小
type上传文件的MIME类型
ext上传文件的后缀类型
md5上传文件的md5哈希验证字符串 仅当hash设置开启后有效
sha1上传文件的sha1哈希验证字符串 仅当hash设置开启后有效
文件上传成功后，就可以使用这些文件信息来进行其他的数据操作，例如保存到当前数据表或者单独的附件数据表。
例如，下面表示把上传信息保存到数据表的字段：
$model = M('Photo');
// 取得成功上传的文件信息
$info = $upload->upload();
// 保存当前数据对象
$data['photo'] = $info[0]['savename'];
$data['create_time'] = NOW_TIME;
$model->add($data);
单文件上传
upload方法支持多文件上传，有时候，我们只需要上传一个文件，就可以使用Upload类提供的uploadOne方法上传单个文件，例如：
public function upload(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
// 上传单个文件
$info = $upload->uploadOne($_FILES['photo1']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
echo $info['savepath'].$info['savename'];
}
}
uploadOne方法上传成功后返回的文件信息和upload方法的区别是只有单个文件信息的一维数组。
上传文件的命名规则
上传文件的命名规则（saveName）用于确保文件不会产生冲突或者覆盖的情况。命名规则的定义可以根据你的业务逻辑来调整，不是固定的。例如，如果你采用时间戳的方式来定义命名规范，那么在同时上传多个文件的时候可能产生冲突（因为同一秒内可以上传多个文件），因此你需要根据你的业务需求来设置合适的上传命名规则。这里顺便来说下saveName参数的具体用法。
一、采用函数方式
如果传入的字符串是一个函数名，那么表示采用函数动态生成上传文件名（不包括文件后缀），例如：
// 采用时间戳命名
$upload->saveName = 'time';
// 采用GUID序列命名
$upload->saveName = 'com_create_guid';
也可以采用用户自定义函数
// 采用自定义函数命名
$upload->saveName = 'myfun';
默认的命名规则设置是采用uniqid函数生成一个唯一的字符串序列。
saveName的值支持数组和字符串两种方式，如果是只有一个参数或者没有参数的函数，直接使用字符串设置即可，如果需要传入额外的参数，可以使用数组方式，例如：
// 采用date函数生成命名规则 传入Y-m-d参数
$upload->saveName = array('date','Y-m-d');
// 如果有多个参数需要传入的话 可以使用数组
$upload->saveName = array('myFun',array('__FILE__','val1','val2'));
如果需要使用上传的原始文件名，可以采用__FILE__传入，所以上面的定义规则，最终的结果是 myFun('上传文件名','val1','val2')执行的结果。
二、直接设置上传文件名
如果传入的参数不是一个函数名，那么就会直接当做是上传文件名，例如：
$upload->saveName = time().'_'.mt_rand();
表示上传的文件命名采用时间戳加一个随机数的组合字符串方式。
当然，如果觉得有必要，你还可以固定设置一个上传文件的命名规则，用于固定保存某个上传文件。
$upload->saveName = 'ThinkPHP';
三、保持上传文件名不变
如果你想保持上传的文件名不变，那么只需要设置命名规范为空即可，例如：
$upload->saveName = '';
一般来说不建议保持不变，因为会导致相同的文件名上传后被覆盖的情况。
子目录保存
saveName只是用于设置文件的保存规则，不涉及到目录，如果希望对上传的文件分子目录保存，可以设置autoSub和subName参数来完成，例如：
// 开启子目录保存 并以日期（格式为Ymd）为子目录
$upload->autoSub = true;
$upload->subName = array('date','Ymd');
可以使用自定义函数来保存，例如：
// 开启子目录保存 并调用自定义函数get_user_id生成子目录
$upload->autoSub = true;
$upload->subName = 'get_user_id';
和saveName参数一样，subName的定义可以采用数组和字符串的方式。
注意：如果get_user_id函数未定义的话，会直接以get_user_id字符串作为子目录的名称保存。
子目录保存和文件命名规则可以结合使用。
上传驱动
上传类可以支持不同的环境，通过相应的上传驱动来解决，默认情况下使用本地（Local）上传驱动，当然，你还可以设置当前默认的上传驱动类型，例如：
'FILE_UPLOAD_TYPE' => 'Ftp',
'UPLOAD_TYPE_CONFIG' => array(
'host' => '192.168.1.200', //服务器
'port' => 21, //端口
'timeout' => 90, //超时时间
'username' => 'ftp_user', //用户名
'password' => 'ftp_pwd', //密码 ),
表示当前使用Ftp作为上传类的驱动，上传的文件会通过FTP传到指定的远程服务器。
也可以在实例化上传类的时候指定，例如：
$config = array(
'maxSize' = 3145728,
'rootPath' = './Uploads/',
'savePath' = '',
'saveName' = array('uniqid',''),
'exts' = array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' = true,
'subName' = array('date','Ymd'),
);
$ftpConfig = array(
'host' => '192.168.1.200', //服务器
'port' => 21, //端口
'timeout' => 90, //超时时间
'username' => 'ftp_user', //用户名
'password' => 'ftp_pwd', //密码 );
$upload = new \Think\Upload($config,'Ftp',$ftpConfig);// 实例化上传类
目前已经支持的上传驱动包括Local、Ftp、Sae、Bcs、七牛和又拍云等。
如何优化Vue项目
这次给大家带来如何优化Vue项目，优化Vue项目的注意事项有哪些，下面就是实战案例，一起来看一下。Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式，这种方式开发中，最常用到的模式是开启代理进行 mock 调试或远程调试，也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项。它是采用了 http-proxy 库，所以具体配置可查看：https://github.com/nodejitsu/node-http-proxy#options利用配置的这些参数我们可以做更为灵活的配置，达到更好的效果使用需求假设我们本地开发目前以下几种状态：本地开发，数据使用本地的 mock Server涉及权限接口使用本地 mock 数据，其他全部使用指定的一台远程机器涉及权限接口使用本地 mock 数据，其他数据分接口使用不同的远程机器所有接口使用同一台远程机器方案先看下经典的proxyTable 写法：proxyTable: { '/authui/': { target: target, changeOrigin: true }, '/vendor/': { target: target, changeOrigin: true }}其中用到了 changeOrigin 字段，主要是用于改变请求的 header。细化下需求：本地开发：target 指向 localhost 的某个端口即可。至于 host 的验证肯定是不需要的部分本地，其他固定的一台远程机器：需要配置 localhost 和远程的地址，远程地址多半是需要验证 host 的同二，但机器有多台：需要手动配置多台机器同一台远程机器，此时机器可能要严格验证，即 IP 也必须使用域名，配置好系统 host 才可使用说明：严格验证 host 和普通验证 host 区别主要在于严格验证时，请求的 url 必须是远程机器的域名，不能直接修改请求的 header 的 host 实现，即必须在系统 host 层面配置好域名。分析完成具体需求好，就开始准备实现的方式。原有开发方式是执行 npm run dev，如果我们需要在命令行层面添加配置，就需要设置为 npm run dev --param=paramvalue 的方式。对于使用 npm 的 script 脚本执行的命令，它参数的获取无法通过 process.env 获得，而且通过 process.env.npm_config_paramName 的方式获取，使用现成的命令行参数解析库也不是很方便，但为了省事，暂时还是使用 npm 自带的解析。请求发起过程中需要以下几个参数：host: 发起请求需要指向的 host，可能每台机器验证并不相同port: 代理转发的端口receiver: 用于 push 的远程地址，内包含了 ip 地址，为了省事，没有单独列出 ip 地址然后定义代理请求自定义类型，用于配置：local: 本地地址，即 localhostremote: 指定的远程机器其他自定义类型：用于在配置文件中已经指定的其他类型原版本的请求，如 'http://xxx' 或者 Object 类型的配置，此类代理永不处理根据需要，我们添加以下几个参数用于控制代理指向地址：rd: 远程机器的地址focus: 严格模式，所有自定义类型的代理转换为指定的 rd 机器，只在存在 rd 参数时可用allLocal：自定义类型代理全部指向本地host：请求发现是否使用 host，而不是 IP 地址总结一下（序号指向前面的需求）：需要使用 host 进行访问的情形：4需要更改 host：除 localhost 外都需要更改需要对已有类型进行转换：1: 需要将所有自定义类型都转换为 local, 2和3：什么也不转换，4：所有的自定义类型全部转换为remote 类型这么一看，貌似 host 是不需要的，它的存在主要是针对某些 机器可能需要使用 host 的方式，所以还是保留一下。实现逻辑理清了就很简单了，配置文件设置为：module.export = { rd1: { host: 'dev1.example.com', port: 8838, receiver: 'http://1.1.1.1:8888/receiver' }, rd2: { host: 'dev2.example.com', port: 8838, receiver: 'http://1.1.1.1:8888/receiver' }}proxyTable 配置方式{ proxyTable: { '/api1': 'remote', '/api2': 'rd2', '/auth/xx': 'local', '/other': 'http://example.com' }}获取 proxyTable 的代码：// 处理 proxyTableconst releaseConfig = require('../config/release.conf.js')const rdConfig = releaseConfig[process.env.npm_config_rd]const isAllRemote = process.env.npm_config_focusconst useHost = isAllRemote || process.env.npm_config_host// 是否本机开发，本机开发 remote 会指向 localconst isAllLocal = process.env.npm_config_allLocalmodule.exports = function (proxy) { const localUrl = `http://localhost:${proxy.localProxyPort}` const defaultHost = proxy.defaultRdHost || 'dev-example.com' const localProxyPort = proxy.localProxyPort || 8787 const finalConfig = formatReleaseConfig(releaseConfig) const remote = finalConfig.remote || {} if (process.env.npm_config_rd) { if (!rdConfig) { throw new TypeError('RD 机器名称不存在，请在 config/release.conf.js 中进行配置') } if (!remote.ip) { throw new Error('请配置 rd 机器的 receiver') } } if (isAllRemote && !rdConfig) { throw new TypeError('focus 只能在提供了 rd 名称后可设置') } function formatReleaseConfig (config) { const result = {} Object.keys(config).map((key) => { const value = config[key] const ipMatch = (value.receiver || '').match(/:\/\/(.*?):\d/) const ip = ipMatch && ipMatch[1] result[key] = { ip, host: value.host || defaultHost, port: value.port || '8391' } }) // 设置 remote if (rdConfig) { const ipMatch = (rdConfig.receiver || '').match(/:\/\/(.*?):\d/) const ip = ipMatch && ipMatch[1] result.remote = { ip, host: rdConfig.host || defaultHost, port: rdConfig.port || '8391' } } // 设置 local result.local = { ip: 'localhost', host: 'localhost', port: localProxyPort } return result } function setProxy (proxyTable) { const result = {} Object.keys(proxyTable).forEach((api) => { let type = proxyTable[api] const isCustomType = typeof type === 'string' && !/^http/.test(type) if (isCustomType && type !== 'remote' && type !== 'local' && !finalConfig[type]) { throw new TypeError(`代理类型${type}不正确，请提供 http 或 https 类型的接口，或者指定正确的 release 机器名称`) } if (type === 'remote' && !finalConfig.remote) { type = 'local' } if (isCustomType) { if (isAllRemote && type !== 'remote') { type = 'remote' } if (isAllLocal && type !== 'local') { type = 'local' } } const targetConfig = finalConfig[type] let target = type if (targetConfig) { target = { target: `http://${useHost ? targetConfig.host : targetConfig.ip}:${targetConfig.port}`, // 使用 host 时需要转换，其他不需要转换 headers: { host: `${targetConfig.host}:${targetConfig.port}` } } } result[api] = target }) return result } return { proxyTable: setProxy(proxy.proxyTable), host: remote.host || defaultHost }}用法用法中需要配置两种指向：系统 host 和浏览器代理 Host。之所以要两种 host, 本质上是因为接口使用的域名和我们的本地访问的域名是相同的，同一域名无法指向两个地址，所以相当于对浏览器端进行了拦截。系统 host 推荐使用 switchHost 进行切换，浏览器推荐使用 whistle 进行切换。本地开发host 配置：无whistle 配置：默认的域名127.0.0.1 dev.example.com启动命令：npm run devnpm run dev --allLocal注： 此时 proxyTable 中配置的 remote 全部转换为 local，在 allLocal 参数时将所有自定义类型转换为 local本地 + 1 台远程host 配置：无whistle 配置：默认的域名127.0.0.1 dev1.example.com127.0.0.1 dev2.example.com启动命令：npm run dev --rd=rd1npm run dev --rd=rd1 --host注： --host 表示使用访问使用 host 而非 ip，使用时需要 host 地址本地 + n 台远程host 配置：无whistle 配置：默认的域名127.0.0.1 dev1.example.com127.0.0.1 dev2.example.com{ proxyTable: { '/api1': 'rd1', '/api2': 'rd2', '/auth/xx': 'local', '/other': 'http://example.com' }}proxyTable 配置：启动命令：npm run dev远程 1 台机器host 配置：1.1.1.1 dev1.example.com1.1.1.1 dev2.example.comwhistle 配置：默认的域名127.0.0.1 dev1.example.com127.0.0.1 dev2.example.com启动命令：npm run dev --rd=rd1 --focus组件优化vue 的组件化深受大家喜爱，到底组件拆到什么程度算是合理，还要因项目大小而异，小型项目可以简单几个组件搞定，甚至不用 vuex，axios 等等，如果规模较大就要细分组件，越细越好，包括布局的封装，按钮，表单，提示框，轮播等，推荐看下 Element 组件库的代码，没时间写这么详细可以直接用 Element 库，分几点进行优化?组件有明确含义，只处理类似的业务。复用性越高越好，配置性越强越好。?自己封装组件还是遵循配置 props 细化的规则。?组件分类，我习惯性的按照三类划分，page、page-item 和 layout，page 是路由控制的部分，page-item 属于 page 里各个布局块如 banner、side 等等，layout 里放置多个页面至少出现两次的组件，如 icon, scrollTop 等相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：redux-thunk实战项目案例详解如何使用Angular数据绑定机制
Vue项目优化
babel.config.js 通过if条件判断，只有在 production 阶段插件才会生效 通过命令行方式 通过可视化UI面板 运行 vue ui ->任务-> build 完成->分析 默认情况下，Vue项目的开发模式和发布模式共用同一个打包入口文件，即为 src/main.js 。为了将项目的开发过程和发布过程分离，可以指定两种打包入口 开发模式为 src/main-dev.js 发布模式为 src/main-prod.js 两中修改webpack配置的方式 configureWebpack 和 chainWebpack ，两者功能相同，只是使用方式不同， vue.config.js 默认情况下，import导入的第三方依赖会被打包进同一个文件，造成文件体积过大进而影响加载速度。通过配置 externals 结点将需要全局导入的第三方依赖排除在打包文件外，可以有效减少打包体积 声明方式为 依赖包名: 注册名称 。其中注册名称必须和引入CDN资源之后的挂载在 window 上的对象名字一致，可以使用 console.log(window) 打印这个对象的名称。如果注册名称所指定的对象在window上找不到，将导致白屏。此外，如果引入的CDN资源在window上的挂载的对象名类似 xx-xx-xx (不符合js对象命名规范)，这种资源不能通过CDN导入，只能用Import方式。 vue.config.js config.plugin('html') 使用 html 插件向模板中传递参数 css js 如果 isProd 为true，CDN资源才会被导入 只有在访问到该路由时对应的资源文件才会被加载，建议不要将每个路由单独打包，而是通过 webpackChunkName 为多个路由指定同一个打包文件，这样可以减少请求的次数 router/index.js 完整配置 vue.config.js main-prod.js 引入CDN后，将导入样式的语句注释或者删除，只保留导入JS的语句。
