微信小程序上传图片和文件

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

今天讲解一下微信小程序上传图片或者上传文件的步骤：

首先第一步我们要先在wxml页面文件中写入一个图标或者按钮，用来触发微信调起手机相册和拍照功能，供你选择图片

<image src="/static/images/addimg.png" bindtap="chooseImage"></image>

然后给这个图标或者按钮写上点击事件chooseImage（事件名称随意定义）

然后还需要写一个盒子，用来存放选择好的文件缩略图，缩略图上写上删除按钮，供删除，并且要实现点击缩略图展示大图的功能，下面是我写的整体内容

<view class="imgbox"><!-- 存放上传的图片的盒子 --><block wx:for="{{images}}" wx:key="this"><view class="add"><!-- 图片缩略图  --><image src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image><!-- 移除图片的按钮  --><view class="delete" data-idx="{{index}}" bindtap="removeImage">删除</view></view></block><image src="/static/images/addimg.png" bindtap="chooseImage"></image>
</view>

images: 是用来存放选择图片的数组，js定义

handleImagePreview：查看大图的点击事件

removeImage：删除已选择的图片的点击事件

下面是样式文件，可自由调整

.imgbox{width: 100%;min-height: 70rpx;display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;
}
.imgbox image{width: 70rpx;height: 70rpx;
}
.add{display: flex;flex-direction: column;align-items: center;margin-right: 20rpx;
}
.delete{font-size: 24rpx;color: #E60000;
}

然后是js文件：

Page({/*** 页面的初始数据*/data: {images: [],},//点击添加按钮选择图片chooseImage: function (e) {wx.chooseImage({sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片sourceType: ['album', 'camera'], //可选择性开放访问相册、相机success: res => {const images = this.data.images.concat(res.tempFilePaths)this.setData({images: images})}})},// 删除图片removeImage(e) {const idx = e.target.dataset.idx;this.data.images.splice(idx, 1);var del_image = this.data.images;this.setData({images: del_image})},// 查看大图handleImagePreview(e) {const idx = e.target.dataset.idxconst images = this.data.imageswx.previewImage({current: images[idx], //当前预览的图片urls: images, //所有要预览的图片})},
})

到此是已经完成了图片选择，删除，预览的功能

最后是上传：

需要注意的是，上传图片的时候只能单张上传，因此当我们选择了多张图片之后，需要分开一张一张的上传，因此需要写一个for循环。

点击上传按钮进行操作：

    var that = this;let images = this.data.imageslet img = []if (images.length > 0) {for (var i = 0; i < images.length; i++) {wx.getImageInfo({src: images[i],success(res) {wx.uploadFile({url: api.Cg_TousuUpload + '?session_id=' + wx.getStorageSync('session_id'), //上传图片接口地址filePath: res.path,name: 'wxfiles',formData: null,timeout: 60000,formData: { //这里面可以放一些后端要的其他参数},success: function (res) {if (JSON.parse(res.data).code == 'Y') {//上传成功之后，后端会返回你图片的线上地址，名称和一个idif (images.length == img.length) {//相等说明已经上传完毕}}},fail: function (error) {}})}})}}

这个是上传图片的步骤，上传附件跟上传图片大致类似，下面是上传附件的步骤

  // 文件上传chooseFile() {var that = thiswx.chooseMessageFile({count: 1,type: 'file',success(res) {var file = 'voucherData.matterapply_file'const tempFilePaths = res.tempFilesthat.setData({files: tempFilePaths})}})},// 删除文件removefile() {this.setData({files: []})},

我这里是只允许选择一张附件，如果要选择多个附件，参照图片功能即可，

还有就是wx.chooseMessageFile这个方法只允许选择微信里的文件，如果想上传手机里的文件，需要用微信发一下就能选到了

    var that = this;let files = that.data.filesif (files.length > 0) {wx.uploadFile({url: api.Cg_TousuUpload + '?session_id=' + wx.getStorageSync('session_id'), //上传附件接口地址filePath: res.path,name: 'wxfiles',formData: null,timeout: 60000,formData: { //这里面可以放一些后端要的其他参数},success: function (res) {if (JSON.parse(res.data).code == 'Y') {//上传成功之后，后端会返回你附件的线上地址，名称和一个id}},fail: function (error) {}})}

好了，就是这些，有问题咨询，希望能帮助到一些人吧！！！

微信小程序上传图片和文件相关推荐

微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
深入讲解微信小程序上传图片与JAVA后台的结合
背景微信小程序上传文件是微信小程序提供的API之一,如果用JAVA后台如何来处理上传的文件呢? 官方文档 UploadTask wx.uploadFile(Object object) 将本地资源上 ...

微信小程序上传图片和文件

微信小程序上传图片和文件相关推荐

最新文章

热门文章