【微信小程序】大文件分片上传到FastDFS文件服务器

布满荆棘的人生 2023-10-11 23:27 51阅读 0赞

## 1. 小程序界面： ##

![2c9be7bdc7ab41a9b7e2f6f08181a44d.png][]

## 2. 计算文件的MD5： ##

![28ca59b2c1324000a8f55735db7bd43a.png][]

## 3. 上传记录： ##

## ![7b0a7b7ba35143139999608edf8425bc.png][] ##

![300390986255450f904b11c5f17e4033.png][]

## 4. share.js源码： ##

const domain = require('../../utils/domain.js').domain
    import SparkMD5 from '../../utils/spark-md5.js'
    const chooseLocation = requirePlugin('chooseLocation');
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        uploadTask: '',
        tempFiles: '',
        fileName: '', 
        chunkNo: '', 
        identifier: '', 
        bytesPerPiece: '',
        index: '',
        percent: '',
        media: [],
        location: '',
        userinfo: '',
        labelList: [],
        text: '',
        loading_title: '',
        loading_icon: '',
        loading_show: false,
        type: ''
      },
      upload(){
        console.log("点击上传")
        wx.chooseMedia({
          count: 1,
          mediaType: ['image', 'video'],
          sourceType: ['album'],
          success(res){
            console.log(res.tempFiles[0].tempFilePath)
            wx.uploadFile({
              header: {
                'alexmisko-user': wx.getStorageSync('token')
              },
              filePath: res.tempFiles[0].tempFilePath,
              name: 'img',
              url: domain + '/video/user',
              success(res){
                console.log(JSON.parse(res.data).data)
              }
            })
          }
        })
      },
    
      uploadChunk(){
        var that = this
        console.log('点击分片上传')
        wx.chooseMedia({
          count: 1,
          mediaType: ['image', 'video'],
          sourceType: ['album'],
          success(res){
            that.setData({
              thumbTempFilePath: res.tempFiles[0].thumbTempFilePath
            })
            console.log("正在计算文件的md5......")
            var index = 0
            var identifier = SparkMD5.ArrayBuffer.hash(wx.getFileSystemManager().readFileSync(res.tempFiles[0].tempFilePath, ''))
            that.setData({
              identifier: identifier
            })
            var tempFiles = res.tempFiles[0]
            var arr = tempFiles.tempFilePath.split('/')
            var fileName = arr[arr.length-1]
            that.setData({
              type: fileName.split('.')[1]
            })
            console.log(fileName)
            var bytesPerPiece = 8 * 1024 * 1024;
            var chunkNo = parseInt(tempFiles.size / bytesPerPiece)
            that.uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index)
          }
        })
      },
    
      async uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index){
        var that = this
        console.log("--------------------------------------------")
    
        if(index < chunkNo){
          var chunk = wx.getFileSystemManager().readFileSync(tempFiles.tempFilePath, '', index * bytesPerPiece, bytesPerPiece)
          console.log(chunk)
          try{
            wx.getFileSystemManager().writeFileSync(
              `${wx.env.USER_DATA_PATH}/${fileName}`,
              chunk,
              'utf-8'
            )
          } catch(e){
            console.error(e)
          }
          var obj = {fileMD5: identifier, sliceNo: index + 1, totalSliceNo: chunkNo + 1}
          var prog = index + 1
          var total = chunkNo + 1
          console.log(prog + '/' + total, obj);
          // 上传之前做备份，以便断点续传
          that.setData({
            tempFiles: tempFiles,
            fileName: fileName, 
            chunkNo: chunkNo, 
            bytesPerPiece: bytesPerPiece, 
            index: index,
          })
          console.log("正在上传......")
          that.data.uploadTask = wx.uploadFile({
            header: {
              'alexmisko-user': wx.getStorageSync('token')
            },
            url: domain + '/video/chunk/user',
            filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
            name: 'file',
            formData: obj,
            success(res) {
              console.log(res)
              index ++
              that.uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index)
            },
            fail(res) {
              console.log(res)
            }
          })
          that.data.uploadTask.onProgressUpdate((res) => {
            if(res.progress % 10 == 0){
              that.setData({
                percent: parseInt(res.progress / (that.data.chunkNo + 1) + index * 100 / chunkNo)
              })
              console.log('上传进度', res.progress)
              console.log('已经上传的数据长度', res.totalBytesSent)
              console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
            }
          })
        }
        if(index == chunkNo){
          var chunk = wx.getFileSystemManager().readFileSync(tempFiles.tempFilePath, '', index * bytesPerPiece, tempFiles.size - (index * bytesPerPiece))
          console.log(chunk)
          try{
            wx.getFileSystemManager().writeFileSync(
              `${wx.env.USER_DATA_PATH}/${fileName}`,
              chunk,
              'utf8'
            )
          } catch(e){
            console.error(e)
          }
          var obj = {fileMD5: identifier, sliceNo: index + 1, totalSliceNo: chunkNo + 1}
          var prog = index + 1
          var total = chunkNo + 1
          console.log(prog + '/' + total, obj);
          console.log("正在上传......")
          wx.uploadFile({
            header: {
              'alexmisko-user': wx.getStorageSync('token')
            },
            url: domain + '/video/chunk/user',
            filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
            name: 'file',
            formData: obj,
            success(res) {
              console.log(res)
              console.log("---------------------上传完成！---------------------")
              if(that.data.type == 'mp4'){
                console.log("开始上传缩略图")
                wx.uploadFile({
                  header: {
                    'alexmisko-user': wx.getStorageSync('token')
                  },
                  filePath: that.data.thumbTempFilePath,
                  name: 'img',
                  url: domain + '/video/user',
                  success(res1){
                    console.log("缩略图地址：")
                    var thumbUrl = JSON.parse(res1.data).data
                    console.log(thumbUrl)
                    console.log("视频地址：")
                    var url = JSON.parse(res.data).data
                    var media = {url: url, type: url.split('.')[3], digest: that.data.identifier, thumb: JSON.parse(res1.data).data}
                    that.data.media.push(media)
                    that.setData({
                      percent: 100,
                      media: that.data.media
                    })
                    console.log(url)
                    return;
                  }
                })
              }else{
                console.log("图片地址：")
                var url = JSON.parse(res.data).data
                var media = {url: url, type: url.split('.')[3], digest: that.data.identifier, thumb: ''}
                that.data.media.push(media)
                that.setData({
                  percent: 100,
                  media: that.data.media
                })
                console.log(url)
                return;
              }
            },
            fail(res) {
              console.log(res)
            }
          })
        }
      },
    
      cancel(){
        console.log('取消') 
        this.data.uploadTask.abort()
      },
    
      resume(){
        console.log("继续")
        this.uploader(this.data.tempFiles, this.data.fileName, this.data.chunkNo, this.data.identifier, this.data.bytesPerPiece, this.data.index)
      },
    
      close(e){
        console.log('关闭')
        this.data.media.splice(e.currentTarget.dataset.id, 1)
        this.setData({
          media: this.data.media
        })
      },
      
      label(){
        console.log('选择标签')
        wx.navigateTo({
          url: `../label/label?labelList=${JSON.stringify(this.data.labelList)}`,
        })
      },
    
      location(){
        // 先获取经纬度
        wx.getLocation({
         type: 'wgs84',
         success (res) {
            // 地图选点
            const key = '6CFBZ-VVOWK-GIEJF-AGSB6-FFWG7-VXB3Q'; //使用在腾讯位置服务申请的key
            const referer = '春禾支教'; //调用插件的app的名称
            const location = JSON.stringify({
              latitude: res.latitude,
              longitude: res.longitude
            });
            const category = '生活服务,娱乐休闲';
            wx.navigateTo({
              url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
            });
          }
        })
      },
    
      onShow(){
        const location = chooseLocation.getLocation();
        if(location != null){
          console.log(location)
          this.setData({
            location: location
          })
        }
        const userinfo = wx.getStorageSync('userinfo')
        this.setData({
          userinfo: userinfo
        })
      },
    
      publish(){
        this.setData({
          loading_icon: 'loading',
          loading_show: true,
          loading_title: '请等待...'
        })
        var that = this
        console.log("发布")
        wx.request({
          method: "POST",
          url: domain + '/video/flow/user',
          header: {
            "alexmisko-user": wx.getStorageSync('token')
          },
          data: {
            description: this.data.text,
            mediaList: this.data.media,
            longitude: this.data.location.longitude,
            latitude: this.data.location.latitude,
            location: this.data.location.name,
            tagList: this.data.labelList
          },
          success(res){
            console.log(res.data)
            that.setData({
              loading_icon: '',
              loading_title: res.data.msg,
              loading_show: true
            })
            if (res.data.code == "200"){
              that.setData({
                text: '',
                media: [],
                location: '',
                labelList: []
              })
            }
          }
        })
      },
    
      textInput(e){
        this.setData({
          text: e.detail.value
        })
      }
    })

