Uploader

图片上传

图片上传

图片上传的实现主要使用了微信原生API wx.chooseImage(OBJECT)

  1. <template>
  2.   <div class="page">
  3.     <div class="weui-uploader__bd">
  4.       <div class="weui-uploader__files" id="uploaderFiles">
  5.         <block v-for="item in files" :key="index">
  6.           <div class="weui-uploader__file" @click="predivImage" :id="item">
  7.             <image class="weui-uploader__img" :src="item" mode="aspectFill" />
  8.           </div>
  9.         </block>
  10.       </div>
  11.       <div class="weui-uploader__input-box">
  12.         <div class="weui-uploader__input" @click="chooseImage"></div>
  13.       </div>
  14.     </div>
  15.   </div>
  16.   </div>
  17. </template>
  19. <script>
  20. export default {
  21.   data() {
  22.     return {
  23.       files: []
  24.     }
  25.   },
  26.   methods: {
  27.     chooseImage(e) {
  28.       var _this = this;
  29.       wx.chooseImage({
  30.         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  31.         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  32.         success: function (res) {
  33.           // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  34.           _this.files = _this.files.concat(res.tempFilePaths)
  35.         },
  36.         fail: function () {
  37.           console.log('fail');
  38.         },
  39.         complete: function () {
  40.           console.log('commplete');
  41.         }
  42.       })
  43.     },
  44.     predivImage(e) {
  45.       console.log(e);
  46.       wx.previewImage({
  47.         current: e.currentTarget.id, // 当前显示图片的http链接
  48.         urls: this.files // 需要预览的图片http链接列表
  49.       })
  50.     }
  51.   }
  52. }
  53. </script>
  55. <style>
  57. </style>

效果

uploader01

图片预览

图片预览的实现主要使用了微信原生API wx.previewImage(OBJECT)

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    predivImage(e) {
      console.log(e);
      wx.previewImage({
        current: e.currentTarget.id, // 当前显示图片的http链接
        urls: this.files // 需要预览的图片http链接列表
      })
    }
  }
}
</script>

效果

uploader02