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' });
      },
    });
  },