Vue에 그림을 삽입하는 방법

coldplay.xixi
풀어 주다: 2020-11-30 14:41:41
원래의
11817명이 탐색했습니다.

vue에 그림을 삽입하는 방법: 먼저 그림을 저장할 정적 폴더를 만든 다음 클릭 이벤트를 작성합니다. 코드는 [url:'/api/api/add/']입니다.

Vue에 그림을 삽입하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

vue에 그림을 삽입하는 방법:

먼저정적 폴더를 만들어 그림을 저장하세요

설정으로 이동하여 구성

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
로그인 후 복사

#앞의 대문자는 죽은 형식이므로 쓰지 마세요. wrong

一레벨 라우팅에

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>
로그인 후 복사

의 템플릿에 이렇게 씁니다. 다음으로 클릭 이벤트를 작성해야 합니다. 확인할 웹사이트: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData)

methods:{
            my_add:function(){
                let form_data = new FormData();   #实例化一个FormData
                form_data.append(&#39;name&#39;,this.name);   #把数据添加到这个实例中
                let img = document.getElementById(&#39;img&#39;).files[0];  #获取id的属性
                form_data.append(&#39;img&#39;,img);       #把图拍片名称添加到这个实例中
                this.axios({
                    url:&#39;/api/api/add/&#39;,    #连接后台接口  第一个api是跨域的配置,第二个api是我的后台一级路由
                    method:&#39;post&#39;,      #用post方法进行提交数据
                    headers:{&#39;Content-Type&#39;:&#39;multipart/form-data&#39;},  #&#39;Content-Type&#39;: &#39;multipart/form-data&#39; :指定传输数据为二进制数据,例如图片、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(&#39;name&#39;)    #获取页面上输入的名字
        img = request.FILES.get(&#39;img&#39;)       #获取页面上添加的图片
        img_name = img.name     #取出文件的名字
        img_path = &#39;static/upload/&#39; + img_name     #给图片名字前面拼接上路径    这就是它的路径
        with open(img_path,&#39;wb&#39;) as f:    #循环写入文件‘wb’
            for k in img.chunks():          #避免文件太大,就把它分成块写入
                f.write(k)
로그인 후 복사

관련 학습 권장사항: javascript 학습 튜토리얼

위 내용은 Vue에 그림을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!