微信原生实现一个简易的图片上传功能

一、实现原理

  1. wx.showActionSheet():显示操作菜单,选择是从相册选择还是相机拍摄照片
  2. wx.chooseImage():从本地相册选择图片或使用相机拍照。
  3. wx.uploadFile():将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。
  4. wx.previewMedia(): 预览图片和视频。

二、代码

upload.wxml

<view class="study-title">图片上传原理</view>
<view class="show-img-box">
    <view class="img-item-box" wx:for="{{imgList}}" wx:key="*this" data-src="{{item}}" data-src-list="{{imgList}}" bindtap="clickImg">
        <image class="img-item" src="{{item}}" />
    </view>
    <view class="upload" bindtap="chooseImgType">
        <view class="img-upload"></view>
    </view>
</view>

upload.wxss

/* pages/upload/upload.wxss */
.study-title {
  width: 100vw;
  margin: 50rpx 0;
  font-size: 40rpx;
  font-weight: 800;
  text-align: center;
}
.show-img-box {
  width: 600rpx;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.img-item-box {
  width: 184rpx;
  height: 184rpx;
  margin: 4px;
  background-color: #ccc;
}

.img-item {
    width: 184rpx;
    height: 184rpx;
}
.upload {
  margin: 4px;
  width: 184rpx;
  height: 184rpx;
  background: rgba(203, 224, 208, 0.5);
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-upload {
  width: 120rpx;
  height: 120rpx;
  background-image: url(https://pro-core.babycdn.com/2021/aosmith/lottery/images2020/watersystem/case/robot/img_upload.png);
  background-repeat: no-repeat;
  background-size: cover;
}

upload.js

// pages/upload/upload.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [],  // 由于没有可用的服务器域名,因此定义此数据用于展示上传的图片,以演示图片预览功能
    imgFilePaths: [], // 上传的图片存放路径,有可用的服务器域名用此数据渲染
    showSelect: false, // 是否显示选择框
    host: "https://5blog.com/Api", // 服务器域名,此处为错误域名
  },
  // 弹出操作菜单,选择获取图片的方式
  chooseImgType() {
    // 显示操作菜单
    wx.showActionSheet({
      itemList: ["从相册选择", "拍照"],
      success: (res) => {
        if (res.tapIndex == 0) {
          this.chooseImg("album");
        } else if (res.tapIndex == 1) {
          this.chooseImg("camera");
        }
      },
    });
  },
  // 选择图片
  chooseImg(type) {
    let { imgFilePaths } = this.data;
    wx.chooseImage({
      // 从本地相册选择照片或使用相机拍照
      count: 9, // 最多可以选择的图片张数, 默认9
      sizeType: ["original", "compressed"], // 所选图片的尺寸,默认原图和压缩图都可以
      sourceType: [type], // 选择图片的来源,默认相册和相机都可以
      success: async (res) => {
        // 接口调用成功的回调
        // console.log("res", res);
        // res.tempFilePaths是临时文件路径数组,数组内的元素可以直接作为src使用
        const tempFilePaths = res.tempFilePaths;
        this.setData({
          imgList: res.tempFilePaths,
        });
        let tempLength = 9 - imgFilePaths.length;
        let tempFilePaths_ = tempFilePaths.splice(0, tempLength);
        // 得到所有上传成功后的图片url组成的数组
        let imgUrlArr = await Promise.all(
          // 实现上传所有图片到服务器
          tempFilePaths_.map((item, index) => {
            // 返回每张图片的上传结果
            return this.updateImg(item, index);
          })
        );
        console.log("imgUrlArr", imgUrlArr);
        // 根据需求补充其他内容
      },
      fail: (err) => {
        console.log(type);
        // 接口调用失败的回调
        console.log("图片选取上传错误", err);
      },
      complete: () => {
        // 接口调用结束的回调(调用成功、失败都会执行)
      },
    });
  },
  // 实现将单张图片上传服务器,上传成功返回图片url,上传失败返回false
  updateImg(src, index = 0) {
    wx.showLoading({
      title: "上传中...",
      mask: true,
    });
    // 将本地资源上传到服务器接口,客户端发起一个post请求
    // 其中content-type为multipart/form-data
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: this.data.host + "/Attach/Index/upload", // 开发者服务器地址
        filePath: src, // 要上传文件资源的路径(本地路径)
        header: {
          "content-type": "multipart/form-data", // 默认值
        },
        name: "img", // 文件对应的key,开发者在服务端通过这个key获取文件的二进制内容
        formData: {
          // http请求中其他额外的form data
          type: "image",
          index: index,
        },
        // 上传成功的回调
        success: function (res) {
          console.log("res", res);
          if (res && res.data && !res.data.error) {
            let img = JSON.parse(res.data);
            resolve(img.data);
          } else {
            wx.showToast({
              title: "图片提交失败",
              icon: "none",
              duration: 1500,
            });
            resolve(false);
          }
        },
        complete: function (res) {
          wx.hideLoading();
        },
      });
    });
  },
  // 实现图片预览
  clickImg(e) {
    let src = e.currentTarget.dataset.src;
    let sources = e.currentTarget.dataset.srcList;
    console.log(sources);
    sources = sources.map((item) => {
      return {
        url: item, // 链接
        type: "image", // 默认类型是图片
      };
    });
    // 预览图片和视频接口
    wx.previewMedia({
      sources: sources,
    });
  },
});

