微信小程序上传图片和文件
@Grapefruit 时间:2022-10-25
要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)
今天讲解一下微信小程序上传图片或者上传文件的步骤:
首先第一步我们要先在wxml页面文件中写入一个图标或者按钮,用来触发微信调起手机相册和拍照功能,供你选择图片
<image src="/static/images/addimg.png" bindtap="chooseImage"></image>
然后给这个图标或者按钮写上点击事件chooseImage(事件名称随意定义)
然后还需要写一个盒子,用来存放选择好的文件缩略图,缩略图上写上删除按钮,供删除,并且要实现点击缩略图展示大图的功能,下面是我写的整体内容
- <view hljs-string">"imgbox">
- <!-- 存放上传的图片的盒子 -->
- <block wx:for="{{images}}" wx:key="this">
- <view hljs-string">"add">
- <!-- 图片缩略图 -->
- <image src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
- <!-- 移除图片的按钮 -->
- <view hljs-string">"delete" data-idx="{{index}}" bindtap="removeImage">删除</view>
- </view>
- </block>
- <image src="/static/images/addimg.png" bindtap="chooseImage"></image>
- </view>
images:是用来存放选择图片的数组,js定义
handleImagePreview:查看大图的点击事件
removeImage:删除已选择的图片的点击事件
下面是样式文件,可自由调整
- .imgbox{
- > min-> display: flex;
- align-items: center;
- justify-content: flex-end;
- flex-wrap: wrap;
- }
- .imgbox image{
- > >}
- .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.idx
- const images = this.data.images
- wx.previewImage({
- current: images[idx], //当前预览的图片
- urls: images, //所有要预览的图片
- })
- },
- })
到此是已经完成了图片选择,删除,预览的功能
最后是上传:
需要注意的是,上传图片的时候只能单张上传,因此当我们选择了多张图片之后,需要分开一张一张的上传,因此需要写一个for循环。
点击上传按钮进行操作:
- var that = this;
- let images = this.data.images
- let 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') {
- //上传成功之后,后端会返回你图片的线上地址,名称和一个id
- if (images.length == img.length) {
- //相等说明已经上传完毕
- }
- }
- },
- fail: function (error) {}
- })
- }
- })
- }
- }
这个是上传图片的步骤,上传附件跟上传图片大致类似,下面是上传附件的步骤
- // 文件上传
- chooseFile() {
- var that = this
- wx.chooseMessageFile({
- count: 1,
- type: 'file',
- success(res) {
- var file = 'voucherData.matterapply_file'
- const tempFilePaths = res.tempFiles
- that.setData({
- files: tempFilePaths
- })
- }
- })
- },
- // 删除文件
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。