欢迎光临
我的个人博客网站

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' });       },     });   }, 
赞(0) 打赏
未经允许不得转载:张拓的天空 » vue网页小程序实现七牛云图片文件上传以及原生组件video显示不出问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