Upload 上传

用于文件选择或相机拍照上传。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Upload",
    "usingComponents": {
        "wux-upload": "../../dist/upload/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">Upload</view>
        <view class="page__desc">上传</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Default</view>
        <wux-upload url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete">
            <button type="default">Click to Upload</button>
        </wux-upload>
        <view class="sub-title">Disabled</view>
        <wux-upload disabled url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete">
            <button disabled type="default">Click to Upload</button>
        </wux-upload>
        <view class="sub-title">Picture card & max = 4</view>
        <wux-upload listType="picture-card" defaultFileList="{{ fileList }}" max="4" url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete" bind:preview="onPreview">
            <text>Upload</text>
        </wux-upload>
        <view class="sub-title">ShowUploadList = false</view>
        <wux-upload listType="picture-card" showUploadList="{{ false }}" url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete" bind:preview="onPreview">
            <image src="{{ imageUrl }}" wx:if="{{ imageUrl }}" />
            <text wx:else>Upload</text>
        </wux-upload>
        <view class="sub-title">Progress = true</view>
        <progress percent="{{ progress }}" show-info />
        <wux-upload progress listType="picture-card" showUploadList="{{ false }}" url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete" bind:progress="onProgress" bind:preview="onPreview">
            <image src="{{ imageUrl }}" wx:if="{{ imageUrl }}" />
            <text wx:else>Upload</text>
        </wux-upload>
        <view class="sub-title">Remove</view>
        <wux-upload listType="picture-card" fileList="{{ fileList }}" controlled url="https://www.skyvow.cn/api/common/file" bind:change="onChange" bind:success="onSuccess" bind:fail="onFail" bind:complete="onComplete" bind:preview="onPreview" bind:remove="onRemove">
            <text>Upload</text>
        </wux-upload>
    </view>
</view>

Page({
    data: {
        fileList: [{
                uid: 0,
                status: 'uploading',
                url: 'https://wux.cdn.cloverstd.com/qrcode.jpg',
            },
            {
                uid: 1,
                status: 'done',
                url: 'https://wux.cdn.cloverstd.com/qrcode.jpg',
            },
            {
                uid: 2,
                status: 'error',
                url: 'https://wux.cdn.cloverstd.com/qrcode.jpg',
            }
        ],
    },
    onChange(e) {
        console.log('onChange', e)
        const { file } = e.detail
        if (file.status === 'uploading') {
            this.setData({
                progress: 0,
            })
            wx.showLoading()
        } else if (file.status === 'done') {
            this.setData({
                imageUrl: file.url,
            })
        }
    },
    onSuccess(e) {
        console.log('onSuccess', e)
    },
    onFail(e) {
        console.log('onFail', e)
    },
    onComplete(e) {
        console.log('onComplete', e)
        wx.hideLoading()
    },
    onProgress(e) {
        console.log('onProgress', e)
        this.setData({
            progress: e.detail.file.progress,
        })
    },
    onPreview(e) {
        console.log('onPreview', e)
        const { file, fileList } = e.detail
        wx.previewImage({
            current: file.url,
            urls: fileList.map((n) => n.url),
        })
    },
    onRemove(e) {
        const { file, fileList } = e.detail
        wx.showModal({
            content: '确定删除？',
            success: (res) => {
                if (res.confirm) {
                    this.setData({
                        fileList: fileList.filter((n) => n.uid !== file.uid),
                    })
                }
            },
        })
    },
})

视频演示

Upload

API

Upload props

Upload slot

Upload externalClasses