云诺说 - 小程序开发 - 软件定制

微信小程序上传图片、文件、视频及小程序批量上传

2019-09-18 11:14 分类:毕设小程序_代做小程序,小程序定制开发,微信小程序代做,uniapp小程序,java小程序系统,毕业设计微信小程序开发 作者:云诺 阅读(31077)

版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156181.html

很多人问微信小程序怎么上传图片?微信小程序批量上传图片、文件就跟微信小程序生成分享二维码海报一样是非常普遍的功能需求。那么如何将微信里的图片、文件、视频上传到服务器呢?昨天写了个微信小程序上传图片的案例练练手。根据WEB上传图片的经验,图片上传的方式应该是类似的,只不过调用的API不同而已。这里就以小程序上传图片到服务器为例。因为小程序上传图片、文件、视频的方式是一样的。这里就不累赘了。

首先,在微信公众号平台设置uploadFile合法域名,点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名。

QQ截图20190918103446.png

否则会出现以下域名不合法的错误(很重要)

QQ截图20190918103614.png

下面代码是小程序上传图片、视频的布局代码,添加图片预览、上传按钮控件

<!--pages/upload/upload.wxml-->
<view class="img-v clearfix pad">
<view class='txt'>图片</view>
<block wx:if="{{type=='image'}}" >
  <view class="img-chooseImage" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
    <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg" class="list-img"></image>
    <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"><image  src="../../../images/close.png"></image></view>
  </view>
</block>
 <view class="upload-img-btn" bindtap="chooseImg" hidden="{{type=='image' ? ishide : false}}">
 <image class="add-img" src="../../../images/add-img.jpg"></image></view>

</view>


<view class="img-v clearfix">
<view class='txt'>视频</view>
<block wx:if="{{type=='video'}}" >
 <view class="img-chooseImage" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <video  src="{{item}}" data-index="{{index}}"  bindtap="previewImg" class="list-img"></video >
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"><image  src="../../../images/close.png"></image></view>
 </view>
 </block>
 <view class="upload-img-btn" bindtap="addVideo" hidden="{{type=='video' ? ishide : false}}">
 <image class="add-img" src="../../../images/add-img.jpg"></image></view>
 
 <view class='txt-limit'>(文件大小不超过3M)</view>

</view>
 <button class="bnt" type="primary" bindtap="startUploadImg"> 开始上传 </button>

下面代码是微信小程序上传图片、视频的样式代码。

.clearfix::after {
  content: "";
  /* 内容为空 */
  visibility: hidden;
  /* 隐藏对象 */
  height: 0;
  display: block;
  clear: both;
}

.img-v{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
}

.pad{
  padding-top: 90px;
}

.img-chooseImage{
  width:200rpx;
  height: 200rpx;
  float: left;
  margin-right:20rpx;
  border-radius: 8rpx;
  position: relative;
}
.delete-btn{
  position: absolute;
  right:0;
  top:0;
  width: 40rpx;
  height: 40rpx;
}
.upload-img-btn{
  width:200rpx;
  height: 200rpx;
  border:1px dashed #cccccc;
  border-radius: 8rpx;
  position: relative;
  float: left;
}
.add-img{
  width:80rpx;
  height: 80rpx;
  position: absolute;
  top:50%;
  left:50%;
  margin-top:-40rpx;
  margin-left:-40rpx;
}
.list-img{
  border:1px solid #ccc;
}
image{
  width:100%;
  height: 100%;
}

video{
  width:200rpx;
  height: 200rpx;
}

.txt{
  padding-top: 30px;
  font-size: 14px;
  color:#A9A9A9;
}

.txt-limit{
  padding-top: 5px;
  font-size: 12px;
  color:red;
}

.bnt{
  margin-top: 30px;
  margin-left: 40px;
  margin-right: 40px;
}

下面的代码是小程序上传图片、视频的主要前端逻辑代码。

