uniapp小程序选择文件并上传到uniCloud
官方文档:https://uniapp.dcloud.io/api/README
主要使用了chooseMessageFile(暂时支持选择聊天记录文件),saveTmpfile,uploadfile这三个API
1、选择文件
chooseFile:function(){ let that = this; uni.chooseMessageFile({ count: 1, success: res => { //filename是自动获取到的文件名称 let filename = res.tempFiles[0].name, //获取到的文件路径 filePath = res.tempFiles[0].path, houzhuiming = that.getHouzhui(filePath,'.');//获取上传文件后缀名 //保存filename that.filename = filename; //通过后缀名判断文件类型 if(['jpg','png','jpeg'].indexOf(houzhuiming) != -1){ //如果是图片直接将filepath赋值给img绑定为图片的src,可以在页面上展示· that.img = filePath; //预览图片 uni.previewImage({ //对选中的图片进行预览 urls: filePath, }) }else{ //不是图片的话,将准备好的图片展示出来 that.img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/a3ab7bba-3522-4244-98fa-d9f770407582.png'; } //保存临时文件,需要保存为临时文件,后面才可以上传到unicloud,不然图片的临时路径会失效 that.saveTmpfile(filePath); } }) }
2、保存临时文件
//保存临时文件 saveTmpfile: function(filepath){ let that = this; uni.saveFile({ tempFilePath: filepath, success: function (res) { //保存后的文件路径 var savedFilePath = res.savedFilePath; that.savedFilePath = savedFilePath; } }); },
3、上传文件到unicloud
//上传文件到云存储空间 uploadfile: function(filePath,name){ //显示加载弹窗 uni.showLoading({ mask:true, title:'正在上传文件,请稍等……' }) // promise方式 const result = uniCloud.uploadFile({ filePath: filePath, cloudPath: name, onUploadProgress: function(progressEvent) { console.log(progressEvent); var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); } }).then(res => { uni.hideLoading(); uni.showToast({ title:"上传成功", duration:1000 }) }); },