三、效果演示

这里进行了真机调试以演示以上代码的实际运行效果。
此处选择了从相册选择
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/38967.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【微信小程序-uniapp】CustomDialog 居中弹窗组件

1. 效果图 2. 组件完整代码 <template><uni-popup :ref="ref" type="center" @change

编程小白的自学笔记十(python爬虫入门二+实例代码详解)

系列文章目录 编程小白的自学笔记九&#xff08;python爬虫入门代码详解&#xff09; 编程小白的自学笔记八&#xff08;python中的多线程&#xff09; 编程小白的自学笔记七&#xff08;python中类的继承&#xff09; 编程小白的自学笔记六&#xff08;python中类的静态方法…

一、音频基础-音频分析的重要工具(语谱图)

文章目录 1. 傅里叶转换2. 语谱图3. 应用1. 傅里叶转换 通过前面的描述可以知道,声音的本质就是各种声波,那么任意某一个时刻,都不可能是只有一个频率的波,而且声波也不可能是我们理解的标准的正弦波: 而一般我们对声音进行处理时,需要分析出频率当中的有哪些频率,然…

VScode 右键菜单加入使用用VSCode打开文件和文件夹【Windows】

VScode 右键菜单加入使用用VSCode打开文件和文件夹【Windows】 介绍修改注册表添加右键打开文件属性修改注册表添加右键打开文件夹属性修改注册表添加右键空白区域属性 介绍 鼠标右击文件或者文件夹&#xff0c;可直接用VSCode打开&#xff0c;非常方便。但如果我们在安装VSCo…

TypeScript 学习笔记(七):条件类型

条件类型 TS中的条件类型就是在类型中添加条件分支&#xff0c;以支持更加灵活的泛型&#xff0c;满足更多的使用场景。内置条件类型是TS内部封装好的一些类型处理&#xff0c;使用起来更加便利。 一、基本用法 当T类型可以赋值给U类型时&#xff0c;则返回X类型&#xff0c…

Vue 和 React 前端框架的比较

Vue 和 React 前端框架的比较 本文研究了流行的前端框架 Vue 和 React 之间的区别。通过对它们的学习曲线、视图层处理方式、组件化开发、响应式数据处理方式和生态系统及社区支持进行比较分析&#xff0c;得出了它们在不同方面的优劣和特点。该研究对于开发者在选择合适的前端…

Ceph简介及部署

Ceph Ceph一、存储基础1、单机存储设备2、Ceph 简介3、Ceph 优势5、Ceph 架构6、Ceph 核心组件7、OSD 存储后端8、Ceph 数据的存储过程9、Ceph 版本发行生命周期10、Ceph 集群部署 二、部署ceph-deploy Ceph 集群前环境配置1、关闭 selinux 与防火墙2、根据规划设置主机名3、配…

Cisco学习笔记(CCNA)——Introduction to TCP/IP

Introduction to TCP/IP 常见协议 应用层协议 协议 端口号 描述 HTTP 80 超文本传输协议&#xff0c;提供浏览网页服务 Telnet 23 远程登录协议&#xff0c;提供远程管理服务 FTP 20、21 文件传输协议&#xff0c;提供互联网文件资源共享服务 SMTP 25 简单邮件传…

【Go语言开发】简单了解一下搜索引擎并用go写一个demo

