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

  • A+
所属分类：Web前端
摘要

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

七牛云图片、文件上传

⭐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" alt="vue网页小程序实现七牛云图片文件上传以及原生组件video显示不出问题"></image> </view>  <!-- 随便来张图片充当一下上传按钮即可 --> <view class="item" bindtap="uploadImg"> 	<image class="pic" src="/images/add_pic.png" alt="vue网页小程序实现七牛云图片文件上传以及原生组件video显示不出问题"></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" alt="vue网页小程序实现七牛云图片文件上传以及原生组件video显示不出问题"></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' });       },     });   },
便宜好用的国外VPS推荐