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

小程序图片上传及预览和删除

小程序图片上传及预览和删除

效果:

1,xhtml  

其中wx:for="{{picArr}}" 为所有的图片张数,  src 为img 的图片路径  ; 自定义data-src为当前点击的图片路劲(为预览做准备) 自定义 data-list为所有的图片张数(为预览做准备)

<block wx:key="imgbox" wx:for="{{picArr}}">
          <view class='add-pic'>
            <image class='add-pic' data-list='{{picArr}}' data-src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}"      src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" data-index="{{index}}" bindtap="picPreview"></image>
            <view class='img-de'  bindtap="deleteImg" data-index="{{index}}">
              <icon type="clear" size="20" />
            </view>
          </view>
 </block>

    //点击+号上传   样式自己写
        <view class='add-pic'>
          <view class='btn' bindtap='chooseImg'>+</view>
        </view>

2,JS

Page({
       data{
            urlPrev: serverInterface.urlPrev,  //urlPrev为接口ip地址  let serverInterface = require("../../utils/server.js");
            picArr: [ ],
            arrPicSave:[ ],
        }       
  })

// 上传图片
  chooseImg: function () {
    let that = this;
    wx.chooseImage({
      count: 9,
      sizeType: [],
      sourceType: ['album', 'camera'],
      success: function (res) {
        let tempFilePaths = res.tempFilePaths
        for (let i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: that.data.urlPrev + '/zdhx/WXA018/uploadTask',
            filePath: tempFilePaths[i],
            name: 'file',
            formData: {
            },
            success: function (res) {
              wx.hideLoading();
              let imgeList = that.data.picArr.concat(JSON.parse(res.data).entity);
              that.setData({
                picArr: imgeList
              });
            }
          });
          wx.showLoading({
            title: '正在上传...',
          })
        }
      },
      fail: function (res) {
        console.log(res, '失败');
      },
      complete: function (res) { },
    })
  },

  // 删除图片
  deleteImg: function (e) {
    let that = this;
    let index = e.currentTarget.dataset.index; 
    let images = that.data.picArr;
    images.splice(index, 1);
    that.setData({
      picArr: images
    });
  },
  // 图片预览
  picPreview: function (event) {
    let _this = this;
    let urlPrev = _this.data.urlPrev
    //  获取当前点击src,以及接口返回的所有src   就是xhtml里的data-src和data-list
    var src = event.currentTarget.dataset.src;
    var imgList = event.currentTarget.dataset.list;
    //  每次点击图片,先清空数组
    _this.setData({
      arrPicSave: []
    })
    //  遍历多少张图片,然后字符串转数组并添加到arrPicSave中
    for (var i = 0; i < imgList.length; i++) {
      var forEachData = urlPrev + '/zdhx/WXA018/getImg?name=' + imgList[i].nowURL.split(',')
      _this.data.arrPicSave.push(forEachData);
    }
    // 预览
    wx.previewImage({
      current: src,      //当前点击预览的图片
      urls: _this.data.arrPicSave   //供左右侧滑的所有图片
    })
  },


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

相关文章:

  • html上传图片并且预览
  • 微信小程序批量上传图片
  • 图片上传
  • 图片小程序
  • 微信小程序图片上传显示
  • vue图片上传预览
  • 小程序多张图片上传
  • 图片上传实现
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,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尋找肇事司機