小程序选择、预览、删除、上传图片
BG7ZAG
|
|
3,200
|
6
|
程序开发

547 字
|
3 分钟

小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章：小程序上传图片及预览图片 ，还缺少一点功能，今天做了另一种删除删除样式，加上上传图片到服务器功能；

wxml

  1. <!-- 图片上传模块 -->
  2. <view class='upImage' wx:if="{{isImage}}">
  3.   <view class='upImage-list'>
  4.     <view class='image-li' bindtap='chooseImage'>
  5.       <view class='iconfont icon-xiangji'></view>
  6.     </view>
  7.     <view class='image-li' wx:for="{{imgs}}" wx:key="imgs">
  8.       <image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'></image>
  9.       <text bindtap='delImage' data-index='{{index}}'>删除</text>
  10.     </view>
  11.   </view>
  12.   <button bindtap='uploadImage'>上传图片</button>
  13. </view>

wxss

  1. /* 上传图片 */
  3. .upImage {
  4.   padding: 10px;
  5.   margin-top: 10px;
  6. }
  8. .upImage-list {
  9.   display: flex;
  10.   flex-wrap: wrap;
  11. }
  13. .image-li {
  14.   margin-right: 10px;
  15.   margin-bottom: 10px;
  16.   width: calc((100vw - 50px) / 4);
  17.   height: calc((100vw - 50px) / 4);
  18.   border: 1px solid #fff;
  19.   border-radius: 10px;
  20.   overflow: hidden;
  21.   position: relative;
  22. }
  24. .image-li:first-child {
  25.   display: flex;
  26.   align-items: center;
  27.   justify-content: center;
  28.   color: #eee;
  29. }
  31. .image-li:first-child view {
  32.   font-size: 100rpx;
  33. }
  35. .image-li:nth-child(4n) {
  36.   margin-right: 0;
  37. }
  39. .image-li image {
  40.   width: 100%;
  41.   height: 100%;
  42. }
  44. .image-li text {
  45.   position: absolute;
  46.   text-align: center;
  47.   bottombottom: 0;
  48.   left: 0;
  49.   width: 100%;
  50.   font-size: 24rpx;
  51.   background: rgba(0, 0, 0, 0.5);
  52.   color: #fff;
  53. }
  54. .upImage button{
  55.   background: rgba(0, 0, 0, 0);
  56.   color: #fff;
  57.   border: 1px solid #fff;
  58. }

JS

  1. data:{
  2.     imgs: [] , // 图片临时储存
  3. },
  4. /**
  5.    * 选择图片点击
  6.    */
  7.   chooseImage:function(){
  8.     let that = this;
  9.     wx.chooseImage({
  10.       // count: 1, // 默认9
  11.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  12.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  13.       success: function (res) {
  14.         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  15.         var tempFilePaths = res.tempFilePaths
  16.         let imgs = that.data.imgs;
  17.         for(let i =0; i < tempFilePaths.length; i++){
  18.           imgs.push(tempFilePaths[i])
  19.         }
  20.         that.setData({
  21.           imgs: imgs
  22.         })
  23.       }
  24.     })
  25.   },
  26.   /**
  27.    * 预览图片
  28.    */
  29.   previewImage:function(e){
  30.     let _index = e.currentTarget.dataset.index;
  31.     let list = this.data.imgs;
  32.     let current = list[_index];
  33.     wx.previewImage({
  34.       current: current, // 当前显示图片的http链接
  35.       urls: list // 需要预览的图片http链接列表
  36.     })
  37.   },
  38.   /**
  39.    * 删除图片
  40.    */
  41.   delImage:function(e){
  42.     let _index = e.currentTarget.dataset.index;
  43.     let previewImage = this.data.imgs;
  44.     console.log(previewImage)
  45.     previewImage.splice(_index, 1);
  46.     this.setData({
  47.       imgs: previewImage
  48.     })
  49.   },
  50.   /**
  51.    * 上传图片
  52.    */
  53.   uploadImage:function(e){
  54.     let imgs = this.data.imgs;
  55.     for (let i = 0; i < imgs.length; i++){
  56.     wx.uploadFile({
  57.       url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
  58.       filePath: imgs[i],
  59.       name: 'file',
  60.       formData: {
  61.         'user': 'test'
  62.       },
  63.       success: function (res) {
  64.         var data = res.data
  65.         //do something
  66.       }
  67.     })
  68.     }
  69.   },
上传图片小程序预览图片

评论

  1. TrojanSun
    Windows Chrome 64.0.3282.140
    6 年前
    2018-3-26 19:53:22

    大佬好厉害 原创的！ 支持。

    • 黄良钵
      博主
      TrojanSun
      Linux Chrome 63.0.3239.132
      6 年前
      2018-3-27 17:11:57

      你才是厉害！我这是菜鸟级别的

  4. taolaosan
    Android Chrome 57.0.2987.132
    6 年前
    2018-3-25 18:15:20

    请问如何增加搜索词条

    • 黄良钵
      博主
      taolaosan
      Windows Edge 16.16299
      6 年前
      2018-3-25 23:17:26

      什么？增加什么搜索词条？

  7. 善行法脉
    Windows Chrome 55.0.2883.87
    6 年前
    2018-3-22 15:09:43

    在国内用中文域名的还挺少的呢，博客很不错，和我用的一样模板。。。

    • 黄良钵
      博主
      善行法脉
      Linux Chrome 63.0.3239.132
      6 年前
      2018-3-22 15:25:06

      基本上没什么人用中文域名的 [嘻嘻]

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Vue使用websocket即时通信

							
							

							
vue修改打包文件的路径

							
							

							
微信小程序所有组件初始化样式box-sizing

							
							

							
字号与尺寸、像素对照表

							
							

							
微信小程序picker组件中多列选择器的使用

							
							

							
小程序多图上传并返回操作