vueに画像を挿入する方法

vue に画像を挿入する方法: 最初に画像を保存する静的フォルダーを作成し、次にクリック イベントを記述します。コードは [url:'/api/api/add/'] で、最後にデータを取得します。バックエンドで。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

vue に画像を挿入する方法:

最初 画像を保存する静的フォルダーの作成を開始します

設定に移動します。

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

#先頭の大文字はデッドフォーマットです、間違って書かないように注意してください

第一レベルのルートに書きます

re_path(r&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: settings.MEDIA_ROOT})

テンプレートには次のように書きますvue

<div>
    姓名：<input type="text" v-model="name"><br>
    图片：<input type="file" id="img"><br>      #这个ID是下面用来获取它的属性值的
    <button @click=&#39;my_add()&#39;>添加</button>
</div>

次に、クリック イベントを記述する必要があります (ここでは FormData が使用されています。理解できない場合は、公式 Web サイトで確認できます: https://developer.mozilla.org/zh- CN/docs/Web/ API/FormData/FormData)

methods:{
            my_add:function(){
                let form_data = new FormData();   #实例化一个FormData
                form_data.append('name',this.name);   #把数据添加到这个实例中
                let img = document.getElementById('img').files[0];  #获取id的属性
                form_data.append('img',img);       #把图拍片名称添加到这个实例中
                this.axios({
                    url:'/api/api/add/',    #连接后台接口  第一个api是跨域的配置，第二个api是我的后台一级路由
                    method:'post',      #用post方法进行提交数据
                    headers:{'Content-Type':'multipart/form-data'},  #'Content-Type': 'multipart/form-data' ：指定传输数据为二进制数据，例如图片、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
                })
            }
        }

バックエンドでのデータの取得

        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:    #循环写入文件‘wb’
            for k in img.chunks():          #避免文件太大，就把它分成块写入
                f.write(k)

関連学習の推奨事項: JavaScript 学習チュートリアル

以上がvueに画像を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。