微信小程序实现上传图片小功能

 更新时间:2022年08月28日 11:55:46   作者:花笙_  
这篇文章主要为大家详细介绍了微信小程序实现上传图片小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下

用到的api
wx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频

功能:点击上传图片,可多选,或者拍照上传;点击图片放大查看;长按图片删除

效果图

json里面引用weui的组件uploader

{
  "navigationBarTitleText": "评价工单",
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

wxml

<view class="weui-uploader">
     <view class="img-v weui-uploader__bd">
        <view class='pic' wx:for="{{technicianAssessPicture}}" wx:for-item="item" wx:key="*this">
            <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindlongpress="deleteTechnician" bindtap="previewTechnician">
            </image>
        </view>
        <view class="weui-uploader__input-box pic" bindtap="technicianImg"> </view>
     </view>
</view>

js

data:(){
    technicianAssessPicture: [], // 技师图片
}
// 上传技师图片
  technicianImg: function (e) {
    var that = this;
    var technicianAssessPicture = this.data.technicianAssessPicture;
    if (technicianAssessPicture.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseMedia({
      count: 9,   // 默认9
      mediaType: ['image','video'],   // 文件类型
      // image    只能拍摄图片或从相册选择图片    
      // video    只能拍摄视频或从相册选择视频
      
      // sizeType: ['original', 'compressed'],  //所选的图片的尺寸  original原图,compressed压缩图
      // 仅对 mediaType 为 image 时有效,是否压缩所选文件
      
      sourceType: ['album', 'camera'],  //图片和视频选择的来源
      maxDuration: 30,   //  拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 60s 之间。不限制相册。
      camera: 'back',    // 仅在 sourceType 为 camera 时生效,使用前置或后置摄像头
      //  back    使用后置摄像头;front    使用前置摄像头
      success: function (res) {
        var tempFilePaths = res.tempFiles;
        var technicianAssessPicture = that.data.technicianAssessPicture;
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (technicianAssessPicture.length >= 9) {
            that.setData({
              technicianAssessPicture: technicianAssessPicture
            });
            return false;
          } else {
            const tempFilePaths1 = tempFilePaths.map(v=>v.tempFilePath)
            //   tempFilePaths数据是json数组,我们需要的是普通数组需要处理一下
            technicianAssessPicture.push(tempFilePaths1[i]);
          }
        }
        that.setData({
          technicianAssessPicture: technicianAssessPicture
        });
        console.log(that.data.technicianAssessPicture, 'hhhhhhhhhhhhhhhhhhhhh');
      }
    });
  },

处理后打印出来的数据

预览,删除

// 预览图片
previewTechnician: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var technicianAssessPicture = this.data.technicianAssessPicture;
    wx.previewImage({
      //当前显示图片
      current: technicianAssessPicture[index],
      //所有图片
      urls: technicianAssessPicture
    })
  },

  // 长按删除
  deleteTechnician: function (e) {
    var that = this;
    var technicianAssessPicture = that.data.technicianAssessPicture;
    var index = e.currentTarget.dataset.index;    //   获取当前长按图片下标
    wx.showModal({
      // cancelColor: 'cancelColor',
      title: '提示',
      content: '确定要删除此图片吗?',
      success: function (res) {
        if (res.confirm) {
          console.log('确定');
          technicianAssessPicture.splice(index, 1);
        } else if (res.cancel) {
          console.log('取消');
          return false;
        }
        that.setData({
          technicianAssessPicture
        })
      }
    })
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript中的全局对象介绍

    JavaScript中的全局对象介绍

    这篇文章主要介绍了JavaScript中的全局对象介绍,对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用,需要的朋友可以参考下
    2015-01-01
  • JavaScript之Object类型介绍

    JavaScript之Object类型介绍

    这篇文章主要介绍了JavaScript之Object类型介绍,本文讲解了创建Object类型的两种方法以及访问Object类型的方法,需要的朋友可以参考下
    2015-04-04
  • 如何在js中动态修改元素的class属性

    如何在js中动态修改元素的class属性

    在JavaScript中动态修改CSS样式是一种常见的操作,它允许开发者根据不同的条件或者用户的交互来改变网页的外观,这篇文章主要介绍了如何在js中动态修改元素的class属性的相关资料,需要的朋友可以参考下
    2025-04-04
  • PHP配置文件php.ini中打开错误报告的设置方法

    PHP配置文件php.ini中打开错误报告的设置方法

    这篇文章主要介绍了PHP配置文件php.ini中打开错误报告的设置方法,需要的朋友可以参考下
    2015-01-01
  • 利用Javascript开发一个二维周视图日历

    利用Javascript开发一个二维周视图日历

    这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    这篇文章主要介绍了PhotoShop给图片自动添加边框及EXIF信息的JS脚本,本文给出效果图和实现代码,需要的朋友可以参考下
    2015-02-02
  • webpack4.x开发环境配置详解

    webpack4.x开发环境配置详解

    这篇文章主要介绍了webpack4.x开发环境配置方法,结合实例形式详细分析了webpack4.x的具体安装、项目创建、打包操作等相关问题与处理技巧,需要的朋友可以参考下
    2018-08-08
  • javaScript同意等待代码实现心得

    javaScript同意等待代码实现心得

    javaScript功能描述:本程序实现在同意某某协议页面对同意按钮进行十秒钟的禁用,同时在按钮的Value显示倒计时。
    2011-01-01
  • JS库particles.js创建超炫背景粒子插件(附源码下载)

    JS库particles.js创建超炫背景粒子插件(附源码下载)

    particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
    2017-09-09
  • JS中的6种打断点的方式实例总结

    JS中的6种打断点的方式实例总结

    断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了,下面这篇文章主要给大家介绍了关于JS中6种打断点方式的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论