当前位置: 首页>編程日記>正文

微信小程序图片上传并移除

微信小程序图片上传并移除

微信小程序图片上传

ps: 最近项目使用到图片上传, 通过api中 wx.chooseImage(Object object)wx.uploadFile实现

需求:

  1. 最多上传3张图片,当第三张图片时,添加按钮隐藏, 反之显示
  2. 每添加一张图片时,显示删除icon, 实现删除功能

文章目录

    • 微信小程序图片上传
      • 官方API
      • 效果图
      • 1. 选择图片并上传到服务器
        • `选择图片`返回数据效果图
        • `上传到服务器`数据效果图
      • 2. 提交事件
        • `提交图片`请求效果图
      • 3. 删除图片
      • 4. wxml
      • 5. wxss

官方API

wx.chooseImage(Object object)

wx.uploadFile(Object object)

效果图

在这里插入图片描述

1. 选择图片并上传到服务器

这里选择每张图片时,上传到服务器,最后把图片的地址提交给后端。

  • 通过wx.chooseImage选择图片或拍照,回调成功后把返回图片数据保存。然后在wx.uploadFile时作为参数传入资源的路径
  • 使用wx.uploadFile将本地资源上传到服务器回调成功后把返回的path字段存在到一个数组中。
  • 最后: 把数组里的图片path及其他内容一起提交给后台。(案例中以逗号分隔格式)。

选择图片返回数据效果图

wx.chooseImage返回数据

在这里插入图片描述

上传到服务器数据效果图

wx.uploadFile请求接口返回数据

在这里插入图片描述

 /*** 页面的初始数据*/
