小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。这是关于小程序的数据本地存储进一步的认识，比如很多图片和视频旅行。

微信小程序

有时候的需求就是不单单只是保存到你自己的手机上就可以了，要考虑到多场景的应用。还有文件的内容广度上也要拓展。
那么这就需要一些准备工作，比如服务器，使用Nodejs来实现服务器的东西，至于API主要是官方的wx.uploadFile(obj)

1 2	npm install express npm install formidable

Node-server文件

var express = require('express');
//处理post需要引入这个中间件,处理的是form-data
var formidable = require('formidable');
var fs = require('fs');
var app = express();

// 处理静态资源
app.use(express.static('./'));
// 处理post的form-data 类型

app.post('/postformdata',function (req,res) {
    var form = new formidable.IncomingForm(); // 输入流
    form.encoding = 'utf-8';
    form.uploadDir = 'upload'; //这里设置上传目录
    form.parse(req,function(err,fields,files){ // 这里解析请求
        if (err) {
            res.send(err);
            return;
        }
        var avatarName = Date.now() + '.jpg'; // 以时间作为名字
        var newPath = form.uploadDir + avatarName;
        fs.renameSync(files.my_upload.path,newPath); // my_upload是前端设置的name，把图片储存下来并且重新命名
        res.send({
            code:200,
            path:'http:localhost:9998/'+newPath
        })
    })
})
app.listen(9998); // 监听端口

Num 1

第一个例子，选择本地图片，然后保存到服务器，上传成功之后可以看到缩略图，但是点击每一张图片又可以幻灯片式预览。

在upload文件目录下操作

<!--pages/upload/upload.wxml-->
<view class='container'>
  <button type='primary' bindtap='uploadImg'>上传图片</button>
    <view class="imginfo" wx:for="{{imglist}}" wx:for-index="id" wx:for-item="item">
      <image src='{{item}}' bindtap='previewImg' data-imgid="{{id}}" class='myimg'></image>
    </view>
</view>


/* pages/upload/upload.wxss */
.imginfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.myimg{
  width: 70px;
  height: 70px;
  border:1px solid #ccc;
}

// pages/upload/upload.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgList:[] // 图片列表
  },
  // 上传图片
  uploadImg:function(){
    var that = this;
    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: 'http://localhost:9998/postformdata', //nodeJS数据接口
          filePath: tempFilePaths[0],
          name: 'my_upload',//这个前后台名称需要保持一致，别乱写。
          formData: {
            'user': 'test'
          },
          success:function(res){
            var data = JSON.parse(res.data);//返回来的是字符串格式。
            var arr = that.data.imgList;
            arr.push(data.path);
            that.setData({ imgList: arr });//只有这种方式才能更新视图
            console.log(that.data.imgList);
            wx.showToast({
              title: '文件上传成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },
  //预览图片
  previewImg: function (e) {
    var index = e.target.dataset.imgid;//获取图片的id
    var that = this;
    console.log(index);
    wx.previewImage({
      current: that.data.imgList[index],//当前的图片
      urls: that.data.imgList // 需要预览的图片http链接列表
    });
  },

以上就是不要的步骤。