小程序上传文件demo

上传图片的方法

主要注意几个关键参数： url、filePath、name

filePath 是一个本地的文件资源路径，可以通过wx.chooseImage来获取，下面会有具体的示例

upload: function () {var that = this;wx.uploadFile({url: 'https://{{url}}/upload',filePath: that.data.imgSrc,name: 'tupian',formData: {'filename': 'test.png'},success: function (res) {var data = res.dataif (data) {wx.showToast({title: '上传成功',icon: 'success',duration: 2000})that.setData({imgUrl: data})}}})
}

还可以显示文件上传的进度，具体用法见最下面的api

后台接收文件的controller

这里是java的代码，其它语言请自行编写

@RequestMapping(value = "upload")
@ResponseBody
public String upload(@RequestParam(value = "tupian", required = true) MultipartFile file,HttpServletRequest request) {try {if (!file.isEmpty()) {String originalFilename = file.getOriginalFilename();String fileNameSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//                统一为小写fileNameSuffix = fileNameSuffix.toLowerCase();String uuid = UUID.randomUUID().toString();String tempFileName = uuid + fileNameSuffix;//              临时存储路径String videoPath = "/tmp/";
//              暂存file.transferTo(new File(videoPath + tempFileName));
//              临时文件File tempFile = new File(videoPath + tempFileName);//              上传至文件服务器，并得到对应的urlString url = "";return url;}} catch (Exception e) {e.printStackTrace();} finally {}return null;
}

选择图片并得到它的资源路径

choose: function () {var that = this;wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsconsole.log(tempFilePaths)that.setData({imgSrc: tempFilePaths[0]})}})}

wxml布局文件


<button bindtap='choose' > 请选择一张图片 </button>
<image src='{{imgSrc}}'></image>
<button bindtap='upload' > 上传 </button>
<image src='{{imgUrl}}'></image>

页面的初始数据


data: {imgSrc: '',imgUrl: ''
}

下面是官方提供的api文档

小程序上传文件demo相关推荐

小程序上传文件到阿里云oss
本文仅举例上传图片和上传视频! 准备工作: 需要引入的js文件:https://download.csdn.net/download/impossible1994727/12328614 参考文档:h ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传文件400
微信小程序上传文件400 直接上示例问题代码将请求头添加上Host即可解决直接上示例问题代码 wx.uploadFile({url: 'https://' + domain + '/post/up ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传文件功能实现
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信 ...
微信小程序上传文件详解
做微信小程序难免会遇到上传文件的问题.今天就给大家说一个简单的上传文件的例子吧 wxml代码 <button bindtap="upload">上传文件</but ...
小程序上传文件报错uploadFile:fail url scheme is invalid，uploadFile:fail createUploadTask:fail Error: Invalid
今天在这里记录一个很蠢的问题. 问题最近用小程序的上传文件 API(wx.uploadFile) 上传音频,这个 API 说白了就是比 wx.request 多带了个请求头 multipart/fo ...
微信小程序上传文件（图片/word等）功能)
说到上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...

小程序上传文件demo

上传图片的方法

后台接收文件的controller

选择图片并得到它的资源路径

wxml布局文件

页面的初始数据

下面是官方提供的api文档

小程序上传文件demo相关推荐

最新文章

热门文章