[移动开发]微信小程序上传功能

踩坑篇

最近在搞微信小程序的视频上传功能，很简单的一个问题却折腾许久，甚至反复怀疑后端功能性错误
唠一唠小程序端和PC端上传组件不一样的地方
其实之前有做过 PC端的上传功能，当时是在表单中上传一个压缩包，直接采用elementUI中的upload组件

<el-upload
  class="upload-demo"
  action="上传地址"
  :file-list="fileList">
</el-upload>

直接填一个上传地址即可，也不用约定什么上传请求头，组件一把梭
在微信小程序端上传有对应的JSAPI (wx.uploadFile)

 wx.uploadFile({
      url: '上传地址',
      filePath: tempFilePaths[0],
      name: 'file',//踩坑就踩在这里，后端接收到的是要写在下面formData里的参数，并且对上传文件没有做类型限制，所以约定为data,这个data里有所要上传文件的二进制文件，后端依靠解析data拿到文件字节信息
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })

踩坑的地方就是对formdata不了解，上面name:'file’和formData:{}这两个根本就是一体的，name是必传参数 formData是额外传参
之前一直纠结于 要把name放到formData里
因为后端一直强调 只能接收formData里的信息，这里就给我造成了误解，归根结底原因就是自己对formData这个上传文件的东西不了解
甚至有想过改后端代码。。。

小程序上传的流程大概在这里 不过网络信息众说纷纭，说几个避坑的
1、文件选中之后上传 会到微信服务器 它这边会返回一个临时地址 只可用于微信小程序上的一个即时展示，并不是说把这个地址返给服务端 让服务端通过那个临时地址去下载文件
2、大体说来，小程序和pc端上传流程是没有区别的 只是小程序端写死了一个name 这个name就是服务端获取文件对应的key

一言以蔽之：前端的name 就是 服务端需要的 文件本身 信息

补充 多图片上传

小程序本身支持media属性 可以同时图片和视频上传
但是视频多选也只能上传一个

 // 文件上传
  afterRead(event) {
    // const { file } = event.detail;
    // 判断 如果是视频类型传一个  图片就循环传
    // 视频默认传一个  微信不允许一次上传多个 多选也不好使
    if (file[0].type === 'video') {
    // 这里很坑 文件上传 居然找不到 图片原来的文件名  就离谱
      const fileNames = (file[0].url).slice(11)
      wx.uploadFile({
        url: 'http://127.0.0.1:8081/video/uploadVideo',
        filePath: file[0].url, //本地路径
        name: 'data',
        formData: {
        },
        success(res) {
          console.log('上传返回视频数据', res);
        },
        fail(err) {
          console.log('err', err);
        }
      });
    } else {
      // 循环上传选中的图片
      for (var i = 0; i < file.length; i++) {
        let imgUrl = file[i].url;
        const fileNames = (file[i].url).slice(11)
        wx.uploadFile({
          url: 'http://127.0.0.1:8081/video/uploadVideo',
          filePath: imgUrl,
          name: 'data',
          formData: {
          },
          success: (res) => {
            console.log("success", res);
          },
          fail: (res) => {
            console.log("error", res);
          }
        });
      } //for循环结束
    }
  },

道阻且长，行则将至