### 上传多图
> 基于weui.css
```vue
<!-- 图片上传 -->
<view class="img-con">
<view class="imc1">可以上传9张图片 {{files.length}}/9 （长按移除图片）</view>
<view class="photo_box">
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage"
id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
```
```javascript
/**
* 选择图片
* 作者：糜家智
* 时间：2021/5/10 12:09
*/
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var len = that.data.files.length + res.tempFilePaths.length
if (len >= 9){
return wx.showToast({
title: '最多上传9张',
icon: 'none',
duration: 1200
})
}
wx.showLoading({
title: '图片上传中...',
})
for (var i = 0; i < res.tempFilePaths.length; i++) {
var imgUrl = res.tempFilePaths[i];
wx.uploadFile({
url: 'http://can.hrapp.com/api/action/uploadpic',
filePath: imgUrl,
name: 'file',
formData: {
user: 'test'
},
success(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
console.log(res)
},
error(e) {
console.log(e)
}
})
}
wx.hideLoading()
wx.showToast({
title: '上传成功！',
icon: 'success',
duration: 1000
})
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
/**预览照片 */
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
},
/**删除照片 */
deleteImage: function (e) {
var that = this;
var images = that.data.files;
var index = e.currentTarget.dataset.index; //获取当前长按图片下标
wx.showModal({
title: '系统提醒',
content: '确定要删除此图片吗？',
success: function (res) {
if (res.confirm) {
images.splice(index, 1);
} else if (res.cancel) {
return false;
}
that.setData({
files: images
});
}
})
},
```
- 前端指南
- 基础
- HTML、HTTP、web综合问题
- css部分
- 学习指南
- 开发指南
- css指南
- JavaScript
- 视图、文件
- canvas
- 二维码的生成
- 64码及图片
- weui
- Promise
- 第三方js
- 网络请求
- 字符串，数组，时间
- 时间类
- Css
- 布局封装
- 媒体布局
- 九宫格图片自适应
- 两行显示，且省略
- uni-app
- uniapp踩坑指南
- 表单类
- 商品规格
- 页面操作
- H5端返回按钮不显示
- H5解决浏览器跨域问题
- uView——Waterfall 瀑布流
- uniapp中使用复制功能(复制文本到粘贴板)
- 动态导航栏的实现
- React
- React基础
- 微信小程序
- 上传多图
- uni-app 微信小程序生成小程序码二维码带参数
- 小程序分享图片给好友，到朋友圈，保存到本地
- 缓存封装
- Vue
- 深度作用选择器deep
- 使用js实现列表无限循环滚动（横向）
- js 无限循环垂直滚动列表
- 可视化
- AntV
- 玫瑰图