data: {hideAddImg: false, //隐藏添加按钮图片files: [],uploadImgArr: [],
},/*** 上传图片事件*/
chooseImage: function (e) {var that = this;wx.chooseImage({sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片//console.log(res);that.setData({files: that.data.files.concat(res.tempFilePaths[0])});//console.log(res.tempFilePaths[0]);//大于3张, 隐藏 添加按钮if(that.data.files.length >= 3) {that.setData({hideAddImg: true})}// 将本地资源上传到服务器//备注: 每选择一张图片上传到服务器,并保存在数组中。提交时:把数组数据上传var token = wx.getStorageSync('Authorized-Token') || ''wx.uploadFile({url: http.rootDocment +'user/upload-img',filePath: res.tempFilePaths[0],name: 'img',header:{'Authorized-Token': token,'content-type':'multipart/form-data'},success(res) {var infoData = JSON.parse(res.data);if (infoData.code==200){// 保存返回的 图片路径that.setData({uploadImgArr: that.data.uploadImgArr.concat(infoData.data.path)});}else{//操作失败}}})}})
},

2. 提交事件

/*** 提交事件*/
repairsSubmit: function() {var that = this;//省略  非空判断var params = {mini_img: that.data.uploadImgArr.join(","),}http.postReq('order/repair', params, function (res) {if (parseInt(res.code) == 200) {//提交成功}else{//失败}})
},

提交图片请求效果图

在这里插入图片描述

3. 删除图片

/*** 删除图片 事件*/
removeImg: function(e) {var that = this;var index = e.currentTarget.dataset.index;//console.log(that.data.files.splice(index, 1))//小于 3张时, 添加按钮显示if(that.data.files.length <= 3) {that.setData({hideAddImg: false})}that.data.files.splice(index, 1);that.data.uploadimgarr.splice(index, 1);that.setData({files: that.data.files,uploadimgarr: that.data.uploadimgarr})
},

4. wxml

<view class="uploadImgBox"><view class="desc">请拍摄相关的图片,便于工作人员维修</view><view class="clearfix imgList"><!-- 遍历数组 --><view wx:for="{{files}}" wx:key="*this" wx:for-index="bindIndex"><view class="item"><image src="{{item}}" mode="aspectFill"></image><!-- 删除icon 自定义属性 拿当前下标--><view class="removeBtn" bindtap="removeImg" data-index="{{bindIndex}}"><image src="/libs/assets/images/icon/del.png" mode="aspectFill"></image></view></view></view><!-- 添加图片按钮 --><view><view class="item addImg" bindtap="chooseImage" hidden="{{hideAddImg}}"><image src="/libs/assets/images/icon/addImg.png" mode="aspectFill"></image></view></view></view>
</view>

5. wxss

在项目中配置scss自动编译wxss

可参考这个配置流程

.uploadImgBox {.desc {@include sc(13px, #edb353);height: 57rpx;@include fc;background-color: #f9f3e8;padding-left: 35rpx;}.imgList {margin: 31rpx 26rpx 31rpx 5rpx;>view {display: inline-block;float: left;padding-left: 29rpx;.item {@include wh(210rpx, 210rpx);position: relative;.removeBtn {position: absolute;right: 0rem;top: 0rem;@include wh(50rpx, 50rpx);i {font-size: 20px;position:  absolute;right: 0;top: -1px;color: #000;opacity: .5;}image {@include wh(100%, 100%);@include borderRadius(0 11rpx 0 0);}}image {@include wh(100%, 100%);@include borderRadius(11rpx);}}.addImg {// @include fcc;// border: 1px dashed #aaa;// img {//     @include wh(.84rem, .72rem);// }}}}
}


https://www.fengoutiyan.com/post/16172.html

相关文章:

  • 怎么把小程序码放在图片上
  • 小程序照片怎么弄出来
  • 如何将照片传到一个小程序
  • 小程序怎么添加在图片上
  • 小程序怎么更改图片
  • 怎么获取小程序里的图片
  • 微信小程序删了怎么恢复
  • 微信上传图片
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,C#圖片處理 解決左右鏡像相反(旋轉圖片)
  • 手機照片鏡像翻轉,C#圖像鏡像
  • 視頻鏡像翻轉軟件,python圖片鏡像翻轉_python中鏡像實現方法
  • 什么軟件可以把圖片鏡像翻轉,利用PS實現圖片的鏡像處理
  • 照片鏡像翻轉app,java實現圖片鏡像翻轉
  • 什么軟件可以把圖片鏡像翻轉,python圖片鏡像翻轉_python圖像處理之鏡像實現方法
  • matlab下載,matlab如何鏡像處理圖片,matlab實現圖像鏡像
  • 圖片鏡像翻轉,MATLAB:鏡像圖片
  • 鏡像翻轉圖片的軟件,圖像處理:實現圖片鏡像(基于python)
  • canvas可畫,JavaScript - canvas - 鏡像圖片
  • 圖片鏡像翻轉,UGUI優化:使用鏡像圖片
  • Codeforces,CodeForces 1253C
  • MySQL下載安裝,Mysql ERROR: 1253 解決方法
  • 勝利大逃亡英雄逃亡方案,HDU - 1253 勝利大逃亡 BFS
  • 大一c語言期末考試試題及答案匯總,電大計算機C語言1253,1253《C語言程序設計》電大期末精彩試題及其問題詳解
  • lu求解線性方程組,P1253 [yLOI2018] 扶蘇的問題 (線段樹)
  • c語言程序設計基礎題庫,1253號C語言程序設計試題,2016年1月試卷號1253C語言程序設計A.pdf
  • 信奧賽一本通官網,【信奧賽一本通】1253:抓住那頭牛(詳細代碼)
  • c語言程序設計1253,1253c語言程序設計a(2010年1月)
  • 勝利大逃亡英雄逃亡方案,BFS——1253 勝利大逃亡
  • 直流電壓測量模塊,IM1253B交直流電能計量模塊(艾銳達光電)
  • c語言程序設計第三版課后答案,【渝粵題庫】國家開放大學2021春1253C語言程序設計答案
  • 18轉換為二進制,1253. 將數字轉換為16進制
  • light-emitting diode,LightOJ-1253 Misere Nim
  • masterroyale魔改版,1253 Dungeon Master
  • codeformer官網中文版,codeforces.1253 B
  • c語言程序設計考研真題及答案,2020C語言程序設計1253,1253計算機科學與技術專業C語言程序設計A科目2020年09月國家開 放大學(中央廣播電視大學)
  • c語言程序設計基礎題庫,1253本科2016c語言程序設計試題,1253電大《C語言程序設計A》試題和答案200901
  • 肇事逃逸車輛無法聯系到車主怎么辦,1253尋找肇事司機