微信小程序实现图片和文件，选取，预览，上传。

本次遇到的问题都可以在微信api中查询到相关的方法，就是一开始找的是否比较费劲所以记录分享一下，方便遇到相关的问题，容易查看。

遇到的问题

从微信选取和手机中选取怎么实现。

从微信中导入文件图片

 uni.chooseMessageFile({
    count: 9, // 最多选取的数量
    type: type, // all 所有文件选择， video, image, file
    success: async res => {
        const tempFiles = res.tempFiles;  // 文件的临时路径
        // 可以进行上传

    },
    fail: err => {
        console.log(err);
    }
});

本地相册选择图片或使用相机拍照

 uni.chooseImage({
    sourceType: ['album'], //从相册选择
    sizeType: ['original', 'compressed'], // 所选的图片的尺寸
    success: async res => {
        const tempFiles = res.tempFiles; // 图片的路径
        console.log(tempFiles);

        // 可以进行上传
    },
    fail: function(err) {}
});

预览文件，图片

预览图片

 uni.previewImage({
    current: item.path, // 当前显示图片的链接
    urls: list // 需要预览的图片链接列表 [url1, url2]
});

预览文件

预览文件首先要进行文件下载。
在文档打开的时候，有个下载过程，要加个等待过程，增加体验感。
需要注意两点。

文件的下载地址域名，要在后台进行配置
下载后的临时路径要保存下来，防止再次打开的时候，又重新下载一次。

// 文档预览
previewFile(item) {
    // 已经下载过的文档不用再次下载，直接打开
    if (item.tempFilePath) {
        uni.openDocument({
            filePath: item.tempFilePath,
            success: function(res) {
                console.log(res, '文档打开');
            },
            fail: function(res) {
                console.log(res, '文档打开失败');
            }
        });

        return;
    }
    uni.showLoading({
        title: '文档打开中'
    });
    const downloadTask = wx.downloadFile({
        url: item.path,
        success(res) {
            const filePath = res.tempFilePath;
            console.log(filePath);
            item.tempFilePath = filePath;
            uni.openDocument({
                filePath: filePath,
                success: function(res) {
                    console.log(res, '文档打开');
                },
                fail: function(res) {
                    console.log(res, '文档打开失败');
                }
            });
        },
        fail(res) {
            uni.hideLoading();
            uni.showToast({
                title: '文档打开失败，请重新打开',
                duration: 1000,
                icon: none
            });
        }
    });

    downloadTask.onProgressUpdate(res => {
    	// 下载完成后，关闭loading 弹窗。
        if (res.progress >= 100) {
            uni.hideLoading();
        }
        console.log('下载进度', res.progress);
        console.log('已经下载的数据长度', res.totalBytesWritten);
        console.log(
            '预期需要下载的数据总长度',
            res.totalBytesExpectedToWrite
        );
    });
},

总结

本篇文章主要记录开发中遇到的问题，有问题欢迎留言哦，有错误欢迎指正哦。