小編給大家分享一下vue如何插入圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元橫縣做網(wǎng)站,已為上家服務(wù),為橫縣各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

vue插入圖片的方法：首先創(chuàng)建一個static文件夾用來保存圖片；然后寫點(diǎn)擊事件，代碼為【url:'/api/api/add/'】；最后在后端獲取數(shù)據(jù)。

vue插入圖片的方法：

首先開始創(chuàng)建一個static文件夾用來保存圖片

去 setting 里面進(jìn)行配置

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

#前面大寫的是死格式，盡量不要寫錯

一級路由里面寫

re_path(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT})

在vue中的templates里這樣寫

    姓名：

    圖片：
      #這個ID是下面用來獲取它的屬性值的
    添加

接下來我們就該寫點(diǎn)擊事件了   （這里用到了FormData：不了解的可以去它的官網(wǎng)去查一查：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData）

methods:{
            my_add:function(){
                let form_data = new FormData();   #實(shí)例化一個FormData
                form_data.append('name',this.name);   #把數(shù)據(jù)添加到這個實(shí)例中
                let img = document.getElementById('img').files[0];  #獲取id的屬性
                form_data.append('img',img);       #把圖拍片名稱添加到這個實(shí)例中
                this.axios({
                    url:'/api/api/add/',    #連接后臺接口  第一個api是跨域的配置，第二個api是我的后臺一級路由
                    method:'post',      #用post方法進(jìn)行提交數(shù)據(jù)
                    headers:{'Content-Type':'multipart/form-data'},  #'Content-Type': 'multipart/form-data' ：指定傳輸數(shù)據(jù)為二進(jìn)制數(shù)據(jù)，例如圖片、mp3、文件
                    data:form_data,    
                }).then(res=>{
                    if(res.data.code==200){
                        alert(res.data.message)  #這是code等于200的時候打印的
                    }
                    else{
                        alert(res.data.message) #這是code等于其他值 的時候打印的
                    }
                }).catch(err=>{
                    console.log(err)    #把錯誤警告提交到console
                })
            }
        }

后端獲取數(shù)據(jù)

        name = request.data.get('name')    #獲取頁面上輸入的名字
        img = request.FILES.get('img')       #獲取頁面上添加的圖片
        img_name = img.name     #取出文件的名字
        img_path = 'static/upload/' + img_name     #給圖片名字前面拼接上路徑    這就是它的路徑
        with open(img_path,'wb') as f:    #循環(huán)寫入文件‘wb’
            for k in img.chunks():          #避免文件太大，就把它分成塊寫入
                f.write(k)

以上是“vue如何插入圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！