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

2024-10-23 09:04:58

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

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

（以上传图片为例）

后台上传接口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
     })
    }
   }
  })
 }
})

演示效果：

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

微信小程序 ES6Promise.all批量上传文件实现代码

微信小程序 ES6Promise.all批量上传文件实现代码客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.
微信小程序技巧之show内容展示，上传文件编码问题

show内容展示尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现写的更少,做的更多篇幅有限详细代码此处省略 <view class="show-warp"> <block wx:for="{{discuss}}" wx:key="index"> <template is="discuss" data="{{item}}"&
微信小程序之多文件下载的简单封装示例

需求需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字.对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成. 首先小程序有一个限制,包不能大于2m,而且我们可能多个背景图,所以计划把背景图和二维码图片放在服务端,这样可以减少小程序包的大小,也可以灵活的切换背景图. 在绘制分享图的时候,可以直接使用互联网地址,但是遇到了一个问题,有可能不能生成图片,所以我们需要把这个图片文件下载下来. 下载文件的方法微信有AP
微信小程序实现图片上传功能实例（前端+PHP后端）

前言几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=
微信小程序-拍照或选择图片并上传文件

微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose
微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i
微信小程序实现图片轮播及文件上传

微信小程序实现图片轮播及文件上传刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传. 图片轮播: index.js <span style="font-size:14px;">var app = getApp() Page({ data:{ mode: 'aspectFit', // src:'../images/timg1.jpg', imgUrls:[ '../images/1.jpg', '../images/2.jpg', '../imag
微信小程序上传图片功能（附后端代码）

几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片首先选择图片通过wx.chooseImage(OBJECT)实现官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来
微信小程序实现图片上传功能

本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下前端:微信开发者工具后端:.Net 服务器:阿里云这里介绍微信小程序如何实现上传图片到自己的服务器上前端代码 data: { productInfo: {} }, //添加Banner bindChooiceProduct: function () { var that = this; wx.chooseImage({ count: 3, //最多可以选择的图片总数 sizeType: ['compress
微信小程序学习笔记之文件上传、下载操作图文详解

本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun
微信小程序学习笔记之目录结构、基本配置图文详解

本文实例讲述了微信小程序学习笔记之目录结构.基本配置.分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 -- 微信小程序.现在出去找工作只会PHP.HTML+CSS.JS什么的不够了,总得会点时下热门的东西,例如微信小程序,有很多企业的招聘要求上写着:"做过微信小程序的优先"."只要做过微信小程序的"...... 可见微信小程序的热门程度.话(fei)不(hua)多(ting)说(duo),开始学习. 首先在微信公众平台注册小程序账号:
微信小程序学习笔记之函数定义、页面渲染图文详解

前面一篇介绍了微信小程序目录结构.基本配置.这里再来介绍一下函数定义.页面渲染. 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等.整个小程序只有一个 App 实例,全部页面共享使用. //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStor
微信小程序uploadFile接口实现文件上传

目录写在前面创建前端页面写入js事件-完成上传操作配置后端php接口文件实现上传功能完善上传功能写在前面上节中我们讲到小程序的request请求,掌握了基本的网络请求方式,这节我们通过小程序的uploadFile接口能力完成对小程序上传操作(uni.uploadFile,后端php接口),通过这一节你可以学习到php的上传接口的写法,以及如何配合前端完成一个小程序上传操作创建前端页面我们默认使用创建新项目进行讲解,在index.vue最上方写入代码 <template> &
微信小程序增、删、改、查操作实例详解

微信小程序增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q
FasfDFS整合Java实现文件上传下载功能实例详解

在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 <dependency> <groupId>org.csource</groupId> <artifactId>fastdfs-client-java</arti
Socket+JDBC+IO实现Java文件上传下载器DEMO详解

该demo实现的功能有: 1.用户注册: 注册时输入两次密码,若两次输入不一致,则注册失败,需要重新输入.若用户名被注册过,则提示用户重新输入用户名: 2.用户登录: 需要验证数据库中是否有对应的用户名和密码,若密码输错三次,则终止用户的登录操作: 3.文件上传: 从本地上传文件到文件数据库中 4.文件下载: 从数据库中下载文件到本地 5.文件更新: 根据id可更新数据库中的文件名 6.文件删除: 根据id删除数据库中某一个文件 7.看数据库所有文件; 8.查看文件(根据用户名); 9.查看文件
微信小程序环境下将文件上传到OSS的方法步骤

步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证.因此需要为 Bucket 设置跨域规则以支持 Post 方法. 步骤 2:配置外网域名到小程序的上传域名白名单中通过 OSS 控制台查看外网域名. 登录微信小程序平台,配置小程序的上传域名白名单. 步骤 3:使用 Web 端直传实践方案 Demo 进行上传测试下载应用服务器代码修改 De
JavaWeb实现文件上传下载功能实例详解

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 文件上传概述 1.文件上传的作用例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2.文件上传对页面的要求上传文件的要求比较多,需要记一下: 必须使用表单,而不能是超链接表单的method必须是POST,而不能是GET 表单的enctype必须是multipart/form-data 在表单中添加file表单字段,即<input ty
微信小程序学习笔记之获取位置信息操作图文详解

本文实例讲述了微信小程序学习笔记之获取位置信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传.下载操作.这里分析一下获取位置信息操作. [获取当前位置信息]wx.getLocation() getlocation.wxml: <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js: Page({ getlocation: fu

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

相关推荐

随机推荐