此方法并不熟悉将图片上传到手机上的方法。大多数迷你程序甚至都带有此功能。那么如何实现此功能呢？让我们看看！呢呢
1。通过微信小程序加载图片的几种方法
1.加载本地图片
例如：本地路径：////1.png
//此处可以通过mode来设置图片的放置方式
然后在WXSS中设置您需要的样式
有关模式的其他详细信息可以在官方文档中找到：|微信打开文档（）
2。加载网络图片
例如：网络图像地址是：（此图像无效）
然后在WXSS中设置您需要的样式
该模式如上
3。使用本地SVG图像（SVG是可扩展的向量图形）
有关详细信息，您可以查看以下链接：Mini 支持SVG |微信开放社区（）
本地SVG与本地图像调用相同（SVG比图像更清晰）
也可以在此处使用将SVG转换为WXSS中使用的代码的方法
.skin-icon1 {
width: 40rpx;
height: 40rpx;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg3MzVfMTI3NDM3KSI+CjxwYXRoIGQ9Ik0xMC4wMDAxIDE4LjMzMzRDMTQuNjAyNSAxOC4zMzM0IDE4LjMzMzQgMTQuNjAyNSAxOC4zMzM0IDEwLjAwMDFDMTguMzMzNCA1LjM5NzcxIDE0LjYwMjUgMS42NjY3NSAxMC4wMDAxIDEuNjY2NzVDNS4zOTc3MSAxLjY2Njc1IDEuNjY2NzUgNS4zOTc3MSAxLjY2Njc1IDEwLjAwMDFDMS42NjY3NSAxNC42MDI1IDUuMzk3NzEgMTguMzMzNCAxMC4wMDAxIDE4LjMzMzRaIiBzdHJva2U9IiM0QkRDQUIiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1IDE1LjQxNjdMNy4wODMzMyAxMS42NjY3TDEzLjc1IDE3LjA4MzQiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk5OTIgOC43NTAwOEM4LjQyMDM5IDguNzUwMDggOS4xNjY1OSA4LjAwMzg5IDkuMTY2NTkgNy4wODM0MUM5LjE2NjU5IDYuMTYyOTQgOC40MjAzOSA1LjQxNjc1IDcuNDk5OTIgNS40MTY3NUM2LjU3OTQ0IDUuNDE2NzUgNS44MzMyNSA2LjE2Mjk0IDUuODMzMjUgNy4wODM0MUM1LjgzMzI1IDguMDAzODkgNi41Nzk0NCA4Ljc1MDA4IDcuNDk5OTIgOC43NTAwOFoiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3Ii8+CjxwYXRoIGQ9Ik0xMCAxMy43NDk5TDEzLjMzMzMgOS41ODMyNUwxNy41IDEyLjkxNjYiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84NzM1XzEyNzQzNyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
background-size: cover;
}
这也可以显示图像效果，并且不会占据迷你程序中的空间。这是减少空间存储的好方法
2.如何在手机中获取图片
以下部分是JS代码，以获取指向您上传的图像的链接（此处的链接由微信带来的API返回）
//从相册获取照片
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
sizeType: ['original'],
success(res) {
var tempFilePath = res.tempFiles[0].tempFilePath;
try {
const FileSystemManager = wx.getFileSystemManager();
var url = FileSystemManager.saveFileSync(tempFilePath, wx.env.USER_DATA_PATH + '/' + tempFilePath.replace("wxfile://", ""));
this.setData({
picture: url
});
} catch {
wx.showToast({
title: '设置失败',
icon: 'error',
duration: 2000
});
}
},
fail() {
wx.showToast({
title: '上传失败',
icon: 'error',
duration: 2000
});
}
});
在这里获得链接后，您可以将其渲染到主页
在这里，由于自定义图像位于个性化的皮肤接口和需要渲染的页面中，因此首先将其存储在缓存中。返回主页时，Mini程序会在听到返回主页时触发该功能。因此，可以将读取缓存位置放置在函数中以获取相应的图像链接，然后将其设置为此变量。在WXML页面中，请参阅{{}}中的链接地址，您可以完成图像背景的自定义设置！您还可以使用选择器来设置图片样式
有关更多详细信息，请检查官方微信迷你节目文档：WX。（）|微信打开文档（）
3。摘要
我希望这里的知识点摘要可以帮助所有新开发人员。总体而言，这里的知识点并不复杂，您可以通过练习来熟练地掌握它们。因此，下次见到您，并期待与您变得更强壮！呢呢