uni-app 图片上传（uploadFile，chooseImage）

uni-app 图片上传（uploadFile）

 1 <template>
 2     <view>
 3         <progress :percent="percent" strock-width="10"></progress>
 4         <button type="primary" @tap="cI">chooseImg</button>
 5     </view>
 6 </template>
 7 
 8 <script>
 9     // 注册一个进度条
10     var _self;
11     
12     export default {
13         data() {
14             return {
15                 percent:0
16             }
17         },
18         onLoad() {
19             _self = this;
20         },
21         methods: {
22             // cI(){
23             //     uni.chooseImage({
24             //         count: 1,
25             //         sizetype: ['compressed'],
26             //         success(res){
27             //             // tepFliePaths 保存图片路径 
28             //             var imgFiles = res.tempFilePaths;
29             //             // 因为没写下标， 直接以数组形式输出
30             //             console.log(imgFiles)
31             //         }
32             //     })
33             // }
34             cI:function(){
35                 uni.chooseImage({
36                     count: 1,
37                     sizeType:['copressed'],
38                     success(res) {
39                         //因为有一张图片， 输出下标[0]， 直接输出地址
40                         var imgFiles = res.tempFilePaths[0]
41                         console.log(imgFiles)
42                         // 上传图片
43                         // 做成一个上传对象
44                         var uper = uni.uploadFile({
45                             // 需要上传的地址
46                             url:'http://demo.hcoder.net/index.php?c=uperTest',
47                             // filePath  需要上传的文件
48                             filePath: imgFiles,
49                             name: 'file',
50                             success(res1) {
51                                 // 显示上传信息
52                                 console.log(res1)
53                             }
54                         });
55                         // onProgressUpdate 上传对象更新的方法
56                         uper.onProgressUpdate(function(res){
57                             // 进度条等于 上传到的进度
58                             _self.percent = res.progress
59                             console.log('上传进度' + res.progress)
60                             console.log('已经上传的数据长度' + res.totalBytesSent)
61                             console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
62                         })
63                     }
64                 })
65             }
66         }
67     }
68 </script>
69 
70 <style>
71 
72 </style>
uni-app 图片上传（uploadFile，chooseImage）

uni-app 图片上传（uploadFile）

效果图
