这次按照我的理解来做这部分的笔记
首先,复习上节课所学的内容。就是网络请求api的使用
现在我有一个需求就是点击按钮实现获取后端返回的图片
先打开服务器
看一下我们要返回的图片路径
书写结构
看一下返回来的数据。是在data下的banners里。因此我们封装一下
这样就做了一个简单的轮播图效果
<button type="primary" bindtap="getAdv">获取轮播图</button>
<swiper class="adv" indicator-dots autoplay circular>
<block wx:for="{{list}}" wx:key="index">
<swiper-item>
<image src="{{item.imageUrl}}" mode=""/>
</swiper-item>
</block>
</swiper>
data: {
list:[]
},
getAdv(e){
var page=this
wx.request({
url: 'http://localhost:3000/banner',
method:"GET",
dataType:"json",
header:{
'content-type':"application/json"
},
success(res){
var list=res.data.banners
page.setData({list:list})
}
})
},
现在如果我们想要将一张网络上的图片保存到本地,那么如何使用呢?
这里我们需要用这个api
一个简单的页面结构,要实现俩种功能。分别是读取网络图片到本地,和下载图片到我们的后端服务器中
把这张网络图片下载到我们的小程序,然后转换为本地路径,渲染到页面上
这里我们调用downloadFile,当访问请求没有问题时,它会返回给我们一个result。而我们打印这个result中明显的发现.tempFilePath就是相对应的本地图片路径。那么我们简单的渲染到页面就可以了
downLoad(){
wx.downloadFile({
url: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
success: (result) => {
console.log('上传成功',result);
this.setData({
src:result.tempFilePath
})
},
fail: (res) => {
console.log('上传失败');
},
complete: (res) => {},
})
},
下载功能,我们用php搭一个后端服务器。然后把资源放进行。
这里我们采用Windows版phpstudy下载 - 小皮面板(phpstudy) (xp.cn) phpstudy,这个免费的工具
直接启动服务器就可以了
把这个php文件放到根目录下面
<?php
if ($_FILES["file"]["error"] > 0) {
echo "Error: " . $_FILES["file"]["error"];
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
echo "uploads/" . $_FILES["file"]["name"];
}
?>
这部分,有点php基础的应该都能看懂,就不必介绍了。在这里我还需要新建一个uploads这个目录。
php代码如下:
upload(){
wx.chooseMedia({
count:9,
success(res){
console.log(res);
var path=res.tempFiles[0].tempFilePath
wx.uploadFile({
filePath: path,
name: 'file',
url: 'http://localhost/upload.php',
success(res){
console.log('上传成功'+res.data);
},
fail(err){
console.log('上传失败',err);
}
})
},
fail(err){
console.log('选择失败'+err);
}
})
},
upload(){
wx.chooseMedia({
count:9,
success(res){
console.log(res);
var path=res.tempFiles[0].tempFilePath
wx.uploadFile({
filePath: path,
name: 'file',
url: 'http://localhost/upload.php',
success(res){
console.log('上传成功'+res.data);
},
fail(err){
console.log('上传失败',err);
}
})
},
fail(err){
console.log('选择失败'+err);
}
})
},
解析了这段代码的实现方式:
-
wx.chooseMedia()
方法用于选择媒体文件,包括图片、音频和视频等类型。该方法接受两个参数:count
表示最多可选择的文件数量,默认为 9;success
是一个回调函数,当用户选择完媒体文件后会触发该回调函数。在该函数内部,通过res.tempFiles[0].tempFilePath
获取用户选中的文件路径。 -
wx.uploadFile()
方法用于上传文件,包括图片、音频和视频等类型。该方法接受五个参数:filePath
表示要上传的文件路径;name
表示上传到服务器上的文件名;url
表示上传到服务器的 URL 地址;success
是一个回调函数,当文件上传成功后会触发该回调函数;fail
是一个回调函数,当文件上传失败时会触发该回调函数。在该函数内部,通过res.data
获取服务器返回的数据。 - 在
fail(err)
回调函数中,会输出上传失败的信息。 - 整个
upload()
方法的作用是先调用wx.chooseMedia()
方法选择媒体文件,然后调用wx.uploadFile()
方法上传文件。
这里要注意的一点就这个php的name必须要跟我们成功回调里面name是相同的。用人话来说就是先调用chooseMedia这个api打开文件,因为我们这里设置了count:9因此一次最多能选择9个文件。选择成功执行成功回调,这里在调用uploadFile这个api,我先拿到本地图片路径,然后保存到url(服务器)的路径下面就可以了
说一下最后一部分文件的操作
SavedFileList(){
wx.downloadFile({
url: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
success: (result) => {
var path=result.tempFilePath
wx.saveFile({
tempFilePath: path,
success(res){
var saveFilePath=res.savedFilePath
console.log('本地文件路径'+saveFilePath);
}
})
},
fail: (res) => {
console.log('上传失败');
},
complete: (res) => {},
})
},
SavedFileList这个函数实现的是,先读取网络图片到本地,然后通过saveFile这个api保存到本地
我们这里的http路径指的是小程序内部的路径
getSavedFileList(){
wx.getSavedFileList({
success(res){
var fileList=res.fileList;
console.log(fileList);
for (var i=0;i<fileList.length;i++){
var file=fileList[i];
console.log("第"+(i+1)+"个文件");
console.log("文件创建时间:"+file.createTime);
console.log("文件大小:"+file.size);
console.log("文件本地路径:"+file.filePath);
}
}
})
},
第二个功能是获取本地文件列表,通过getSavedFileList这个api实现。因为成功回调返回的是一个数组,所有我们可以通过遍历数组的方式来,遍历数组中的每一个元素
通过我们可以调用相对应的属性,例如res.size就是文件的大小
第三个功能是获取本地文件信息,也就是调用 getSavedFileInfo这个api。其实上一个获取列表的方式能获得单一的文件,这个getSavedFileInfo就是基于getSavedFileList的进一步的封装
getSavedFileInfo(){
wx.getSavedFileList({
success(res){
var fileList=res.fileList;
console.log(fileList);
wx.getSavedFileInfo({
filePath: fileList[0].filePath,
success(res){
console.log("文件大小"+res.size+"文件创建"+res.createTime);
}
})
}
})
}
第四个功能是实现删除本地文件removeSavedFile这个api实现
其实我觉得在 getSavedFileList也能实现这个删除的功能。就是通过数组的pop删除这个数组的元素。但是,想想这个深层次的是删除这个元素对应的本地地址。应该不是这么简单就实现了。
文章来源:https://www.toymoban.com/news/detail-444086.html
open(){
wx.chooseMedia({
count:9,
success(res){
var path=res.tempFiles[0].tempFilePath
wx.downloadFile({
// 示例 url,并非真实存在
url: path,
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
// fileType:
success: function (res) {
console.log('打开文档成功')
},
fail(err){
console.log(err);
}
})
}
})
}
})
},
最后的功能也就是实现打开文件的效果,openDocument这个aip给他传入你需要打开的文件的路径,而我们通过chooseMedia和downloadFile的方式将路径保存到本地,然后传进入,就能实现打开文件的效果文章来源地址https://www.toymoban.com/news/detail-444086.html
到了这里,关于微信小程序文件上传、下载和图片处理、文件操作API的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!