uniapp在H5下选取文件并上传到服务器_uni.choosefile

文件可以是图片、ppt、pdf等类型，主要借助于uni.chooseFile进行选择文件，然后借助uni.uploadFile进行上传到服务器。

1、html展示，提供一个上传按钮，再提供一个上传成功后展示容器

<view class="add-btn">
   <image src="../../static/images/evidence/add-icon.png" mode=""></image>
   <text class="text" @click="openFile">添加附件</text>
</view>

<scroll-view scroll-y >
	<view style="padding-bottom: 120rpx;">
	    <view class="add-image-item" v-for="(file, index) in currentFile">
	        <text class="add-image-item-name">{{(index + 1) + '.' + file.fileName}}</text>
	        <image 
	            class="add-image-item-delete" 
	            src="../../../static/image/file_del.png"
	            @click="currentFile.splice(index, 1)" />
	    </view>
	</view>
</scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、选取文件openFile()

// 打开文件选择器
openFile(){
    uni.chooseFile({
        count: 1, //默认100
        extension:['.zip','.doc','.xls','.pdf','docx','.rar','.7z','.jpg','.png','.jpeg'],
        success: (res) =>{
            console.log(res);
            if(res.tempFiles[0].size / 1024 / 1024 > 20){
                this.$refs.uToast.show({
                    title: '附件大小不能超过20M',
                    type: 'warning',
                })
                return;
            }
            this.resultPath(res.tempFilePaths[0],res.tempFiles[0].name);
        }
    });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3、上传选择的文件resultPath()

// 选取的文件路径获取后回调
resultPath(path,fileName) {
    console.log(path)
    console.log(fileName)
    uni.showLoading({
      title: '上传中...',
    });
    uni.uploadFile({
        url: base.baseUrl + '/upload', 
        filePath: path,
        header:{
            // "Authorization": "xxx",
            // 'content-type':'multipart/form-data; boundary=----WebKitFormBoundaryHEdN1AIjcdUkAaXM',
        },
        formData: {
            // 'user': 'test'
        },
        success: (uploadFileRes) => {
             let obj = JSON.parse(uploadFileRes.data);
             if(obj.code == 0){
                 this.getOssUrl(obj.tmpFileIds[obj.id],fileType,fileName);
             }else{
                 uni.showToast({
                     title:uploadFileRes.data.returnMessage,
                     icon:'none',
                     duration:1500
                 })
             }
         },
         fail:(err) =>{
             this.$refs.uToast.show({
                 title: '上传失败',
                 type: 'error',
             });
             uni.hideLoading();
         }
    });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38