快捷導(dǎo)航

vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳

更新時(shí)間：2020年06月30日 16:30:15 作者：--新芽-

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下

功能

實(shí)現(xiàn)圖片上傳
顯示進(jìn)度條

<template>
 <div class="about">
 <div>
 <div>
 <img :src="'https://www.xxx.com'+item" alt="" v-for="item in pics" >
 </div>
 <label><input type="file" ref="file" @change="up()">+<span class="label" :style="{width:pre+'%'}"></span></label>
 </div> 
 </div>
</template>
<style scoped="scoped">
 label{
 width: 100px;
 height: 100px;
 display: inline-block;
 overflow: hidden;
 background-color: #CCCCCC;
 color: #FFFFFF;
 font-size: 48px;
 text-align: center;
 line-height: 100px;
 position: relative;
 }
 input{display: none;}
 .label{
 position: absolute;
 display: inline-block;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 0%;
 background-color: #FFA500; 
 }
 
</style>
<script>
 export default{
 name: 'About',
 data(){
 return{
 pics:[],
 pre:0,
 }
 },
 methods:{
 up(){
 var that=this;
 var file=this.$refs.file.files[0];
 var data=new FormData();
 data.append("file",file);
 this.$http.post("https://www.xxx.com/ajax/file.php",data,{
 onUploadProgress:e=>{
 this.pre=e.loaded/e.total*100
 console.log("+++",e)
 }
 })
 .then(res=>{
 if(res.data.error==0){
 this.pics.push(res.data.pic)
 console.log("----",res)
 }
 
 })
 .catch(err=>{
 console.log(err)
 })
 this.pre=0
 },
 
 }
 }
</script>

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法
這篇文章主要介紹了前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作
這篇文章主要介紹了Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue實(shí)現(xiàn)table上下移動(dòng)功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)table上下移動(dòng)功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
vue.js實(shí)現(xiàn)的全選與全不選功能示例【基于elementui】
這篇文章主要介紹了vue.js實(shí)現(xiàn)的全選與全不選功能,結(jié)合實(shí)例形式分析了vue.js基于elementui實(shí)現(xiàn)全選與全不選功能的相關(guān)頁(yè)面渲染、初始化數(shù)據(jù)及功能函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
vue中node_modules中第三方模塊的修改使用詳解
這篇文章主要介紹了vue中node_modules中第三方模塊的修改使用,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Vue分頁(yè)器實(shí)現(xiàn)原理詳解
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)器實(shí)現(xiàn)原理，編寫了分頁(yè)器組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
webstorm添加vue.js支持的方法教程
因?yàn)楸救耸褂玫氖莣ebstorm2016 2.3版本，結(jié)果竟然不支持vue文件，所以找到了一個(gè)解決方法，下面這篇文章主要給大家介紹了關(guān)于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題
這篇文章主要介紹了Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
簡(jiǎn)單聊聊vue2.x的$attrs和$listeners
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下
2022-03-03