功能的简述:

此web页面的开发依赖于微信小程序的http api接口,通过小程序http api的相关接口(auth.getAccessToken、uploadFile、databaseAdd),将本地图片通过web上传到云存储中

本地web页面使用了koa2的koa-generator,能够快速的搭建本地web环境(里面用到的几个模块:axios.min.js、request、request-promise、fs)

 

Node基础安装配置参考:https://www.cnblogs.com/liaojie970/p/9296177.html

启动web:命令提示符定位到项目文件夹下,执行:npm start

启动后通过localhost:3000来访问

 

1、安装Node.js

2、改变原有的环境变量(假设:node的安装路径D:\Program Files\nodejs)

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

使用koa2做一个简单的图片上传web

 

 执行完成后就可以看到红框里面的文件夹了。ps:cache是使用了npm install下载了包之后才会创建

3、在系统环境变量添加系统变量NODE_PATH,输入路径D:\Program Files\nodejs\node_global\node_modules,此后所有安装的模块通过npm install xxxx -g都会安装到改路径下(-g表示安装在global目录下)

4、在命令行输入以下命令试着安装express

npm install express -g

完成后再对应目录能看到express文件夹

使用koa2做一个简单的图片上传web

 

 5、在命令行输入node进入编辑模式,输入以下代码测试是否能正常加载模块:

require('./express')

如果这里出错,则要检查环境变量的配置看是否正确

6、安装淘宝npm(cnpm)

a、输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org

b、环境变量--添加用户变量

使用koa2做一个简单的图片上传web

c、打开cmd命令提示符  输入 cnpm -v   如果系统没有报错则说明配置OK了

7、安装 koa-generator

cnpm install koa-generator -g

8、创建网站目录(命令提示符进入到你想创建的目录下,默认是在c:盘的)

koa2 practice-cms -e

9、进入刚才创建的目录下执行以下命令,安装初始模块

cnpm i 

10、执行npm start,启动网站

npm start

成功后会在cmd命令提示符下显示使用koa2做一个简单的图片上传web

11、在浏览器输入localhost:3000  浏览网站

使用koa2做一个简单的图片上传web

 

 

12、下载vscode,打开刚才创建的practice-cms文件夹

   public文件夹是放一些静态资源的 里面的javascripts文件夹需要下载个axios.min.js文件,此文件可以发起ajax

   routes文件夹主要是路由
   views是前台页面展示

13、找到views目录下index.js,编辑内容为:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/axios.min.js"></script>
  </head>
  <body>
    <h1>交友-CMS</h1>
    <label for="">
      上传图片:<input type="file" >
    </label>

    <script>
      //获取上传控件的对象
      var uploadBtn = document.getElementById('uploadBtn');
      uploadBtn.onchange = function(e){
        var file = e.target.files[0];   //获取上传的文件
        var param = new FormData();     
        param.append('file',file);

        var config = {
          headers : {
            'Content-Type':'multipart/form-data'  //头部文件类型定义
          }
        };
        //调用后端uploadBannerImg接口,具体定义在routes文件夹下index.js内
        axios.post('/uploadBannerImg',param,config).then((res)=>{  

          console.log( res.data )

        });

      }
    </script>
  </body>
</html>
View Code

相关文章:

  • 2021-09-08
  • 2022-12-23
  • 2022-12-23
  • 2021-06-16
  • 2021-11-11
  • 2021-12-18
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-05-27
  • 2021-11-08
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案