小编给大家分享一下vue如何插入图片，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司公司2013年成立，是专业互联网技术服务公司，拥有项目网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元横县做网站,已为上家服务,为横县各地企业和个人服务,联系电话:13518219792
vue插入图片的方法：首先创建一个static文件夹用来保存图片；然后写点击事件，代码为【url:'/api/api/add/'】；最后在后端获取数据。
vue插入图片的方法：
首先开始创建一个static文件夹用来保存图片
去 setting 里面进行配置
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
#前面大写的是死格式，尽量不要写错
一级路由里面写
re_path(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT})
在vue中的templates里这样写
姓名：
图片：
#这个ID是下面用来获取它的属性值的
接下来我们就该写点击事件了 （这里用到了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)以上是“vue如何插入图片”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
