lsj-upload

插件地址：https://ext.dcloud.net.cn/plu...

不清楚使用方式可點擊右側導入示例項目運行完整示例

此次更新2.0與1.0使用方式略有差異，已使用1.0的同學自行斟酌是否更新到2.0版本！！！

使用插件有任何問題歡迎加入QQ討論羣：

• 羣1：
• 羣2：

若能幫到你請高抬貴手點亮5顆星~

重要提示

控件的height高度應與slot自定義內容高度保持一致

nvue窗口只能使用固定模式position=absolute

show() 當DOM重排後在this.$nextTick內調用show()，控件定位會更加準確

hide() APP端webview層級比view高，如不希望觸發點擊時，應調用hide隱藏控件，反之調用show

若iOS端跨域服務端同學實在配置不好，可把hybrid下html目錄放到服務器去，同源則不存在跨域問題。

小程序端因hybrid不能使用本地HTML，所以插件提供的是從微信消息列表拉取文件並選擇，請知悉。

使用説明

option説明

ref調用

vue:

<lsj-upload 
    ref="lsjUpload"
    childId="upload"
    width="100px"
    :height="height"
    :option="option"
    :size="size"
    :debug="debug"
    :instantly="instantly"
    @progress="onprogress"
    @change="onChange">
        <view class="btn" :style="{height: height}">選擇附件</view>
</lsj-upload>

• 函數説明

/*  */
export default {
    data() {
        return {
            option: {},
            height: '180rpx',
            size: 10,
            debug: true,
            // 選擇文件後是否立即自動上傳
            instantly: true,
            files: new Map(),
            // 微信小程序Map對象for循環不顯示，所以轉成普通數組，不要問為什麼，我也不知道
            wxFiles: [],
            
            
            // 演示用
            tabIndex: 0,
            list:[], 
        }
    },
    onReady() {
        this.option = {
            // 上傳服務器地址，此地址需要替換為你的接口地址
            url: 'http://youaaddress/upload',
            // 上傳附件的key
            name: 'file',
            // 根據你接口需求自定義請求頭
            header: {
                'Authorization': 'bearer eyJhbGciOiJS',
                'uid': '27682',
                'client': 'app',
            },
            // 根據你接口需求自定義body參數
            formData: {
                // 'orderId': 1000
            }
        };
    },
    methods: {
        // 上傳進度回調
        onprogress(item) {
            this.files.set(item.name,item);
            this.$forceUpdate();
            // console.log('打印對象',JSON.stringify(this.files.get(item.name)));
            
            // 微信小程序Map對象for循環不顯示，所以轉成普通數組，不要問為什麼，我也不知道
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif
            
            
            // 演示-判斷是否所有文件均已上傳成功
            let isAll = [...this.files.values()].find(item=>item.type!=='success');
            if (!isAll) {
                console.log('已全部上傳完畢');
            }
            else {
                console.log(isAll.name+'待上傳');
            }
        },
        // 文件選擇回調
        onChange(files) {
            this.files = files;
            this.$forceUpdate();
            
            // 微信小程序Map對象for循環不顯示，所以轉成普通數組，不要問為什麼，我也不知道
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif
        },
        // instantly=false時，手動調用上傳
        upload() {
            // name=指定文件名，不指定則上傳所有type等於waiting和fail的文件
            this.$refs.lsjUpload.upload();
        },
        // 移除某個文件
        clear(name) {
            // name=指定文件名，不傳name默認移除所有文件
            this.$refs.lsjUpload.clear(name);
        },
        
        
        /**
         * 以下為演示
         */
        // DOM重排演示，重排後組件內部updated默認會觸發show方法,若特殊情況未能觸發updated也可以手動調用一次show()
        // 什麼是DOM重排？自行百度去~
        add() {
            this.list.push('DOM重排測試');
        },
        // 切換視圖演示，APP端因為是webview，層級比view高，
        // 此時若不希望點擊觸發選擇文件，需要手動調用hide()
        // 手動調用hide後，需要調用show()才能恢復觸發面
        onTab(tabIndex) {
            this.tabIndex = tabIndex;
            
            if (tabIndex == 0 ) {
                this.$nextTick(()=>{
                    this.$refs.lsjUpload.show();
                })
            }
            else {
                this.$refs.lsjUpload.hide();
            }
        }
    }
}

温馨提示

• 文件上傳
• 如説明表達還不夠清楚，怎麼調用可導入完整示例項目運行體驗和查看
• APP端請優先聯調Android,上傳成功後再運行iOS端，如iOS返回status=0則需要後端開啓允許跨域；
• header的Content-Type類型需要與服務端要求一致，否則收不到附件（服務端若沒有明文規定則可不寫，使用默認匹配）
• 服務端不清楚怎麼配置跨域可加羣諮詢，具體百度~