微信小程序图片上传组件

本文件只需将.js 文件中的url 变量替换成当前项目具体的图片上传地址即可使用，如有更好方法，请多指教，谢谢。

其中imgArr需要是数组，其实这个可以在组件里面转换判断，偷懒下，哈哈！！

prevent 是否阻止上传图片 布尔值；

maxCount 上传图片的最大张数 Number;

title 标题

imgLink 图片的地址，如果图片地址是已经在imgArr里面拼接好了的就可以传个空值即可，恩，就是这样;

本文仅供才考

.json 文件

{
  "component": true,
  "usingComponents": {}
}

.js 文件

const app = getApp();
Component({
  properties: {
    imgArr: {
      type: Array,
      value: [],
      observer(newVal, oldVal, changedPath) {
        this.setData({
          count: this.data.maxCount - newVal.length
        })
      }
    },
    prevent: {
      type: Boolean,
      value: false
    },
    maxCount: {
      type: Number
    },
    title: {
      type: String
    },
    imgLink: {
      type: String
    }
  },
  data: {
  },
  ready() {
  },
  methods: {
    _addImg() {
      let _this = this;
      if (_this.data.count <= 0) {
        wx.showToast({
          title: '最多只能上传' + _this.data.maxCount + '张图片',
          icon: 'none',
          duration: 1000
        })
        return;
      }
      wx.chooseImage({
        count: _this.data.count,
        success(res) {
          let tempFilePaths = res.tempFilePaths;
          let url = ''; // 后端同学具体给的上传图片接口
          for (let i in tempFilePaths) {
            wx.uploadFile({
              url,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'path': tempFilePaths[i]
              },
              success(res) {
                let data = JSON.parse(res.data);
                _this.setData({
                  imgLink: data.other.img_root
                })
                if (!data.code) {
                  let newArr = _this.data.imgArr.concat(data.data);
                  _this.setData({
                    imgArr: newArr
                  })
                  _this.triggerEvent('getArr', _this.data.imgArr);

                } else {

　　　　　　　　　　　　wx.showToast({

　　　　　　　　　　　　　　title:'上传失败！请重新上传' ,

　　　　　　　　　　　　　　icon: 'none',

　　　　　　　　　　　　　　duration: 1500

　　　　　　　　　　　　})

                }
              },
              fail(res) {

　　　　　　　　　　　　wx.showToast({

　　　　　　　　　　　　　　title:'上传失败！请重新上传' ,

　　　　　　　　　　　　　　icon: 'none',

　　　　　　　　　　　　　　duration: 1500

　　　　　　　　　　　　})

              }
            })
          }
        }
      })
    },
    _onDelTab(e) {
      let idx = e.currentTarget.dataset.idx;
      this.data.imgArr.splice(idx, 1);
      this.setData({
        imgArr: this.data.imgArr
      })
      this.triggerEvent('getArr', this.data.imgArr);
    }
  }
})

 

.wxml 文件

<view class='load-img'>
  <view class='load-name' wx:if="{{title}}">{{title}}view>
  <view class='load-box'>
    <view class='img-item' wx:for="{{imgArr}}" wx:key="{{index}}">
      <image src="{{imgLink + item}}">image>
      <icon class='icon' type="clear" size="20" color='#EF4444' catchtap='_onDelTab' data-idx="{{index}}" wx:if="{{!prevent}}"/>
    view>
    <image class='img-add' src='./add.png' bindtap='_addImg' wx:if="{{count > 0 && !prevent}}">image>
  view>
view>

.wxss 文件

/* 上传图片 */
.load-name {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
}
.load-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.img-item, .img-add {
  position: relative;
  width: 140rpx;
  height: 140rpx;
  margin-bottom: 20rpx;
}
.img-item {
  margin-right: 20rpx;
}
.img-item image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.icon {
  position: absolute;
  top: 0;
  right: 0;
}

 

转载于:https://www.cnblogs.com/sujianyin/p/10655368.html