微信小程序学习笔记之文件上传、下载操作图文详解


Posted in Javascript onMarch 29, 2019

本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考,具体如下:

前面介绍了微信小程序登录API与获取用户信息操作。这里再来介绍一下文件的上传与下载操作。

【文件上传】wx.uploadFile

(以上传图片为例)

后台上传接口Upload.php:(tp5)

<?php
namespace app\home\controller;
use think\Controller;
class Upload extends First
{
  //上传图片API
  public function upImg() {
  	$arr = array('state'=>0,'msg'=>'上传失败','filepath'=>'');
    $file = request()->file('file');
    if($file){
      $info = $file->move('upload/weixin/');
      if ($info) {
        $arr['state'] = 1;
        $arr['msg'] = '上传成功';
        $arr['filepath'] = $info->getSaveName();
      }
    }
    return json($arr);
  }
}

前台页面upload.wxml:

<image src='{{imgpath}}' style='width:600rpx; height:600rpx' />
<view>
 <button bindtap="upImg">点击选择上传图</button>
</view>

前台upload.js:

Page({
 data: {
  imgpath: ''
 },
 upImg: function (e) {
  var that = this
  wx.chooseImage({
   count: 1, // 默认最多一次上传9张图片
   sizeType: ['original', 'compressed'], // 允许原图和压缩图
   sourceType: ['album', 'camera'], // 允许相册和相机
   success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.showToast({
     title: '正在上传...',
     icon: 'loading',
     mask: true,
     duration: 500
    })
    wx.uploadFile({
     url: 'https://www.msllws.top/Upload/upImg', //服务器上传接口
     filePath: tempFilePaths[0], //文件资源路径
     name: 'file',
     header: {
      'Content-Type': 'Application/json'
     },
     success(res) {
      console.log(res)
      if (res.statusCode == 200){
       that.setData({
        imgpath: tempFilePaths
       }) 
      }
     }
    })
   }
  })
 }
})

演示效果:

微信小程序学习笔记之文件上传、下载操作图文详解

(其实是有正在上传...效果的,手机录屏没给录上。。)

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解 
查看服务器里面多了一张图片:

微信小程序学习笔记之文件上传、下载操作图文详解

嗯哼~

微信小程序学习笔记之文件上传、下载操作图文详解

 【文件下载】wx.downloadFile

(以下载一张图片为例)

在服务器目录下放一张图片1.jpg:

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解

download.wxml:

<image src='{{imgpath}}' style='width:600rpx; height:600rpx' />
<view>
 <button bindtap="download">点击下载</button>
</view>

download.js:

Page({
 data: {
  imgpath: ''
 },
 download: function (e) {
  var that = this
  wx.showToast({
   title: '正在下载...',
   icon: 'loading',
   mask: true,
   duration: 500
  })
  wx.downloadFile({
   url: 'https://www.msllws.top/upload/1.jpg', //下载地址 
   type: 'image', //下载的资源类型(imnage/audio/video)
   success: function (res) {
    console.log(res)
    if (res.statusCode == 200) {
     var filepath = res.tempFilePath
     that.setData({
      imgpath: filepath
     })
    }
   }
  })
 }
})

演示效果:

微信小程序学习笔记之文件上传、下载操作图文详解

微信小程序学习笔记之文件上传、下载操作图文详解 微信小程序学习笔记之文件上传、下载操作图文详解

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
Node.js的包详细介绍
Jan 14 Javascript
js实现简单锁屏功能实例
May 27 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php实现求相对时间函数
2015/06/15 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php批量删除操作代码分享
2017/02/26 PHP
强制设为首页代码
2006/06/19 Javascript
JavaScript 原型继承
2011/12/26 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python元组知识点总结
2019/02/18 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
实例代码讲解Python 线程池
2020/08/24 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
学风建设演讲稿
2014/09/12 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
教师节大会主持词
2015/07/06 职场文书
工程移交协议书
2016/03/24 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Windows server 2016服务器基本设置
2022/08/14 Servers