写在前面 这篇文章我们一起来了解一下搜索引擎的原理&#xff0c;以及用go写一个小demo来体验一下搜索引擎。 简介 搜索引擎一般简化为三个步骤 爬虫&#xff1a;爬取数据源&#xff0c;用做搜索数据支持。索引&#xff1a;根据爬虫爬取到的数据进行索引的建立。排序&#xf…

LayUI之增删改查

目录 一、前言 1.1 前言 1.2 前端代码(数据表格组件) 1.3 封装JS 二、LayUI增删改查的后台代码 2.1 编写Dao方法 2.1 增加 2.2 删除 2.3 修改 三、LayUI增删改查的前端代码 3.1 增加 一、前言 1.1 前言 上一篇文章我们一起做了LayUI的动态添加选项卡&#xff0c;这一篇…

【天工Godwork精品教程】天工3.1.7安装教程(附Godwork完整版下载地址)

本文讲解天工3.1.7安装过程(附Godwork完整版网盘下载地址)。 文章目录 一、天工3.1.7安装教程1. 安装GodWork-AT 3.1.72. 安装GodWork-AT 3.1.7补丁3. 安装GodWork-EOS-Setup-2017B-12314. 安装GodWork-EOS补丁5. 运行godwokr软件6. 生成ZC码7. 输入ZC码8. eos插件调用二、天…

【大数据之Hadoop】三十七、Hadoop HA高可用

1、HA概述 实现高可用最关键的策略是消除单点故障。HA分成各个组件的HA机制&#xff1a;HDFS的HA和YARN的HA。   Hadoop2.0之前&#xff0c;在HDFS集群中NameNode存在单点故障&#xff08;SPOF&#xff09;。 NameNode主要在以下两个方面影响HDFS集群&#xff1a; &#xff…

07-尚硅谷大数据技术之Spark源码

1. 环境准备&#xff08;Yarn 集群&#xff09; 搭建Spark on Yarn集群 3.3 Yarn 模式 独立部署&#xff08;Standalone&#xff09;模式由 Spark 自身提供计算资源&#xff0c;无需其他框架提供资源。这种方式降低了和其他第三方资源框架的耦合性&#xff0c;独立性非常强。但…

PyTorch训练RNN, GRU, LSTM:手写数字识别

文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集&#xff1a;MNIST 该数据集的内容是手写数字识别&#xff0c;其分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片 图片来源&#xff1a;https://tensornews.cn/mnist_intr…

每日一题2023.7.19|ACM模式

文章目录 C的输入方式介绍cin>>cin.get(字符变量名)cin.get(数组名,接收字符数目)cin.get()cin.getline() getline()gets()getchar() AB问题|AB问题||AB问题|||ABⅣAB问题ⅤAB问题Ⅵ C的输入方式介绍 参考博客 cin>> 最基本&#xff0c;最常用的字符或者数字的输…

TMS FlexCel for VCL FMX Crack

TMS FlexCel for VCL & FMX Crack 强大、广泛和灵活的组件套件&#xff0c;用于VCL和FireMonkey的本地Excel报告、文件生成和操作。 FlexCel for VCL/FireMonkey是一套允许操作Excel文件的Delphi组件。它包括一个广泛的API&#xff0c;允许本地读/写Excel文件。如果您需要在…

c#调用cpp库,debug时不进入cpp函数

选中c#的项目&#xff0c;右击属性&#xff0c;进入属性页&#xff0c;点击调试&#xff0c;点击打开调试启动配置文件UI&#xff0c;打开启用本机代码调试。

uniapp 集成七牛云,上传图片

1 创建项目 我是可视化创建项目的 &#xff0c;cli创建的项目可以直接使用npm安装七牛云。 2 拷贝qiniuUploader.js到项目&#xff0c;下面的回复 放了qiniuUploader.js百度云链接。 3 在需要使用qiniuUploader的vue文件 引入。 4 相册选择照片&#xff0c;或者拍照后&#xff…

工欲善其事,必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展 1、React Developer Tools &#xff08;主要用于debug组件结构) 2、Redux DevTools &#xff08;主要用于debug redux store的数据&#xff09; 对于react native应用&#xff0c;我们一般就使用react-nativ…

vue 项目优化

去除冗余的css 消除框架中未使用的CSS,初步达到按需引入的效果 使用背景&#xff1a;vue2.x, webpack3.x 使用插件&#xff1a;purifycss-webpack 安装&#xff1a; npm i purifycss-webpack purify-css glob-all -D安装后各个插件的版本&#xff1a; “glob-all”: “^3.3.…