冰心玉洁小样儿 發表於 2020-2-16 23:25:00

微信小程序开发技巧总结（二） -- 文件的选取、移动、上传和下载

<h4 id="微信小程序开发技巧总结二-----文件的选取移动上传和下载">微信小程序开发技巧总结（二） --文件的选取、移动、上传和下载</h4>
<blockquote>
<p>文档更新 EXTEND</p>
</blockquote>
<ol>
<li>小程序使用 Promise.all 完成文件异步上传</li>
</ol>
<blockquote>
<p>1.不同类型文件的选取</p>
</blockquote>
<p><strong>1.1 常用的图片 视频</strong></p>
<p>对于大部分开发者来说，需要上传的文件形式主要为图片，微信为此提供了接口。</p>
<pre><code class="language-javascript">wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
}
})
</code></pre>
<p>其次为视频文件的选取，微信也为此提供了接口。</p>
<pre><code class="language-js">wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60, //视频长度 单位 s
camera: 'back', //选取前置摄像 还是 后置 摄像
success(res) {
    console.log(res.tempFilePath)
}
})
</code></pre>
<p>也为其提供了视频和图片的二合一接口，这个接口不建议调用，图片和视频的上传建议区分开。</p>
<pre><code class="language-js">wx.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
    console.log(res.tempFilePath)con
    console.log(res.size)
}
})
</code></pre>
<p>这几个接口调用成功的回调函数中，都返回的是文件在文件在本机中的路径。</p>
<pre><code class="language-js">res.tempFilePath
</code></pre>
<p>这是一个 数组，存放着选择的所有文件的路径，用于上传。</p>
<p><strong>1.2 其余形式各种文档</strong></p>
<p>那么如果是想要在小程序中上传 doc、pdf、ppt 等类型的文件怎么处理？首先要注意的是微信小程序并没有给用户提供文件管理器接口。</p>
<p><strong>开发者：我想要个文件管理器接口！</strong></p>
<p><strong>官方：不，你不想</strong></p>
<p>聪明的开发者他没有办法，只能另辟蹊径。微信提供了一个选择客户端会话文件的方法。</p>
<pre><code class="language-js">wx.chooseMessageFile({
   success(res){
       console.log(res.tempFilePath)
    }
})
</code></pre>
<p>与上面两个接口相同，返回的也是文件在本地的存储路径，但是不同的是，这个接口可以选取全部的文件类型。</p>
<p>开发者如果想要上传非图片和视频内容的话，需要两步走。</p>
<ol>
<li>打开微信文件传输助手，将想要上传的文件发送到文件传输助手</li>
<li>在小程序中调用这个接口，选择文件传输助手，从会话中选择想要上传的文件。</li>
</ol>
<p><img src="https://img2018.cnblogs.com/blog/1141382/202002/1141382-20200216204319121-903655157.png" alt="" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1141382/202002/1141382-20200216204814139-710426635.png" alt="" loading="lazy"></p>
<blockquote>
<p>2.文件的上传</p>
</blockquote>
<p><strong>2.1uploadFile方法</strong></p>
<p>所有的文件都是以字节流的形式进行上传，所以上传形式并没有什么本质区别，都是调用相应的接口进行上传。</p>
<p>小程序端写法如下：</p>
<pre><code class="language-js">wx.uploadFile({
      url: '你的服务器函数地址', //仅为示例，非真实的接口地址
      filePath: '需要上传的文件路径', //res.tempFilepaths
      name: 'file', // 文件对应的key ，默认 为 file
      formData: {
      'user': 'test'
      }, //上传额外携带的参数
      success (res){
      const data = res.data
      //do something
      }
})
</code></pre>
<p><strong>2.2 服务器端如何处理上传的文件</strong></p>
<p>服务端如何接受文件的上传？仅展示Java方式（SpringBoot 框架）</p>
<pre><code class="language-java">@Controller
@ResponseBody
public class FileController {
    //文件上传控制类,是核心配置类，Win &lt;-&gt;Linux
    @RequestMapping(value = "/upload/images")
    public String uploadimages(HttpServletRequest request,@RequestParam("file") MultipartFile file, @RequestParam("user") String user) throws IOException {
       //更换服务器，这个值也需要修改
      //图片上传写法
      //type 是上传图片的类型
      if(!file.isEmpty()){
            //文件不为空
            //String path = "E:"+File.separator+"images"+File.separator+type; // this is windows method
            String path = "/share"+File.separator+"images"+File.separator+type;
            // this is Linux method
            String filename = file.getOriginalFilename();
            File filepath = new File(path,filename);//新建文件存储路径
            System.out.println(filepath);
            if(!filepath.getParentFile().mkdirs()){
                filepath.getParentFile().mkdirs();
            }
            file.transferTo(new File(path+File.separator+filename));
         //想要返回可直接访问的链接还要配置 映射，具体请看下面链接
            return "你的IP地址"+"/images/"+type+"/"+filename;
      }else {
            return "error";
      }
    }
}
</code></pre>
<p>配置访问映射</p>
<p>文件访问映射</p>
<p><strong>2.3 云开发文件上传</strong></p>
<p>微信小程序支持云开发，其文件上传接口有一些差异，但是不需要自己再构建后台。</p>
<pre><code class="language-js">wx.cloud.uploadFile({
cloudPath: 'file/' + '你的文件名字（带格式后缀）', // 在云端存储的路径
filePath: '', // 就是选择文件返回的路径
}).then(res =&gt; {
// get resource ID
console.log(res.fileID)
}).catch(error =&gt; {
// handle error
})
</code></pre>
<p>我们可以根据返回的fileID 置换 真实的文件访问地址。</p>
<p>其置换方式参见官方文档：</p>
<pre><code class="language-js">wx.cloud.getTempFileURL({
fileList: ['cloud://xxx', 'cloud://yyy'],
success: res =&gt; {
    // get temp file URL
    console.log(res.fileList)
},
fail: err =&gt; {
    // handle error
}
})
</code></pre>
<p><strong>TIPS：关于云开发文件上传的建议</strong></p>
<ol>
<li>如果没有保密需求，为了方便后续开发，存储到数据库中的最好是可以直接访问的文件链接。</li>
<li>置换真实文件地址，不要每次上传一次文件就置换一次，先把返回的fileID 存放在数组中，到该事务所有上传完成后，再使用fileID 数组置换真实文件访问链接数组。</li>
<li>要考虑文件名重复的可能，建议使用时间戳在 wx.cloud.uploadFile 中的 cloudPath 中对存储到云环境中的文件命名进行格式化。</li>
</ol>
<p>总的来说就是先上传文件，再向数据库中写入记录。</p>
<p><strong>2.4 多文件同时上传的处理方式</strong></p>
<p><strong>uploadFile 每次只能上传一个文件</strong></p>
<p>如何处理这个问题？</p>
<p><em>A.不考虑文件的上传次序问题，可以采用遍历上传的方式，采用精确的时间戳和遍历index对文件名进行格式化。通过定时触发检测函数判断是否全部上传完成。这种方式考虑的是并发能力。</em></p>
<pre><code class="language-js">upSeveralfiles() {
      wx.showLoading({
      title: '上传中~',
      mask: true
      })
      var that = this;
      var timecode = sev.vcode(new Date()); // 这是时间戳编码函数
      var files = this.data.fileList;       // 这是 选择文件中返回的 res.tempFilePath 数组
      var len = files.length;
      var i = 0;
      for (i = 0; i &lt; len; i++) {
      var str = files.name;
      wx.cloud.uploadFile({
          cloudPath: 'file/' + '(' + sev.getformatTime(new Date()) + ')' + str,
          filePath: files.path,
          success(res) {
            console.log(res)
            that.setData({
            cloudlist: that.data.cloudlist.concat(),

            })
             // cloudlist 是存放 文件链接置换id 的数组 , 非云开发存储的就是真实可访问的链接数组
             // 如果使用的不是云开发 那么 可以返回真实的 访问地址
          },
          fail(res) {
            console.log(res)
          }
      })
      }
    // 使用定时器检测文件是否全部上传完成 , 并 判断是否进行下一步 操作
      var timer = setInterval(function () {
      if (that.data.cloudlist.length == len) {
          // 只有全部上传成功了 长度才会相等
          clearInterval(timer);
          // 继续执行下一步 ，根据 cloudlist 置换真实地址 并存放到数据库
          //　如果使用的非云开发，那么就继续执行　存储至数据库的操作
      }
      }, 1000)
   }
