微信原生小程序-图片上传回显（含组件封装详解）

已于 2024-05-17 15:41:48 修改
阅读量911 收藏 5
点赞数 5
文章标签： 微信小程序 小程序
于 2024-05-15 18:14:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73318685/article/details/138859564
版权

实现效果（如图所示）：点击上传=>弹出拍摄或从手机相册中选择图片或视频=>选择图片上传=>上传成功后回显图片。

文件梳理分析（注意点）：

  1. index文件表示当前页面文件，case-upload-item文件表示封装的组件文件
  2. 代码中有运用到组件传值这一知识点，基础薄弱的同学先等等，这几天我会抽时间出一个组件传值详细版，代码中已写注释，大概能看懂。
  3. 代码中的 Config.HOST 是当前项目中的浏览器地址，例如：http://www.example.com 大家在使用的时候把 Config.HOST 更换成自己项目中的地址即可
  4. 代码完整，包含布局样式和方法，可以直接拿去使用，除了第三点中的Config.HOST其它地方都不需要更改。文章最后附上代码中运用到的小程序自带方法详解
  5. 注释说明的公用方法可以放入项目中的untils内 （建议）

话不多说，直接上代码（index表当前页面文件）：

  • index.wxml
<view class="case-edit-upload-container">
  <view class="case-edit-upload-btn-item-container" bind:tap="onChooseImage">
    <view class="case-edit-upload">上传申请表</view>
  </view>
  <view wx:for="{{applications}}" wx:key="index">
    <case-upload-item case-upload-item-class="case-upload-item-class" fileLableImg="{{item.labelImg}}" fileName="{{item.name}}" fileUrl="{{item.url}}" bind:onDelete="onDeleteUploadFile"/>
  </view>
</view>
  • index.wxss
.case-edit-upload-container {
  margin-bottom: 200rpx;
}

.case-edit-upload-btn-item-container {
  flex: 1;
  height: 80rpx;
  border-radius: 100rpx;
  background: #CBB486;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 36rpx;
  margin: 0rpx 20rpx;
}

.case-edit-upload {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 组件暴露的css样式
.case-upload-item-class {
  margin-top: 30rpx;
}
  • index.ts
data:{
  //先在data 中定义
  applications:[]
}
// 图片上传
onChooseImage() {
  const _this = this;
  // 弹出拍摄或从手机相册中选择图片或视频
  wx.chooseMedia({
    // 最多可以选择的文件个数
    count: 9,
    // 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
    maxDuration: 60,
    success(res) {
      wx.showLoading({
        title: '上传中...',
      });
      let count = 0;
      // 本地临时文件列表
      const tempFilePaths = res.tempFiles;
      if (tempFilePaths.length > 0) {
        tempFilePaths.map((item) => {
          const { tempFilePath, size } = item;
          wx.uploadFile({
            // 这里的url代表服务器地址，这里要用完整的url，/index/uploadEvidence部分不是固定的，更换成自己项目的图片接口地址
            url: `${Config.HOST}/index/uploadEvidence`,
            // 要上传文件资源的路径 (本地路径)
            filePath: tempFilePath,
            // name的值可以自定义，代表文件对应的 key
            name: 'evidence',
            success: function (res) {
              // res.data 服务器返回的数据
              const _res = JSON.parse(res.data);
              if (_res.code === 200) {
                const { applications } = _this.data;
                applications.push({
                  name: tempFilePath,
                  url: _res.data.scr || '',
                  size: `${size}`,
                  labelImg: _this.getLabelImgForUploadItem(_res.data.scr),
                })
                _this.setData({ applications });
              } else {
                wx.showToast({
                  title: '部分文件不支持上传',
                  icon: 'none'
                });
              }
            },
            fail: function () {
              wx.showToast({
                title: '文件上传失败',
                icon: 'error'
              });
            },
            complete: function () {
              count++;
              if (count === tempFilePaths.length) {
                wx.hideLoading();
              }
            }
          })
        })
      }
    }
  });
},
// 删除当前图片
onDeleteUploadFile(e) {
    const { detail: { fileUrl } } = e;
    const { applications = [] } = this.data;
    applications.map((item,index) => {
      const { url } = item;
      if (url === fileUrl) {
        applications.splice(index, 1);
        return;
      }
    });
    this.setData({ applications})
},
// 获取当前文件格式 （公用方法）
getFileSuffix(filePath: string): string{
  const index = (filePath && filePath.lastIndexOf(".")) || -1;
  const suffix = filePath && filePath.substr(index + 1);
  return suffix;
},
// 文件路径格式用于展示（公用方法）
getLabelImgForUploadItem(filePath: string): string{
  const suffix = this.getFileSuffix(filePath) || '';
  if (['doc', 'docx'].indexOf(suffix) >= 0) {
    return '/public/img/icon-word.png';
  } else if (['xls', 'xlsx'].indexOf(suffix) >= 0) {
    return '/public/img/icon-excel.png';
  } else if (['ppt', 'pptx'].indexOf(suffix) >= 0) {
    return '/public/img/icon-ppt.png';
  } else if (suffix === 'pdf') {
    return '/public/img/icon-pdf.png';
  } else if (['png', 'jpg'].indexOf(suffix) >= 0) {
    return '/public/img/icon-image.png';
  } else if (suffix === 'mp3') {
    return '/public/img/icon-audio.png';
  } else if (suffix === 'mp4') {
    return '/public/img/icon-video.png';
  }
  return '/public/img/icon-other.png';
}
  • case-upload-item.wxml (组件)
<view class="case-upload-item case-upload-item-class" data-file-url="{{fileUrl}}" bind:tap="onUploadItemClick">
  <image class="case-upload-item-img" src="{{fileLableImg}}" />
  <view class="case-upload-item-name">{{fileName}}</view>
  <!-- 这里的mp-icon需要现在全局引入具体步骤放在下面 -->
  <mp-icon class="case-upload-item-delete" icon="close" size="{{20}}" data-file-url="{{fileUrl}}" wx:if="{{showDelete}}" catchtap="onDeleteUploadItem"></mp-icon>
</view>

mp-icon的引入（官网：WeUI组件库简介 | 微信开放文档）：

第一步：app.json 文件中写入：

  "useExtendedLib": {
    "weui": true
  },

第二步：在当前文件的json中引入即可，例如这里是case-upload-item.json

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}

