詳解vue 圖片上傳功能
這次做了vue頁面的圖片上傳功能,不帶裁剪功能的!
首先是html代碼,在input框上添加change事件,如下:
<ul class="clearfix">
<li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>
<img :src="item">
</li>
<li style="position:relative" v-if="imgs.length>=6 ? false : true">
<img src="../../assets/img/addimg.png"><input class="upload" @change='add_img' type="file">
</li>
</ul>
我這里做了圖片數(shù)量的限制,最多6張。
然后是data數(shù)據(jù),如下:
data () {
return {
imgs: [],
imgData: {
accept: 'image/gif, image/jpeg, image/png, image/jpg',
}
}
}
imgs數(shù)組是放圖片路徑的,頁面顯示圖片就是循環(huán)這個數(shù)組,imgData是判斷圖片類型的。
接下來是最重要的methods里面的方法,具體如下:
add_img(event){
let reader =new FileReader();
let img1=event.target.files[0];
let type=img1.type;//文件的類型,判斷是否是圖片
let size=img1.size;//文件的大小,判斷圖片的大小
if(this.imgData.accept.indexOf(type) == -1){
alert('請選擇我們支持的圖片格式!');
return false;
}
if(size>3145728){
alert('請選擇3M以內(nèi)的圖片!');
return false;
}
var uri = ''
let form = new FormData();
form.append('file',img1,img1.name);
this.$http.post('/file/upload',form,{
headers:{'Content-Type':'multipart/form-data'}
}).then(response => {
console.log(response.data)
uri = response.data.url
reader.readAsDataURL(img1);
var that=this;
reader.onloadend=function(){
that.imgs.push(uri);
}
}).catch(error => {
alert('上傳圖片出錯!');
})
},
首先是獲取你選擇的圖片,判斷圖片的類型和大小,然后以form表單的形式提交到后臺,后臺會返回給你這個圖片的線上路徑,你把后臺返回的圖片路徑push到圖片數(shù)組里面就可以了。
一般情況下還有刪除圖片的方法,就是把圖片數(shù)組里的那個路徑刪除掉,把數(shù)據(jù)提交到后臺,告訴后臺刪除了哪張圖片就可以了。
以上所述是小編給大家介紹的vue 圖片上傳功能詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- vue+node實現(xiàn)圖片上傳及預覽的示例方法
- 基于vue-upload-component封裝一個圖片上傳組件的示例
- vue.js 圖片上傳并預覽及圖片更換功能的實現(xiàn)代碼
- 使用Vue實現(xiàn)圖片上傳的三種方式
- Vue2.0 實現(xiàn)移動端圖片上傳功能
- Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能 exif.js實現(xiàn)圖片上傳功能
- vue-quill-editor實現(xiàn)圖片上傳功能
- 基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能
- vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理
- Vue.js 2.0 移動端拍照壓縮圖片上傳預覽功能
相關文章
vue2使用wangeditor實現(xiàn)手寫輸入功能
這篇文章主要為大家詳細介紹了vue2如何使用wangeditor實現(xiàn)手寫輸入功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12
vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過實例給大家介紹了vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04
Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能,本文通過截圖實例代碼說明給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關資料,允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01

