微信小程序实现文件、图片上传功能

2024-09-27 00:51:47

本文实例为大家分享了微信小程序实现文件图片上传的具体代码，供大家参考，具体内容如下

在我看来微信小程序的功能挺强大的，提供了很多API让你直接使用。

这里我说一下微信小程序如何实现图片的上传

1、在微信公众号平台设置uploadFile合法域名

点击设置-开发设置，可以看到服务器域名，点击修改，设置一下你的uploadFile合法域名。

否则会出现以下错误。

2、使用wx.chooseImage和wx.uploadFile实现图片上传

代码如下

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
  // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths;
  wx.uploadFile({
   url: 'https://...',  //此处换上你的接口地址
   filePath: tempFilePaths[0],
   name: 'img',
   header: {
   "Content-Type": "multipart/form-data",
   'accept': 'application/json',
   'Authorization': 'Bearer ..' //若有token，此处换上你的token，没有的话省略
   },
   formData:{
  'user':'test' //其他额外的formdata，可不写
   },
   success: function(res){
   var data=res.data;
  console.log('data');
   },
   fail: function(res){
   console.log('fail');

   },
  })
  }
 })

注：目前微信小程序还不支持base64图片上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序上传图片功能（附后端代码）

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

微信小程序 wx.uploadFile无法上传解决办法微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛
微信小程序开发（二）图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了首先是小程序的wxml代码 <view class="xd-container">
微信小程序实现图片上传、删除和预览功能的方法

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

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',
微信小程序实现上传图片功能

微信小程序图片上传,供大家参考,具体内容如下先来看一下微信小程序的api 来看一下页面效果查看大图 wxml文件代码: <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view clas
微信小程序-拍照或选择图片并上传文件

微信小程序-拍照或选择图片并上传文件调用拍照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
微信小程序图片选择、上传到服务器、预览（PHP）实现实例

微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo
微信小程序教程之本地图片上传(leancloud)实例详解

微信小程序 leancloud --本地图片上传由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da
微信小程序上传图片到服务器实例代码

上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

微信小程序实现文件、图片上传功能

相关推荐

随机推荐