</code></pre>
<p>补充文件编码函数 sev.js 中的根据时间编码部分 , 可以根据实际流量自定义。</p>
<pre><code class="language-js">function getformatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()

return .map(formatNumber).join('-');
};
</code></pre>
<p><em>B.考虑文件的上传次序问题,采用回调方式进行文件上传(更推荐使用这种方式)</em></p>
<pre><code class="language-js">data: {
    fileList: [],
    realList: [],//云端地址链接列表
    fileid: 0,
},
upSeveralfiles() {
    var that = this;
    var files = this.data.fileList;       // 这是 选择文件中返回的 res.tempFilePath 数组
    var len = files.length;
    var uid = this.data.fileid;
    wx.uploadFile({
      url: '你的服务器文件接收函数请求地址',
      name: 'file',
      filePath: files,
      header: {
      "Content-Type": "multipart/form-data"
      },
      success(res) {
      that.setData({
          fileid: uid + 1,
          realList: that.data.realList.concat()
      }, () =&gt; {
          if (that.data.fileid == len) {
            // 上传完成 ,执行下一步操作
            
          } else {
            //上传完一个文件 递归执行 下次上传
            that.upSeveralfiles();
          }
      })
      }, fail(res) {
      console.log(res.data)
      }
    })

},
</code></pre>
<p>以上是提供的两种思路 , 无论是不是云开发 , 两种思路都是共通的,适用于多文件上传.</p>
<blockquote>
<p>3.文件的下载</p>
</blockquote>
<p>这个地方唯一值得注意的是云开发的一种下载方式 可以通过fileID进行download , 当然只能下载存储在自己云环境中的文件.</p>
<pre><code class="language-js">wx.cloud.downloadFile({
fileID: '',
success: res =&gt; {
    console.log(res.tempFilePath)
},
fail: err =&gt; {
}
})
</code></pre>
<pre><code class="language-js">wx.downloadFile({
url: '', //仅为示例，并非真实的资源
success (res) {
   //res.tempFilePath
})
</code></pre>
<p>下载进度监控 ,用于下载进度条绘制等功能实现</p>
<pre><code class="language-js">const downloadTask = wx.cloud.downloadFile({ *** }) // wx.downloadFile 同理
downloadTask.onProgressUpdate((res) =&gt; {
    //res.progress 为下载进度
})
</code></pre>
<p>下载下来的文件支持直接打开,就像是在微信聊天中打开一样，需要下载插件。</p>
<p>其使用方式为:</p>
<pre><code class="language-js">wx.openDocument({
   filePath: res.tempFilePath //为文件路径 非数组 , 可使用回调函数 success 等
})
</code></pre>
<blockquote>
<p>4.文件的移动</p>
</blockquote>
<p>这个一般情况下是用不到的, 也不建议使用移动文件的方法作为功能实现手段 ,必然有更好的替代方式,比如修改数据库路径 和 真实文件路径的映射, 效率更高一些.</p>
<p>具体开发文档</p>
<p>建议在数据库中修改映射路径最好。</p>
<p>需要小程序开发的请联系我QQ ： <strong>1025584691</strong></p><br><br>
来源：https://www.cnblogs.com/masterchd/p/12319440.html
頁: [1]
查看完整版本: 微信小程序开发技巧总结（二） -- 文件的选取、移动、上传和下载