溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這次做了vue頁面的圖片上傳功能，不帶裁剪功能的！
首先是html代碼，在input框上添加change事件，如下：
<ul class="clearfix">
<li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>
<img :src="item">
</li>
<li v-if="imgs.length>=6 ? false : true">
<img src="../../assets/img/addimg.png"><input class="upload" @change='add_img' type="file">
</li>
</ul>
我這里做了圖片數量的限制，最多6張。
然后是data數據，如下：
data () {
return {
imgs: [],
imgData: {
accept: 'image/gif, image/jpeg, image/png, image/jpg',
}
}
}
imgs數組是放圖片路徑的，頁面顯示圖片就是循環這個數組，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以內的圖片！');
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到圖片數組里面就可以了。
一般情況下還有刪除圖片的方法，就是把圖片數組里的那個路徑刪除掉，把數據提交到后臺，告訴后臺刪除了哪張圖片就可以了。
以上所述是小編給大家介紹的vue 圖片上傳功能詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
