vue上傳圖片


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('上傳圖片出錯(cuò)!');
            })    
}
--------------------- 
版權(quán)聲明:本文為CSDN博主「小雷雷哥哥」的原創(chuàng)文章,遵循CC 4.0 by-sa版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/leileibrother/article/details/79020758
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近Vue項(xiàng)目中,要將用戶上傳的圖片全部上傳到oss上,OSS配置項(xiàng)請?jiān)L問:https://help.aliyun...
    莫言_jc閱讀 6,986評論 4 5
  • 上傳圖片,我們在做項(xiàng)目過程會(huì)經(jīng)常遇到,在此,總結(jié)一下,方便以后工作,也可以為有興趣的朋友提供一個(gè)思路,請看代碼 注...
    Amy_yqh閱讀 1,370評論 0 10
  • 這段時(shí)間公司再讓用vue做前端,在做一個(gè)圖片上傳功能,百度了半天,我們都知道base64是一個(gè)字符串 他的原理是通...
    Harry小哥哥閱讀 241評論 0 0
  • 一個(gè)上傳頭像的功能,后端給的接口可以接收base64格式的,用的UI框架是vant-ui,需求和準(zhǔn)備大概就這樣,如...
    小蝦米前端閱讀 3,877評論 0 0
  • HTML: css: hiddenInput給加個(gè)display:none, 默認(rèn)樣式比較丑所以給隱藏了 js: ...
    野蘑菇丶閱讀 692評論 0 0

友情鏈接更多精彩內(nèi)容