All the problems encountered this time can be queried in the wechat API. Whether it is difficult to find at the beginning, so record and share it, so that relevant problems can be easily encountered and viewed.

Problems encountered

  1. How to select from wechat and mobile phone.

Import file pictures from wechat

 uni.chooseMessageFile({
    count: 9.// Maximum number of selected items
    type: type, // all Select all files, video, image, file
    success: async res => {
        const tempFiles = res.tempFiles;  // Temporary path to the file
        // Can upload

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

Local album select pictures or use camera to take photos

 uni.chooseImage({
    sourceType: ['album'].// Select from the album
    sizeType: ['original'.'compressed'].// The size of the selected image
    success: async res => {
        const tempFiles = res.tempFiles; // The path to the image
        console.log(tempFiles);

        // Can upload
    },
    fail: function(err) {}});Copy the code

Preview files, images

The preview image

 uni.previewImage({
    current: item.path, // The link to the currently displayed image
    urls: list // List of images to preview [urL1, url2]
});
Copy the code

Preview the file

  1. Preview the file first by downloading the file.
  2. When the document is opened, there is a download process, and a waiting process is added to increase the experience.
  3. Two points need to be noted.
  • File download address domain name, to be configured in the background
  • The temporary path after downloading should be saved to prevent re-downloading when opening it again.
// Document preview
previewFile(item) {
    // Open the downloaded document without downloading it again
    if (item.tempFilePath) {
        uni.openDocument({
            filePath: item.tempFilePath,
            success: function(res) {
                console.log(res, 'Document open');
            },
            fail: function(res) {
                console.log(res, 'Failed to open document'); }});return;
    }
    uni.showLoading({
        title: 'Document open'
    });
    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, 'Document open');
                },
                fail: function(res) {
                    console.log(res, 'Failed to open document'); }}); },fail(res) {
            uni.hideLoading();
            uni.showToast({
                title: 'Document failed to open, please reopen'.duration: 1000.icon: none }); }}); downloadTask.onProgressUpdate(res= > {
    	// After downloading, close the loading popup.
        if (res.progress >= 100) {
            uni.hideLoading();
        }
        console.log('Download Progress', res.progress);
        console.log('Length of data downloaded', res.totalBytesWritten);
        console.log(
            'Total length of data expected to be downloaded',
            res.totalBytesExpectedToWrite
        );
    });
},
Copy the code

conclusion

Photo album selection

Wechat selects picture files

The preview image

The download file

Preview the file

This article mainly records the problems encountered in the development, there are problems welcome to leave a message oh, there are mistakes welcome to correct oh.