Vue上传图片

EasonTyler 发布于2019-08-20 16:03 / 1881人阅读

摘要：最近写上传图片功能，一直不理解是怎么实现的，今天看了后端的接口实现，才知道大致流程。将此返回的内容当做标签的即可，展示图片表单实现图片上传接口实现推荐的取到上传的图片由打印的可以看到，图片信息就在里面通过上传图片上传接口

最近写上传图片功能，一直不理解是怎么实现的，今天看了后端的接口实现，才知道大致流程。
后台接口接受一个input提交的文件，将其保存，并将文件名返回。将此返回的内容当做img标签的src即可，展示图片
(1)form表单实现
html:


    
 
js:
selectImg(){
    let form=document.getElementById("imgLocal");
    form.submit();
}

(2)ajax实现（Vue推荐的axios）

let that=this;
let imgFile = $(this.$el).find("#imgLocal")[0].files[0];//取到上传的图片
console.log($(this.$el).find("#imgLocal")[0].files);//由打印的可以看到，图片    信息就在files[0]里面
let formData=new FormData();//通过formdata上传
formData.append("file",imgFile);
this.$http.post("图片上传接口",formData,{
method: "post",
headers: {"Content-Type": "multipart/form-data"}
}).then(function (res) {
console.log(res.data);//
}).catch(function(error){
console.log(error);
})

云服务器 GPU云服务器 vue上传到云服务器阿里云服务器上传用vue做好的页面图片上传上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82685.html

vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法

摘要：首先，和阿里云上传图片结合参考了这位朋友的文章，成功的解决了我用阿里云上传图片前的一头雾水。我把一个上传组件放在了我的打开阿里云上传组件首先，vue和阿里云oss上传图片结合参考了这位朋友的 https://www.jianshu.com/p/645... 文章，成功的解决了我用阿里云oss上传图片前的一头雾水。该大神文章里有写github地址，里面的2.0分支采用vue2.0实...

entner 2019-08-21 18:37 评论0 收藏0
基于Vue + Node.js + MongoDB的图片上传组件，实现图片的预览和删除

摘要：网址功能单图多图上传图片上传预览上传进度条分组上传，分组查询新建分组，删除分组删除图片选择图片目录结构前端利用搭建，中引入子组件。实现分组的新增查询删除。利用模块实现删除文件功能。公司要写一些为自身业务量身定制的的组件，要基于Vue,写完后扩展了一下功能，选择写图片上传是因为自己之前一直对这个功能比较迷糊，所以这次好好了解了一下。演示在网址打开后的show.gif中。使用技术：Vu...

hzx 2019-06-26 17:30 评论0 收藏0
vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

oneasp 2019-08-20 17:26 评论0 收藏0
vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

miracledan 2019-08-01 17:01 评论0 收藏0
基于vue-elementui的图片文件上传的高阶使用分享

摘要：前言要求图片上传支持多图片上传多浏览器图片格式判断多图片同时上传通过防并发设置防止可能出现的覆盖图片实时上传后支持在新窗口中打开查看使用注意代码中是页面中存在循环很多上传项，我为了省事直接复制粘贴的实现，如果单项上传就不用考虑了前言要求：1、图片上传支持多图片上传 +多浏览器图片格式判断；2、多图片同时ajax上传通过防并发设置防止可能出现的覆盖；3、图片实时上传后支持在新窗口...

xi4oh4o 2019-08-23 12:16 评论0 收藏0