微信小程序上传下载本地图片以及微信文件
最近在做一个云盘服务项目,想搭建到微信小程序上,然后讲一下微信小程序中上传和下载的坑
首先申明一下,这个功能真是烦恼了我好久,因为项目中要用到上传word/ppt等文件,找度娘查了半天,对着开发者文档API看了半天,发现根本没有调起手机文件管理器去选择文件上传的API,在微信小程序中是==不能调用==手机系统的==文件管理==功能的!!!
但是图片视频这些你已经授权给微信的一些功能是可以调用的,微信也提供了一个api—chooseMessageFile
可以获取微信聊天文件
上传本地图片(多张一起上传)
wx.chooseImage({
success: function(res) {
console.log(res);
count:9; //限制选择数量
console.log(res.tempFilePaths) //打印获取到图片的临时地址
let size = 0;
var namelist = [];
// 这是为了给图片命名,用时间命名
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
// var i = 0
console.log(y, m, d)
//我这边计算了一下文件的大小
for(var a in res.tempFiles){
size += res.tempFiles[a].size
namelist.push(
'm'+y + '' + m + '' + d + '' + h + '' + min+'' +s+ '-' +a+'.jpg'
)
}
console.log(namelist)
if (size < 31457280){
console.log('上传')
// 循环上传
for (var i = 0; i < res.tempFilePaths.length;i++){
list.push({
name: namelist[i],
attribute: 'file',
})
vm.setData({
list: list
})
wx.uploadFile({
url: app.globalData.url + "/index/upload",
filePath: res.tempFilePaths[i],
name: 'file', // 上传的key,和服务器上的一致
header: {
"Content-Type": "multipart/form-data",
'Cookie': app.globalData.cookie
},
// 和wx.request中的data是一样的东西,上传接口参数
formData: {
'name': namelist[i],
'path': vm.data.local_file
},
success(res) {
console.log(res)
}
})
}
}else{
wx.showToast({
title: '你选中的图片超过30M!',
icon:'none'
})
}
},
})
上传微信文件
wx.chooseMessageFile({
count:1,
// type:'file',
success(res){
var fname = res.tempFiles[0].name
console.log(res.tempFiles[0])
if (res.tempFiles[0].size < 31457280) {
wx.uploadFile({
url: app.globalData.url + "/index/upload",
filePath: res.tempFiles[0].path,
name:'file',
header: {
"Content-Type": "multipart/form-data",
'Cookie': app.globalData.cookie
},
formData:{
'name': res.tempFiles[0].name,
'path': vm.data.local_file
},
success(res){
console.log(res)
list.push({
name: fname,
attribute: 'file',
})
vm.setData({
list: list
})
}
})
}else{
wx.showToast({
title: '你选中的文件超过30M!',
icon: 'none'
})
}
}
})
下载文件并打开
这里提醒一下,文件下载下来的是
临时文件
,打开来是可以预览的,如果点转发发给别人的是无法打开的文件。 - - 我没有找到解决方法,试用了savafile,FileSystemManager等API都不能把这个临时文件变成我们要的格式,而且本地文件存储的大小限制为 10M
,如果有大神知道如何转化,告知我一下非常感谢
wx.downloadFile({
url: app.globalData.url + "/index/download?path=" + vm.data.local_file+'/'+ vm.data.filename,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Cookie': app.globalData.cookie
},
success(res) {
if (res.statusCode === 200) {
console.log(res)
var filePath = res.tempFilePath
// 打开这个文件
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
}
})
}
}
})