vue怎么插入图片-js教程-PHP中文网

vue怎么插入图片

coldplay.xixi

发布： 2020-11-30 14:41:41

原创

11818 人浏览过

vue插入图片的方法：首先创建一个static文件夹用来保存图片；然后写点击事件，代码为【url:'/api/api/add/'】；最后在后端获取数据。

vue怎么插入图片

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

vue插入图片的方法：

首先开始创建一个static文件夹用来保存图片

去 setting 里面进行配置

MEDIA_ROOT = os.path.join(BASE_DIR,&#39;media&#39;)

登录后复制

#前面大写的是死格式，尽量不要写错

一级路由里面写

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

登录后复制

在vue中的templates里这样写

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

登录后复制

接下来我们就该写点击事件了（这里用到了FormData：不了解的可以去它的官网去查一查：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)

登录后复制