前端：uni-file-picker和uni-uploadFile集合使用

在网上找不到比较具体的两个api集合的方法。用原生api实现。简单易实现

dom部分

<uni-section  title="选择查验图片" type="line" class="chosepicture">
                        <view class="example-body">
                            <uni-file-picker
                             limit="9"  
                             title="最多选择9张图片"
                             @select="select" 
                             @delete="deletephoto"
                            ></uni-file-picker>
                        </view>
                    </uni-section>    

limit是限制图片的数量

js部分

 data：{ //这里是把返回的图片url地址做个逗号隔开拼接的参数，为了适应字段接口

imageValue：""

}

        select(e){ //select是选择好图片之后的方法
            console.log(e.tempFilePaths[0]) //会得到一个api提供的临时图片地址
                        uni.uploadFile({
                                    url: 'xxxx/common/upload', //上传图片的接口
                                    filePath:e.tempFilePaths[0],//一定要用这个参数！它会用formata的形式传递参数
                                    name: 'file',
        header: {   //有些接口需要请求头，如果没有可以去掉，像我现在的接口是必须加上token的。
                                      'Authorization': 'Bearer ' + getToken() //请求头
                      },
                                    success: (uploadFileRes) => {//成功的回调，把返回的图片地址拼接进变量
                                        console.log(uploadFileRes.data);
                                        this.imageValue.push(JSON.parse(uploadFileRes.data).url)
                                    },
                                    fail:(res)=>{ //失败的回调
                                        console.log(res)
                                    }
                                });
                    },

deletephoto(e){ //deletephoto是把已经上传的图片叉掉之后的方法。需要把变量中的图片地址去掉
                let index = this.imageValue.indexOf(e.tempFilePath);
                this.imageValue.splice(index, 1);
        },

顺便附上style部分

.example-body {
        padding: 10px;
        padding-top: 0;
    }

    .custom-image-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .text {
        font-size: 14px;
        color: #333;
    }
    .chosepicture{
        border-radius: 20rpx;
        width: 90%;
    }

效果图：

（此API是支持拍照和本地图片上传的，样式都是好调整的）