case-upload-item.wxss (组件)

.case-upload-item {
  height: 80rpx;
  border-radius: 2rpx;
  background: #fff;
  border: 1rpx solid #D9D9D9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30rpx;
}

.case-upload-item-img {
  width: 40rpx;
  height: 48rpx;
}

.case-upload-item-delete {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0rpx 30rpx;
}

.case-upload-item-name {
  flex: 1;
  color: #000;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 44rpx;
  margin: 0rpx 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

case-upload-item.ts (组件)

Component({
  // 定义组件外部样式的属性， 将外部定义的 CSS 类名传递到组件内部
  externalClasses: ['case-upload-item-class'],
  properties: {
    fileLableImg: {
      type: String,
      value: '',
    },
    fileName: {
      type: String,
      value: '',
    },
    fileUrl: {
      type: String,
      value: '',
    },
    showDelete: {
      type: Boolean,
      value: true,
    }
  },
  methods: {
    // 查看当前文件或图片
    onUploadItemClick(e: any) {
      console.log('onUploadItemClick:', e)
      const { currentTarget: { dataset: { fileUrl } } } = e;
      // 获取当前图片类型
      const suffix = this.getFileSuffix(fileUrl);
      console.log('suffix:', suffix)
      if (['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx'].indexOf(suffix) >= 0) {
        wx.showLoading({
          title: '正在加载文件',
        })
        wx.downloadFile({
          // Config.HOST 代表项目中当前环境的地址，例如：https://www.baidu.com（这里是我从外部引入的，写自己项目环境即可）
          url: fileUrl.indexOf(Config.HOST) < 0 ? `${Config.HOST}${fileUrl}` : fileUrl,
          success: function (res) {
            const filePath = res.tempFilePath
            wx.openDocument({
              filePath: filePath,
              success: function (res) {
                console.log('打开文档成功:', res)
              },
              fail: function (err) {
                console.log('打开文档失败', err)
              }
            })
          },
          fail: function () {
            wx.showToast({
              title: '文件加载失败',
              duration: 2000
            });
          },
          complete: function () {
            wx.hideLoading()
          }
        });
      } else if (['png', 'jpg'].indexOf(suffix) >= 0) {
        wx.previewImage({
          current: fileUrl,
          urls: [`${Config.HOST}${fileUrl}`],
        });
      } else if (['mp4', 'mp3'].indexOf(suffix) >= 0) {
        wx.previewMedia({
          sources: [
            { url: fileUrl.indexOf(Config.HOST) < 0 ? `${Config.HOST}${fileUrl}` : fileUrl, type: 'video' }
          ],
        });
      }
    },
    //删除当前文件或图片，抛出当前url给父组件，并执行onDelete方法
    onDeleteUploadItem(e: any) {
      const { currentTarget: { dataset: { fileUrl } } } = e;
      this.triggerEvent('onDelete', { fileUrl });
    },
    // 获取当前文件类型 （公用方法）
    getFileSuffix (filePath: string): string {
      const index = (filePath && filePath.lastIndexOf(".")) || -1;
      const suffix = filePath && filePath.substr(index + 1);
      return suffix;
    }
  }
});

下面是代码中运用到的微信小程序自带方法的功能描述（附官网地址）：

爱敲代码的婷婷婷.
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发中的图片选择与上传
m0_72166538的博客
03-19 498
以上就是图片选择与上传的综合案例，通过点击按钮选择图片，然后再点击上传按钮完成图片上传。根据实际的需求，可以根据接口的返回值做相应的处理，比如显示上传进度、上传成功后的操作等。本文详细介绍了微信小程序开发中的图片选择与上传的实现方法，并提供了代码案例。微信小程序开发中的图片选择与上传是一个常见的功能需求，本文将详细介绍如何实现这个功能并提供代码案例。以上就是图片选择与上传的实现代码，下面我们将两者结合起来。可以选择一张或多张图片，并将选择的图片路径保存在。进行图片上传，上传成功后会弹出提示框。
微信小程序上传多图到服务器并获取返回的路径
10-17
主要介绍了微信小程序上传多图到服务器并获取返回的路径，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序自定义图片上传组件
花铛
11-22 1573
【代码】微信小程序自定义图片上传组件。
微信小程序 tdesign图片上传组件 上传到服务器
qq_21861771的博客
06-08 828
最近手上的项目遇到了这个问题 也给大家分享一下。
小程序基本命令
aiven1637的博客
10-30 3252
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序自研图片上传组件
liushihao_的博客
06-14 349
微信小程序自研图片上传组件，支持图片上传 + 回显，上传成功后自动弹出下一个上传区域 ，组件化拿来即用，组件会将上传结果返回给父组件
微信小程序图片上传组件
weixin_55969138的博客
06-06 435
自定义的微信小程序图片上传组件，好看，实用，通过自定义事件来获取组件上传完成后的url
微信小程序：封装上传图片组件
yours1998的博客
11-30 684
微信小程序上传图片组件
微信小程序---弹窗封装（组件）
08-02
1、为了统一展示弹窗页面，封装成了一个组件 2、功能：可以自定义“取消”“确定”按钮文案，可以自定义是否显示单个按钮或多个按钮，可以调用相应方法即可进行相应的js执行 3、方便快捷，下载直接放进组件里面，...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序-微信小程序上传图片组件源码及demo
08-05
小程序上传图片示例组件 这是一个上传图片示例组件，目的在于展示如何在小程序中编写组件，请不要一点代码都不改直接拿来用于生产环境哦。 组件的关键设计思路，请看这篇文章 使用方法和注意事项 因为本组件有大量 ES6 语法，请先勾选小程序开发工具中的“开启 ES6 转 ES5 ”选项 先在页面的 wxml 文件中引入本组件模板，下面的代码实例化了两个组件实例。 img1 与 img2 分别是两个实例的 key ，请确保同一个页面中不同实例的 key 不一样 ： <!--index.wxml--> - 然后在页面的 js 文件中，先引入组件的类，定制各个组件的初始数据，然后实例化，与上面的代码对应的写法如下： //index.js const ImageUploader = require('../common/image_uploader/image_uploader.js'); Page({ data: { img1: ImageUploader.mergeData({ imageUploadTitle: '定制标题1',//组件的标题 sourceType: ['camera
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序系列----有三十个微信小程序的组件应用和实际开发的一些DEMO！
微信小程序-微信小程序--健康菜谱小程序项目源码-原生开发框架-含效果截图示例.zip
最新发布
05-27
小程序不仅拥有近似原生App的用户体验，还完美支持微信生态内的社交功能，如微信支付、公众号关联等，为用户提供一站式服务。 微信小程序-项目源码-原生开发框架 源码特色： 原生体验：基于微信原生框架开发，流畅...
微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）
07-28
1、该瀑布流已经封装成组件，直接调用即可使用，方便简单快捷。 2、适用于直播、图片、文章展示等。 3、里面包含：组件、图片效果展示、使用方法。
微信小程序原生上传图片封装
weixin_45947191的博客
11-24 761
微信小程序原生图片上传组件
微信小程序实现图片上传（清晰版）
热门推荐
qq_42044542的博客
03-20 1万+
【代码】微信小程序实现图片上传（清晰版）
微信小程序图片视频上传
weixin_47106572的博客
05-20 504
1,图片上传功能 picUpload.wxml <!-- 上传 S --> <view class="img-list"> <!-- 上传列表 --> <block wx:for="{{imgList}}" wx:key="index"> <view class="img-li"> <view class="img-li" bindtap="previewImg"> &lt
微信小程序：保存图片函数封装
a11222335658945的博客
05-18 154
1.具体思路：第一步：先封装下载图片函数。
微信小程序 ---- 组件应用和实际开发的demo
05-11
微信小程序是一种基于微信平台的应用的开发模式，可以快速的开发出符合用户需求的小程序。在小程序的开发中，组件是一个非常重要的概念，通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来，使得组件可以在不同的页面间得到复用，大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件，包括文本、图片、按钮、输入框等等，开发者也可以自己开发组件来满足自己的需求。实际开发中，通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程中，一个好的Demo非常重要。通过Demo，开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo中，通常会包括小程序的一些基础操作，如页面跳转、数据绑定、组件的使用等。而在实际开发中，Demo还会包括一些复杂的业务场景，如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会，也方便了使用者了解该小程序的功能和特点。 总之，微信小程序组件的应用和Demo的开发都是小程序开发过程中非常重要的两个部分。良好的组件应用和精心设计的Demo，可以在极短的时间内实现小程序开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值