欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-upload上傳圖片到七牛的示例代碼

 更新時間:2018年10月19日 14:25:37   作者:baozisss  
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實(shí)現(xiàn)思路其實(shí)也很簡單,需要從后臺獲取七牛token上傳圖片到七牛,具體示例代碼大家跟隨小編一起學(xué)習(xí)吧

一、思路,從后臺獲取七牛token,上傳圖片到七牛,獲取返回圖片路徑放入el-upload。

二、代碼。

<el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input>
  <el-col :span="10" class="mt10">
  <el-upload class="upload-demo" :file-list="fileList2" :action="domain" :before-upload="beforeAvatarUpload" :data="form"
  :on-remove="handleRemoveQrgLogo" :on-success="handleAvatarSuccess" list-type="picture" :limit="1" multiple>
  <el-button size="small" type="primary" @click="upPicName='orgLogo'">點(diǎn)擊上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div>
  </el-upload>
  </el-col>

export default {
 name: 'edit',
 data() {
 return {
 upPicName:'', //上傳圖片名字
 fileList1:[],
 form: {}, //上傳到七牛的token 
 bucketQuery:{
  bucket: 'website-image' //這是我用來獲取token傳給后臺的字段
 },
 domain: 'http://upload.qiniu.com', // 七牛云的上傳地址
 qiniuaddr: 'pd6rnk9ck.bkt.clouddn.com' // 這是七牛云空間的外鏈默認(rèn)域名
 }
 },
 methods: {
 // 上傳圖片規(guī)格
 beforeAvatarUpload (file) {
 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
 const isLt2M = file.size / 1024 / 1024 < 5
 if (!isJPG) {
  return this.$message.error('上傳文件只能是 JPG或PNG 格式!')
 }
 if (!isLt2M) {
  return this.$message.error('上傳圖片大小不能超過 5MB!')
 }
 return upQiniu(this.bucketQuery).then(res => {
  this.form = {
  token:res.data
  }
 })
 },
 //圖片改變及上傳
 bannerPicChange(value) {
 this.fileList1 = []
 this.fileList1.push({
  name: value, 
  url: value
 }) 
 },
 handleBannerPicRemove(file, fileList) {
 this.fileList1 = []
 this.listVideoQuery.orgLogo= ''
 },
 handleAvatarSuccess(response) {
 if(this.upPicName =='orgLogo'){
  this.fileList1 = []
  this.fileList1.push({
  name: 'http://' + this.qiniuaddr + '/' + response.key, 
  url: 'http://' + this.qiniuaddr + '/' + response.key
  }) 
  this.listVideoQuery.orgLogo= 'http://' + this.qiniuaddr + '/' + response.key
 }
 this.$message({
  type: 'success',
  message: '上傳成功!',
  duration: 2000
 }) 
 },
 }
 }

三、效果。

總結(jié)

以上所述是小編給大家介紹的vue中el-upload上傳圖片到七牛的示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 基于axios請求封裝的vue應(yīng)用實(shí)例代碼

    基于axios請求封裝的vue應(yīng)用實(shí)例代碼

    這篇文章主要給大家介紹了基于axios請求封裝的vue應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • 使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例

    使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例

    今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能

    純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能

    對于vue下的雙向綁定功能,個人理解為在處理邏輯的過程中緩存了大量的node對象,node對象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對象,那么在用的過程中哪里需要改變就把node拿出來,進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定
    2021-06-06
  • vue 移動端適配方案詳解

    vue 移動端適配方案詳解

    這篇文章主要介紹了vue 移動端適配方案詳解,詳細(xì)的介紹2種方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 從0搭建vue3組件庫Input組件

    從0搭建vue3組件庫Input組件

    這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個功能的實(shí)現(xiàn)代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進(jìn)行實(shí)例代碼講解,需要的朋友可以參考下
    2022-11-11
  • vue.js的安裝方法

    vue.js的安裝方法

    這篇文章主要為大家詳細(xì)介紹了vue.js的安裝方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)

    Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)

    在前后端分離的項(xiàng)目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下
    2023-09-09
  • 如何在vue中使用video.js播放m3u8格式的視頻

    如何在vue中使用video.js播放m3u8格式的視頻

    這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-02-02
  • Vue項(xiàng)目打包成Docker鏡像包的簡單步驟

    Vue項(xiàng)目打包成Docker鏡像包的簡單步驟

    最近做時速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下
    2023-10-10
  • vue實(shí)現(xiàn)表單驗(yàn)證功能

    vue實(shí)現(xiàn)表單驗(yàn)證功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能,基于NUXT的validate方法實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08

最新評論