uniapp 图片上传

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

使用uni.chooseImage 选择文件

正常情况这样写就可以使用了 extension 文件拓展名过滤 如果不需要过滤可以不写 不要给 空数组 [] count这个参数也有一个注意点就是在H5的时候选择的数量如果超过了设置的选择数量。但是依旧可以继续选下去 ，但是最后拿到的数据依旧是只有9个

uni.chooseImage({
        //可选择图片数量  默认9 可不填  
        count:9,
        //可以指定是原图还是压缩图，默认二者都有
        sizeType: ['original', 'compressed'], 
        //文件拓展名过滤  可不填，默认不过滤
        extension:['png'],
        //设置选择类型 album 从相册选图，camera 使用相机  可放多个
        sourceType:['album','camera'],
        //成功回调函数
        success:function(e) {
                //图片上传的数据都在e.tempFiles中  tempFiles 是一个数组
                console.log(e.tempFiles);
        }
})

这样我们就可以拿到上传的数据了 tempFiles中包含了我们上传的图片的信息 如下图所示 path就是本地文件路径

拿到以上数据之后我们就可以使用另一个方法把图片上传到服务器上了 这样基本就完成了一个简单的上传图片的功能了

uni.uploadFile({
        url: url, //后端的图片上传接口
        filePath: tempFilePaths[0],
        name: 'file',
        header: { //上传需要权限校验时可在这里加上
            Authorization: "Bearer " + uni.getStorageSync("token"),
          },
        success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
        }
});

同时可以注意的一点是 如果想要拿到上传的进度的话 我们可以这样写

const uploadTask = uni.uploadFile({
        url: url, //后端的图片上传接口
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {
                'user': 'test'
        },
        success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
        }
});

uploadTask.onProgressUpdate((res) => {
        console.log('上传进度' + res.progress);
        console.log('已经上传的数据长度' + res.totalBytesSent);
        console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
        // 测试条件，取消上传任务。
        if (res.progress > 50) {
                uploadTask.abort();
        }
});

学习中，如有错误请大家指出 谢谢