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

服务器：阿里云 后端：PHP，提供上传接口

用到相关API： ：显示操作菜单

：从本地相册选择图片或使用相机拍照，该api后期官方不维护，可使用 api ：拍摄视频或从手机相册中选视频

：拍摄或从手机相册中选择图片或视频，官方提示：此接口不再更新，建议使用 wx.chooseMedia

选择需要上传的文件：

//可以选择视频或者图片
 uploadFiles(){
          
   
    var _this = this;
      wx.showActionSheet({
          
   
          itemList: [选择图片, 选择视频],
          success: function (res) {
          
   
              let xindex = res.tapIndex;
              if (xindex == 0){
          
   
                // 选择图片
                  _this.chooseImage()
              } else if (xindex == 1){
          
   
                // 选择视频
                _this.chooseVideo()
              }
          },
          fail: function (res) {
          
   
              console.log(res.errMsg)
          }
      })
  },

选择图片或拍照

选择视频或拍摄

上传服务器

upImgs(dataInfo, type) {
          
   
     let that=this
     wx.showLoading({
          
   
       title: 上传中,
       mask:true,
     })
     wx.uploadFile({
          
   
       url: 上传的网络地址,
       filePath: type==video?dataInfo.tempFilePath:dataInfo.path,
       formData:null,
       name: file,
       header: {
          
   
         content-type: multipart/form-data
       },
       success:(res=>{
          
   
           wx.hideLoading()
          //判断上传的是图片还是视频
            if(type=="video"){
          
   
              that.setData({
          
   
              	console.log(视频地址：+data.data.src)
              	console.log(视频封面：+data.data.src+?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_400,m_fast)
            }else{
          
   
             console.log(图片地址：+ data.data.src)
            }
       })
     })
   },