vue网页小程序实现七牛云图片文件上传以及原生组件video显示不出问题

七牛云图片、文件上传

⭐vue网页端

一般vue项目搭载 element-ui，因此我们直接采用 el-upload 组件实现图片、文件上传。本文以图片上传为例

① 获取七牛云上传参数，即上传所需token

在methods里面定义一个方法 getQiniuToken

// 获取七牛云上传参数
getQiniuToken{
    // 这里采用axios调取接口， baseUrl即为接口请求服务器地址
 this.$axios.post(baseUrl+'api/upload_qiniu_get_token',{
    }).then((res) => {
     // 下面保存参数，视具体接口而变
    var data = res.data;
    if(data.error_code == 0){
        this.uploadData = {
        	token:data.token // 获取上传token
    	}
    	this.img_domain = data.host; // 保存图片前缀
    }
    }).catch((err) => {

    });
}

② el-upload 组件使用

action参数：根据存储区域会有相应的上传地址，

data参数： 上传所需参数即 {token: xxx}

  <el-upload
      action="https://upload-z2.qiniup.com"
      :data="uploadData"
      :show-file-list="false"
      accept="image/*"
      :on-success="handleSuccess">
      <el-image
          style="width: 100px; height: 100px"
          :src="img"
          fit="cover">
          <div slot="error" class="image-slot">
          	<i class="el-icon-picture-outline"></i>
          </div>
      </el-image>
  </el-upload>

③上传成功，保存地址，借助 el-image展示图片

handleSuccess(res){
    this.img = this.img_domain + res.key; 
    // res.key是上传七牛云服务器后换来的凭证，拼接图片前缀，即可展示图片
}

⭐小程序版

上传图片

① 获取七牛云参数

// 获取七牛云参数
  getQiniuToken(){
    let that = this
    // 请求接口
    request.request('get','api/upload_qiniu_get_token',{
      
    },function(res){
      console.log(res)
      if (res.error_code == 0) {
        that.setData({
          token: res.data.token  // 将上传token保存下来
        })
      }
      else{
        wx.showToast({
          title: res.error_message,
          icon : 'none'
        })
      }
    },(err)=>{
    })
  },

② 上传图片

<!-- 上传图片展示的地方imgs -->
<view class="item" wx:for="{{imgs}}" wx:key="index">
   <image class="pic" bindtap="previewImg" data-index="{{index}}" src="{{item}}"></image>
   <image class="close" bindtap="delImg" data-index="{{index}}" src="/images/muban/close.png"></image>
</view>

<!-- 随便来张图片充当一下上传按钮即可 -->
<view class="item" bindtap="uploadImg">
	<image class="pic" src="/images/add_pic.png"></image>
</view>

uploadImg方法

// 调用微信选择图片api  
uploadImg() {
	let that = this
	wx.chooseImage({
      count: 9,
      success (res) {
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          // 显示加载
           wx.showLoading({
            title: '玩命加载中',
          })
          // 实现多图片上传
          for(let i=0;i<tempFilePaths.length;i++){
              wx.uploadFile({
                  url: 'https://up-z2.qiniup.com', // 七牛云上传地址
                  filePath: tempFilePaths[i],
                  name: 'file',
                  formData: {
                  'token': that.data.token, // 上传token
                  },
                  success (res){
                      console.log(res)
                      let domain = that.data.img_domain
                      const data = JSON.parse(res.data)
                      that.data.imgs.push(domain + data.key) //拼接图片
                      that.setData({
                          imgs: that.data.imgs 
                      })
                     
                  },
                  complete(){
                      if(i == tempFilePaths.length-1){
                          wx.hideLoading()
                      }
                  }
              })
          }
       }
    })
}

previewImg预览图片

// 点击放大预览图片
previewImg(e){
     var index = e.currentTarget.dataset.index;
	 wx.previewImage({
        current: this.data.imgs[index], 
        urls: this.data.imgs
    })
}

delImg删除图片

  // 删除图片
  delImg(e){
    var index = e.currentTarget.dataset.index;
    this.data.imgs.splice(index,1);
    this.setData({
        imgs: this.data.imgs
    })
  },

上传视频

与上传图片类似，这里就贴一下上传的方法好啦

 // 上传视频
  uploadVideo(e){
    let that = this
    wx.chooseVideo({
      success (res) {
          const tempFilePaths = res.tempFilePath
          console.log(res)
          // 显示加载
           wx.showLoading({
            title: '玩命加载中',
          })
          wx.uploadFile({
              url: 'https://upload-z2.qiniup.com', 
              filePath: tempFilePaths,
              name: 'file',
              formData: {
                  'token': that.data.token
              },
              success (res){
                  console.log(res)
                  let domain = that.data.video_domain
                  const data = JSON.parse(res.data)
                  that.data.videos.push(domain + data.key)
                  that.setData({
                      videos: that.data.videos
                  })
              },
              complete(){
                  wx.hideLoading()
              }
          })
      }
  	})
  },

预览视频失败解决

有些时候会遇到直接点击 video微信原生组件会出现黑屏或不显示问题，这边推荐使用小程序的 previewMedia 接口来实现预览

<view class="item" wx:for="{{videos}}" wx:key="index">
    <video class="pic" bindtap="onPreviewVideo" data-url="{{item}}" src="{{item}}"></video>
    <image class="close" bindtap="delVideo" data-index="{{index}}" src="/images/muban/close.png"></image>
</view>

 // 预览视频
  onPreviewVideo(e){
    // 获取视频地址
    let urls = e.currentTarget.dataset.url
    console.log(urls)
    wx.previewMedia({
      sources: [{
        url: urls,
        type: 'video',
        poster:'https://i.loli.net/2021/08/26/vhdxCoH3wUq9nZz.png' // 预览图，随喜好来，不写也没事
      }],
      current: 0,
      fail() {
        wx.showToast({ title: '预览视频失败', icon: 'none' });
      },
    });
  },