首页 > web前端 > js教程 > 正文

vue怎么插入图片

coldplay.xixi
发布: 2020-11-24 10:10:05
原创
12797人浏览过
vue插入图片的方法:首先创建一个static文件夹用来保存图片;然后写点击事件,代码为【url:'/api/api/add/'】;最后在后端获取数据。

vue怎么插入图片

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

vue插入图片的方法:

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

去 setting 里面进行配置

立即学习前端免费学习笔记(深入)”;

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
登录后复制

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

一级路由里面写

re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT})
登录后复制

在vue中的templates里这样写

<div>
    姓名:<input type="text" v-model="name"><br>
    图片:<input type="file" id="img"><br>      #这个ID是下面用来获取它的属性值的
    <button @click='my_add()'>添加</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('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中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
vue
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号