vant

utils/dist/uploader/index.d.ts

@@ -0,0 +1 @@
+export {};

utils/dist/uploader/index.js

@@ -0,0 +1,151 @@
+import { VantComponent } from '../common/component';
+import { isImageFile } from './utils';
+import { addUnit } from '../common/utils';
+VantComponent({
+    props: {
+        disabled: Boolean,
+        multiple: Boolean,
+        uploadText: String,
+        useSlot: Boolean,
+        useBeforeRead: Boolean,
+        previewSize: {
+            type: null,
+            value: 90,
+            observer: 'setComputedPreviewSize'
+        },
+        name: {
+            type: [Number, String],
+            value: ''
+        },
+        accept: {
+            type: String,
+            value: 'image'
+        },
+        fileList: {
+            type: Array,
+            value: [],
+            observer: 'formatFileList'
+        },
+        maxSize: {
+            type: Number,
+            value: Number.MAX_VALUE
+        },
+        maxCount: {
+            type: Number,
+            value: 100
+        },
+        deletable: {
+            type: Boolean,
+            value: true
+        },
+        previewImage: {
+            type: Boolean,
+            value: true
+        },
+        previewFullImage: {
+            type: Boolean,
+            value: true
+        },
+        imageFit: {
+            type: String,
+            value: 'scaleToFill'
+        }
+    },
+    data: {
+        lists: [],
+        computedPreviewSize: '',
+        isInCount: true
+    },
+    methods: {
+        formatFileList() {
+            const { fileList = [], maxCount } = this.data;
+            const lists = fileList.map(item => (Object.assign(Object.assign({}, item), { isImage: typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage })));
+            this.setData({ lists, isInCount: lists.length < maxCount });
+        },
+        setComputedPreviewSize(val) {
+            this.setData({
+                computedPreviewSize: addUnit(val)
+            });
+        },
+        startUpload() {
+            if (this.data.disabled)
+                return;
+            const { name = '', capture = ['album', 'camera'], maxCount = 100, multiple = false, maxSize, accept, lists, useBeforeRead = false // 是否定义了 beforeRead
+             } = this.data;
+            let chooseFile = null;
+            const newMaxCount = maxCount - lists.length;
+            // 设置为只选择图片的时候使用 chooseImage 来实现
+            if (accept === 'image') {
+                chooseFile = new Promise((resolve, reject) => {
+                    wx.chooseImage({
+                        count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
+                        sourceType: capture,
+                        success: resolve,
+                        fail: reject
+                    });
+                });
+            }
+            else {
+                chooseFile = new Promise((resolve, reject) => {
+                    wx.chooseMessageFile({
+                        count: multiple ? newMaxCount : 1,
+                        type: 'file',
+                        success: resolve,
+                        fail: reject
+                    });
+                });
+            }
+            chooseFile.then((res) => {
+                const file = multiple ? res.tempFiles : res.tempFiles[0];
+                // 检查文件大小
+                if (file instanceof Array) {
+                    const sizeEnable = file.every(item => item.size <= maxSize);
+                    if (!sizeEnable) {
+                        this.$emit('oversize', { name });
+                        return;
+                    }
+                }
+                else if (file.size > maxSize) {
+                    this.$emit('oversize', { name });
+                    return;
+                }
+                // 触发上传之前的钩子函数
+                if (useBeforeRead) {
+                    this.$emit('before-read', {
+                        file,
+                        name,
+                        callback: (result) => {
+                            if (result) {
+                                // 开始上传
+                                this.$emit('after-read', { file, name });
+                            }
+                        }
+                    });
+                }
+                else {
+                    this.$emit('after-read', { file, name });
+                }
+            });
+        },
+        deleteItem(event) {
+            const { index } = event.currentTarget.dataset;
+            this.$emit('delete', { index, name: this.data.name });
+        },
+        doPreviewImage(event) {
+            if (!this.data.previewFullImage)
+                return;
+            const curUrl = event.currentTarget.dataset.url;
+            const images = this.data.lists
+                .filter(item => item.isImage)
+                .map(item => item.url || item.path);
+            this.$emit('click-preview', { url: curUrl, name: this.data.name });
+            wx.previewImage({
+                urls: images,
+                current: curUrl,
+                fail() {
+                    wx.showToast({ title: '预览图片失败', icon: 'none' });
+                }
+            });
+        }
+    }
+});

utils/dist/uploader/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

utils/dist/uploader/index.wxml

@@ -0,0 +1,57 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="van-uploader">
+  <view class="van-uploader__wrapper">
+    <!-- 预览样式 -->
+    <view
+      wx:if="{{ previewImage }}"
+      wx:for="{{ lists  }}"
+      wx:key="index"
+      class="van-uploader__preview"
+    >
+      <image
+        wx:if="{{ item.isImage }}"
+        mode="{{ imageFit }}"
+        src="{{ item.url || item.path }}"
+        alt="{{ item.name || ('图片' + index) }}"
+        class="van-uploader__preview-image"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        data-url="{{ item.url || item.path }}"
+        bind:tap="doPreviewImage"
+      />
+      <view
+        wx:else
+        class="van-uploader__file"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+      >
+        <van-icon name="description" class="van-uploader__file-icon" />
+        <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
+      </view>
+      <van-icon
+        wx:if="{{ deletable }}"
+        name="clear"
+        class="van-uploader__preview-delete"
+        data-index="{{ index }}"
+        bind:tap="deleteItem"
+      />
+    </view>
+
+    <!-- 上传样式 -->
+    <block wx:if="{{ isInCount }}">
+      <view wx:if="{{ useSlot }}" class="van-uploader__slot" bind:tap="startUpload">
+        <slot />
+      </view>
+
+      <!-- 默认上传样式 -->
+      <view
+        wx:else
+        class="van-uploader__upload"
+        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        bind:tap="startUpload"
+      >
+        <van-icon name="plus" class="van-uploader__upload-icon" />
+        <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
+      </view>
+    </block>
+  </view>
+</view>

utils/dist/uploader/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#fff;border:1px dashed #ebedf0;border-radius:4px}.van-uploader__upload-icon{display:inline-block;width:24px;height:24px;color:#969799;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__preview{position:relative;margin:0 8px 8px 0}.van-uploader__preview-image{display:block;width:80px;height:80px;border-radius:4px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa;border-radius:4px}.van-uploader__file-icon{display:inline-block;width:20px;height:20px;color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 5px;color:#646566;font-size:12px;text-align:center}

utils/dist/uploader/utils.d.ts

@@ -0,0 +1,12 @@
+interface File {
+    path: string;
+    url: string;
+    size: number;
+    name: string;
+    type: string;
+    time: number;
+    image: boolean;
+}
+export declare function isImageUrl(url: string): boolean;
+export declare function isImageFile(item: File): boolean;
+export {};

utils/dist/uploader/utils.js

@@ -0,0 +1,16 @@
+const IMAGE_EXT = ['jpeg', 'jpg', 'gif', 'png', 'svg'];
+export function isImageUrl(url) {
+    return IMAGE_EXT.some(ext => url.indexOf(`.${ext}`) !== -1);
+}
+export function isImageFile(item) {
+    if (item.type) {
+        return item.type.indexOf('image') === 0;
+    }
+    if (item.path) {
+        return isImageUrl(item.path);
+    }
+    if (item.url) {
+        return isImageUrl(item.url);
+    }
+    return false;
+}