读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

微信小程序上传图片

2020年06月18日 203点热度 0人点赞 0条评论

wxml:

  <view class="certificatedetails-item color2E width591 padding3050" hidden="{{hide}}">
    <view>拍照上传存证</view>
    <!-- 上传图片预览 -->
    <view class="preview">
      <block wx:for="{{images}}">
        <view class="item-con">
          <image src="{{item}}"></image>
          <text class="delete" data-index="{{index}}" bindtap="delate">x</text>
        </view>
      </block>
      <view class="addImg" bindtap="addImagefunction">+</view>
    </view>
    <view class="imageNum">{{images.length}}/5</view>
  </view>

添加图片

  addImagefunction() {
    var evalList = this.data.images;
    var that = this;
    var imgNumber = evalList;
    if (imgNumber.length >= 5) {
      wx.showModal({
        title: '',
        content: '最多上传五张图片',
        showCancel: false,
      })
    }
    wx.showActionSheet({
      itemList: ["从相册中选择", "拍照"],
      itemColor: "#2e8fce",
      success(res) {
        console.log(res.tapIndex)
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseImage("album");
          } else if (res.tapIndex == 1) {
            that.chooseImage("camera");
          }
        }
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },
  //选择图片
  chooseImage: function(type) {
    console.log(type);
    const that = this;
    wx.chooseImage({
      count: 5,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: res => {
        const selectImg = that.data.images.concat(res.tempFilePaths);
        console.log(util.unique(selectImg))
        let maximages = ""
        if (selectImg.length <= 5) {
          maximages = selectImg
        } else {
          maximages = selectImg.slice(0, 5);
          wx.showToast({
            title: '最多只能上传5张图片',
          })
        }
        maximages.forEach((item) => {
          console.log(item)
        })
        that.setData({
          images: maximages
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },
    //删除图片
  delate: function(e) {
    console.log(e); 
    const index = e.target.dataset.index;
    const images = this.data.images;
    images.splice(index, 1)
    this.setData({
      images: images
    })
  },
wx.showActionSheet 显示操作菜单

其实不用操作菜单也可以,会默认从sourceType第一个开始。如:

['album', 'camera']

默认是从文件中选择图片

上传图片:

upLoadImg:function(){
    wx.showToast({
        icon: "loading",
        title: "正在上传"
    })
    const that = this;
    that.data.images.map((path) => {
        wx.uploadFile({
            url: "*****",
            header: {
                "Authentication": wx.getStorageSync("header"),
                "Content-Type": "application/form-data"
            },
            filePath: path,
            method: "POST",
            name: 'file',
            success(res) {
            //上传成功后,后端返回图片的地址
                arr.push(JSON.parse(res.data).payload)
                    that.setData({
                        uploadImg: arr,
                        uploadImgSucc: true,
                    })
                }
            });
    })
    
}
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
react Echarts 阅读 mysql JavaScript flutter taro vue Nginx 悦读 CSS 小程序 redux hook canvas git 随笔 node 闲谈
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. 微信小程序前端解密获取用户信息
  3. 小程序全局和局部自定义导航栏样式
  4. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号