微信小程序的图片上传及图片预览功能

本文为大家分享微信小程序的图片上传及图片预览功能，如下图所示：

需求分析：

图片上传可以从本地图库选择也可调用相机进行拍照上传
上传完成之后图片可以进行删除、预览等功能
图片上传至服务器进行后台调用

代码实现：

wxml文件

<view class="recovery_other_line"><view class="other_text">上传图片</view><view wx:if="{{imageList.length}}" class="choose_upload_view"><view wx:for="{{imageList}}" wx:key="index" class="choose_upload_item"><!-- 图片上传展示 --><image src="{{item}}" class="choose_upload_img" data-index="{{index}}" bindtap="previewBigImage"></image><!-- 删除按钮 --><image src="../../res/img/jdRecycleIcon/icon_remove.png" class="remove_img_icon" data-index="{{index}}" catchtap="removeChooseImage"></image></view></view><!-- 上传按钮 --><view class="other_right other_upload"><image src="../../res/img/jdRecycleIcon/icon_upload.png" class="upload_img" bindtap="chooseImageTap"></image></view>
</view>

js文件

import { baseUrl} from './../../utils/request.js'Page({data: {imageList: [],      // 上传图片集合form: {          // 用于其他功能提交的参数ossUrl: []}},// 选择上传图片的方式chooseImageTap() {let _this = this;wx.showActionSheet({itemList: ['从相册中选择', '拍一张'],itemColor: "#f7982a",success(res){if (!res.cancel) {if (res.tapIndex == 0) {// 从相册中选择_this.chooseWxImage('album')} else if (res.tapIndex == 1) {// 使用相机_this.chooseWxImage('camera')}}}})},// 选择图片chooseWxImage(type) {let _this = this;let imgs = this.data.imageList;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: [type],success(res) {if (imgs.length > 2) {return wx.showToast({title: '最多可上传三张图片',icon: 'none'})}_this.upload(res.tempFilePaths[0]);}})},//上传图片到服务器upload: function(path) {let _this = this;let {ossUrl} = this.data.form;console.log(ossUrl)wx.showToast({icon: "loading",title: "正在上传"}),//将本地资源上传到服务器wx.uploadFile({url: baseUrl,    // 开发者服务器地址filePath: path,   // 要上传文件资源的路径 (本地路径)name: 'editormd-image-file',   // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容header: {   // HTTP 请求 Header，Header 中不能设置 Referer"Content-Transfer-Encoding": "binary","Content-Type": "application/octet-stream","Content-Disposition": "form-data"},formData: {//和服务器约定的token, 一般也可以放在header中'token': wx.getStorageSync('userData').token,},success: function(res) {console.log(res)// 判断下if (res && res.data) {const data = JSON.parse(res.data);if (res.statusCode != 200) {wx.showToast({title: data.responseBody.data.message,icon: 'none'})return;} else {if (!!data.responseBody.data) {ossUrl.push(data.responseBody.data.url);_this.setData({imageList: ossUrl,'form.ossUrl': ossUrl  })}}}},fail: function(e) {wx.showToast({title: '上传失败',icon: 'none'})},complete: function() {wx.hideToast(); //隐藏Toast}})},// 删除图片removeChooseImage(e) {let imgs = this.data.form.ossUrl;let {index} = e.currentTarget.dataset;imgs.splice(index, 1);this.setData({'form.ossUrl': imgs,imageList: imgs})},// 预览图片previewBigImage(e) {let imgs = this.data.imageList;let {index} = e.currentTarget.dataset;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})}
})

css文件

.recovery_other_line {display: flex;line-height: 124rpx;align-items: center;justify-content: space-between;
}
.recovery_other_line .upload_img {width: 36rpx;height: 36rpx;
}
.recovery_other_line .other_text {width: 150rpx;font-size: 28rpx;color: #000;
}
.choose_upload_view {flex: 1;height: 100%;display: flex;align-items: center;justify-content: flex-end;
}
.choose_upload_item {margin-left: 38rpx;position: relative;width: 100rpx;display: flex;align-items: center;
}
.choose_upload_view .choose_upload_img {width: 100rpx;height: 100rpx;
}
.choose_upload_view .remove_img_icon {padding: 4rpx;position:absolute;top: -15rpx;right: -13rpx;width: 28rpx;height: 28rpx;border-radius: 50%;background-color: rgba(0, 0, 0, .5);
}
.other_upload {margin-left: 15rpx;width: 80rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。。。

微信小程序的图片上传及图片预览功能相关推荐

iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...
微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案参考文章: (1)关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案 (2)https://www.cnblog ...

微信小程序的图片上传及图片预览功能

微信小程序的图片上传及图片预览功能相关推荐

最新文章

热门文章