## 5. 后端Redis上传的分片记录（需要后端代码的评论获取）： ##

![3d593df03b8642c88f804daa99cf5f80.png][]

[2c9be7bdc7ab41a9b7e2f6f08181a44d.png]: https://img-blog.csdnimg.cn/2c9be7bdc7ab41a9b7e2f6f08181a44d.png
[28ca59b2c1324000a8f55735db7bd43a.png]: https://img-blog.csdnimg.cn/28ca59b2c1324000a8f55735db7bd43a.png
[7b0a7b7ba35143139999608edf8425bc.png]: https://img-blog.csdnimg.cn/7b0a7b7ba35143139999608edf8425bc.png
[300390986255450f904b11c5f17e4033.png]: https://img-blog.csdnimg.cn/300390986255450f904b11c5f17e4033.png
[3d593df03b8642c88f804daa99cf5f80.png]: https://img-blog.csdnimg.cn/3d593df03b8642c88f804daa99cf5f80.png

发表评论取消回复

表情：

评论列表（有 0 条评论，51人围观）

还没有评论，来说两句吧...

相关阅读

相关文件上传图片上传（分布式文件服务器fastDFS）

在商品录入界面实现多图片上传（后端）第一步：引入依赖 <dependency> <groupId>org.csource.fastdfs</groupI