chooseImg方法是通过调用wx.chooseImage({}接口从微信选择要上传的图片文件。

addVideo方法就是调用wx.chooseVideo({})接口选择要上传的视频文件。

startUploadImg方法的主要逻辑是把选择的微信小程序图片、视频通过网络上传到服务器

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],
    type: '',
    ishide: false
  },

  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        if (res.tempFiles[0].size > 3145728){
          wx.showToast({
            title: '文件不能超过3M',
            mask: true,
            duration: 1000
          })
          return ;

        }
        console.log('----' + tempFilePaths);

        that.setData({
          imgs: [tempFilePaths[0]],
          ishide: true,
          type:'image'
        });
      
      }
    });
  },

  addVideo: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        if (res.size > 3145728) {
          wx.showToast({
            title: '视频不能超过3M',
            mask: true,
            duration: 1000
          })
          return;
        }
        that.setData({
          imgs: [res.tempFilePath],
          ishide: true,
          type: 'video'
        })
      }
    })
  },

startUploadImg : function(e){
  var that = this;
  var imgs = this.data.imgs;

  if (imgs.length <= 0){
    wx.showToast({
      title: '请选择上传文件!',
      mask: true,
      duration: 1000
    })
    return
  }

  wx.showLoading({
    title: '正在上传...',
    mask: true
  }) 
    //上传文件
    wx.uploadFile({
      url: app.d.Url + '/Api/Upload/upload',
      filePath: imgs[0],
      formData: { uid: uid},
      name: 'img',
      header: {
        "Content-Type": "multipart/form-data"
      },
      success: function (res) {
        wx.hideLoading();
        console.log('uploadImage success, res is:', res);
        var statusCode = res.statusCode;
        if (statusCode == 200) {
          that.deleteImgByIndex(0)
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000
          })
        }
      },
      fail: function ({ errMsg}) {
        console.log('uploadImage fail, errMsg is', errMsg)
        wx.hideLoading();
        wx.showModal({
          title: '错误提示',
          content: '上传失败',
          showCancel: false,
          success: function (res) { }
        })
      }
    });

}
})

下面是服务端接受小程序上传的图片、视频并保存在服务端本地的逻辑代码。到这一步时就跟WEB上传文件是一样的了。还不懂的话就自己百度下吧。

<?php
namespace Api\Controller;
use Think\Controller;
class UploadController extends PublicController {
    //***************************
    //  上传数据接口
    //***************************
    public function upload(){

        $data = array();
        $info = $this->upload_images($_FILES['img'],array(),"Uploads/".date(Ymd));
        if(is_array($info)) {// 上传错误提示错误信息

            $url = 'UploadFiles/'.$info['savepath'].$info['savename'];
            if ($_REQUEST['imgs']) {
                $img_url = "Data/".$_REQUEST['imgs'];
                if(file_exists($img_url)) {
                    @unlink($img_url);
                }
            }
            echo urldecode(json_encode(array('status'=>1,'err'=>'上传成功!')));
            exit();
        }else{
            echo urldecode(json_encode(array('status'=>0)));
            exit();
        }
    }

    /*
    *
    * 图片上传的公共方法
    *  $file 文件数据流 $exts 文件类型 $path 子目录名称
    */
    public function upload_images($file,$exts,$path){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =  3145728 ;// 设置附件上传大小3M
        $upload->exts      =  $exts;// 设置附件上传类型
        $upload->rootPath  =  './Data/UploadFiles/'; // 设置附件上传根目录
        $upload->savePath  =  ''; // 设置附件上传(子)目录
        $upload->saveName = time().mt_rand(100000,999999); //文件名称创建时间戳+随机数
        $upload->autoSub  = true; //自动使用子目录保存上传文件 默认为true
        $upload->subName  = $path; //子目录创建方式,采用数组或者字符串方式定义
        // 上传文件
        $info = $upload->uploadOne($file);
        if(!$info) {// 上传错误提示错误信息
            return $upload->getError();
        }else{// 上传成功 获取上传文件信息
            //return 'UploadFiles/'.$file['savepath'].$file['savename'];
            return $info;
        }
    }
}

如果是多图片的话。其实就是通过循环一张一张的上传到服务器。由于微信小程序的限制。在手机端还不能上传视频,只能上传图片,在开发工具是没有问题的。由于给客户开发小程序时间比较紧。界面和代码质量都比较随意。最后看下效果吧!

QQ截图20190918110236.png

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

共有 0 条评论 - 微信小程序上传图片、文件、视频及小程序批量上传

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

最近更新

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:168 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:178 个
  • 评论总数:0 条
  • 访问总量: 832959次
  • 最近更新:2024年11月14日