How to save pictures locally in uniapp

With the development of mobile Internet and mobile applications, it has been widely used for users to store and manage a large number of pictures during the use of applications. Uniapp is a cross-platform framework developed based on Vue.js, which can easily develop small programs, H5, App and other applications. During the development process, sometimes it is necessary to save the obtained pictures locally for quick call next time. Let's take a look at how Uniapp saves pictures locally.

1. Obtain pictures
During the development process, we need to use pictures. We can obtain picture resources through uni.request or uni.downloadFile.

1. uni.request
   uni.request is a common method for making network requests in Uniapp. We can obtain image resources by setting the responseType attribute. The specific code is as follows:

uni.request({
  url: 'http://www.example.com/resource/1.jpg',
  responseType: 'arraybuffer',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

Among them, the url is the link to the image, and the responseType is 'arraybuffer', which means that the image resource is obtained in binary form. After the acquisition is successful, it is saved to tempFilePath, and finally passed uni.saveFile to save the image locally.

2. uni.downloadFile
   uni.downloadFile is a common method for downloading files in Uniapp. We can obtain image resources by setting the attributes of the url. The specific code is as follows:

uni.downloadFile({
  url: 'http://www.example.com/resource/1.jpg',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

Among them, the url is the link of the picture. After successfully obtaining it, it will be saved to tempFilePath, and finally the picture will be saved locally through uni.saveFile.

2. Save the image
We have obtained the image resource, and then we need to save it locally. Files can be saved locally through uni.saveFile, but the save path is different for each platform. Uniapp encapsulates a method getFileSystemManager to obtain the local storage path of the current platform.

The specific code is as follows:

uni.getFileSystemManager().access({
  path: '/storage/emulated/0/uniapp_demo/',
  success: () => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
      success: (res) => {
        console.log('保存成功');
      }
    });
  },
  fail: () => {
    uni.getFileSystemManager().mkdir({
      dirPath: '/storage/emulated/0/uniapp_demo/',
      success: () => {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
          success: (res) => {
            console.log('保存成功');
          }
        });
      }
    });
  }
});

Among them, path is the local storage path. Use access to determine whether the directory exists. If it does not exist, use mkdir to create the directory. Finally, save the file through uni.saveFile. to local.

3. Conclusion
The above is how to save pictures locally in Uniapp. Developers can adjust it according to their own needs. If you encounter problems during use, you can solve them through the Uniapp official website documentation or posts in the community. Hope this article can be helpful to you.

The above is the detailed content of How to save pictures locally in uniapp. For more information, please follow other related articles on the PHP Chinese website!