青旅半醒/ 2024年02月19日 15:26/ 0 赞/ 13 阅读

相关 OSS大文件分片上传

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、原理二、工具类二、注意事项总结 ----

电玩女神/ 2024年02月18日 11:01/ 0 赞/ 57 阅读

相关【微信小程序】大文件分片上传到FastDFS文件服务器

1. 小程序界面： ![2c9be7bdc7ab41a9b7e2f6f08181a44d.png][] 2. 计算文件的MD5： ![28ca59b2c13240

布满荆棘的人生/ 2023年10月11日 23:27/ 0 赞/ 52 阅读

相关 Linux搭建FastDFS文件服务器并实现springboot上传文件到FastDFS服务器

[www.myblogs.cn/fastDFS][www.myblogs.cn_fastDFS] 一，前言（1）`FastDFS`是什么 `FastDFS` 是用

心已赠人/ 2023年06月12日 04:14/ 0 赞/ 177 阅读

相关微信小程序上传图片/文件

微信官方文档有提供上传文件方法： wx.chooseMessageFile(Object object) > 基础库 2.5.0 开始支持，低版本需做[兼容处理]

水深无声/ 2022年12月18日 11:53/ 0 赞/ 227 阅读

相关微信小程序上传图片和文件

-------------------- 要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) ----

桃扇骨/ 2022年11月06日 12:51/ 0 赞/ 288 阅读

相关大文件分片上传

//分片逻辑像操作字符串一样 var start=0,end=0; while (true) {

àì夳堔傛蜴生んèń/ 2022年10月11日 15:56/ 0 赞/ 291 阅读

相关 java接收微信小程序上传的文件

用微信小程序上传文件,微信会生成一个wx://开头的临时地址,很多人看到这个临时地址直接懵逼了,文件在哪里啊,怎么取文件,其实文件流就在请求头里面,需要自己去读取.一开始我也走

太过爱你忘了你带给我的痛/ 2022年06月01日 02:58/ 0 赞/ 715 阅读

相关微信小程序上传图片文件小程序+Java

小程序代码： chooseImage(){ wx.chooseImage({ success: function (res)

我会带着你远行/ 2022年05月11日 05:34/ 0 赞/ 375 阅读

相关微信小程序环境下将文件上传到 OSS

步骤 1：配置 Bucket 跨域客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息

迷南。/ 2021年09月19日 16:46/ 0 赞/ 372 阅读