首页 > 编程语言> 文章详细

[小程序]-使用Weui-wxss进行图片上传

2020-03-19 18:53:53 阅读：392 来源： 互联网

标签：weui images Weui https test wxss 上传

小程序版weui下载地址：https://github.com/Tencent/weui-wxss

由于在蔷内，从https://gitee.com/ekber/weui-wxss/repository/archive/master.zip下载的

１、将解压出的weui-wxss\dist\style下面的weui.wxss复制到小程序项目根目录下（云开发项目是复制到miniprogram下面）。

２、到此引入步骤还没结束，要在项目中使用，还需要在全局app.wxss中加入@import "weui.wxss"，至此完成引入

从GitHub上下载的weui文件夹里除了我们要使用的weui.wxss文件，还有一个很重要的文件夹，那就是example文件，可以查看学习。

微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示。可以直接在chrome浏览器中用Ｆ12查看

３、在小程序app.json的pages字段第一行增加："pages/test/test" ,

开发工具会自动生成test目录及test.js test.wxml等４个文件

3.1　修改test.wxml如下：

<view class="page__bd">
       <view class="weui-cells">
           <view class="weui-cell">
               <view class="weui-cell__bd">
                   <view class="weui-uploader">
                       <view class="weui-uploader__hd">
                           <view class="weui-uploader__title">图片上传</view>
                           <view class="weui-uploader__info">{{images.length}}/9</view>
                       </view>
                       <view class="weui-uploader__bd">
                           <view class="weui-uploader__files" id="uploaderFiles">
                               <block wx:for="{{images}}" wx:key="*this">
                                   <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                       <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                   </view>
                               </block>
                           </view>
                           <view class="weui-uploader__input-box">
                               <view class="weui-uploader__input" bindtap="chooseImage"></view>
                           </view>
                       </view>
                   </view>
               </view>
           </view>
       </view>
   </view>
<button bindtap="uploadImg">确定上传图片</button>

3.2　test.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    images: [],//临时图片地址
  },
 
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        })
    
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.images // 需要预览的图片http链接列表
    })
  }
  
})

在开发工具中，Ctrl+S,可以查看效果了。

后续可根据参考[3]，用wx.cloud.uploadFile上传。

参考：

[１]https://www.cnblogs.com/jing-zhe/p/11000971.html

[２]http://blog.fishnet.tech/2018/11/20/asda/

[３]https://blog.csdn.net/m0_45329584/article/details/101149476

……

标签：weui,images,Weui,https,test,wxss,上传
来源： https://www.cnblogs.com/pu369/p/12526441.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

[小程序]-使用Weui-wxss进行图片上传