uni-app 圖片上傳（uploadFile，chooseImage）

uni-app 圖片上傳（uploadFile）

<template>
    <view>
        <progress :percent="percent" strock-width="10"></progress>
        <button type="primary" @tap="cI">chooseImg</button>
    </view>
</template>

<script>
    // 注冊一個進度條
    var _self;
    
    export default {
        data() {
            return {
                percent:0
            }
        },
        onLoad() {
            _self = this;
        },
        methods: {
            // cI(){
            //     uni.chooseImage({
            //         count: 1,
            //         sizetype: ['compressed'],
            //         success(res){
            //             // tepFliePaths 保存圖片路徑 
            //             var imgFiles = res.tempFilePaths;
            //             // 因為沒寫下標， 直接以數組形式輸出
            //             console.log(imgFiles)
            //         }
            //     })
            // }
            cI:function(){
                uni.chooseImage({
                    count: 1,
                    sizeType:['copressed'],
                    success(res) {
                        //因為有一張圖片， 輸出下標[0]， 直接輸出地址
                        var imgFiles = res.tempFilePaths[0]
                        console.log(imgFiles)
                        // 上傳圖片
                        // 做成一個上傳對象
                        var uper = uni.uploadFile({
                            // 需要上傳的地址
                            url:'http://demo.hcoder.net/index.php?c=uperTest',
                            // filePath  需要上傳的文件
                            filePath: imgFiles,
                            name: 'file',
                            success(res1) {
                                // 顯示上傳信息
                                console.log(res1)
                            }
                        });
                        // onProgressUpdate 上傳對象更新的方法
                        uper.onProgressUpdate(function(res){
                            // 進度條等於 上傳到的進度
                            _self.percent = res.progress
                            console.log('上傳進度' + res.progress)
                            console.log('已經上傳的數據長度' + res.totalBytesSent)
                            console.log('預期需要上傳的數據總長度' + res.totalBytesExpectedToSend)
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>

 效果圖