9、微信小程序--多文件上传（使用lin ui）

前言：微信多图片上传的思想是：

        选择图片，每选择一张图片，将图片的临时路径存入数组。阅览图片从数组循环展示，提交内容时遍历图片数组。点击一次发布，循环数组元素，每遍历一次发起一次请求（图片数量=请求数量）。后台读取临时路径取出绝对路径上传到 本地框架内或者云存储中，将云存储的回调存入数据库。

一、安装lin ui

lin ui 入门文档（仔细阅读）

快速开始 | Lin UI (talelin.com)

二、使用lin ui组件

在自己的的json文件里引入组件

{
  "usingComponents": {
    "l-image-picker":"/miniprogram_npm/lin-ui/image-picker/index"
  }
}

 三、wxml

        组件内容： 图片选择器 ImagePicker | Lin UI (talelin.com)

<!-- form表单 -->
<form bindsubmit="submit">
  <textarea name="content" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>

  <!-- lin ui 组件内容 -->
  <l-image-picker count="9" size-type="compressed" bind:linchange="onChangeTap" />

  <button form-type="submit">发布</button>
</form>

wxjs

Page({

  data: {
    //存储图片的数组
    upload:[]
  },
    
//添加到图片数组中
  onChangeTap(e){
    this.setData({
      upload:e.detail.all
    })
   
  },
    
    //提交图片内容到后台
    submit(e){
    //获取要发布的文字内容
    let content = e.detail.value.content;
    //获取选中好的图片
    let upload = this.data.upload;
    //遍历图片数组  item 为数组的元素    
    upload.map(item=>{
      wx.uploadFile({
        url: 'http://0719.com/api/article/uploadeImg', //仅为示例，非真实的接口地址
        filePath: item,
        name: 'file',
        formData: {
          content: content
        },
        success (res){
          const data = res.data
          //do something
        }
      })
    })
  },
}

四、官方参数

图片选择器 ImagePicker | Lin UI (talelin.com) 

count   :选择的图片张数，默认是9张，没有最大张数的限制。

size：每行图片的数量，默认是3张，可选值为 1 - 10。

通过 size-type可以设置图片来源，可选值是 original/compressed，或者二者均填，默认是 ['original', 'compressed']。

• original表示原图。
• compressed表示缩略图。

  <l-image-picker count="9" size-type="compressed" />

图片选择器属性

参数	说明	类型	可选值	默认值
urls	初始图片链接，仅支持字符串数据	Array		[]
cells	初始图片链接，对象数组格式	Array		null
count	最多可以选择的图片张数	String/Number		9
size	每行可显示的个数	String/Number	1-9	3
mode	图片剪裁、缩放的模式	String	参考官方image组件的mode属性可选值	aspectFit
size-type	所选的图片的尺寸	String	original/compressed	original
preview	是否可以预览	Boolean	true/false	true
remove	点击删除按钮是否删除图片	Boolean	true/false	true
max-image-size	图片最大限制，单位字节	Number		10000000

图片选择器事件

事件名称	说明	返回值	备注
bind:linchange	新增图片时触发	选中项发生变化时触发 linchange 事件，event.detail = {current: [ 新增项的url信息 ], all: [ 当前urls值 ]}	urls格式为字符串数组
bind:linremove	移除图片时触发	图片移除时触发 linremove 事件，event.detail = {current: 移除项的url信息, all: [ 当前urls值 ], index: 移除项的下标}	urls格式为字符串数组
bind:linpreview	图片被点击时（预览）触发	图片预览触发 linpreview 事件，event.detail = {current:[ 当前点击项的url信息 ], all: [ 当前urls值 ], index: 点击项的下标}	urls格式为字符串数组
bind:linclear	清除图片全部时触发	图片移除时触发 linclear 事件，event.detail = {current: [ 移除项的url信息 ], all: [ 删除前urls值 ]}	urls格式为字符串数组
bind:linoversize	新增图片大小超过max-image-size设置的值时触发	event.detail = {all:[当前urls值],oversize:[超过max-image-size限制的图片值],current:[当前值]}
bind:linremovetap	点击删除按钮