Vue中上传图片

Vue中上传图片Vue 中上传图片的两种方式

上传图片的两种方式:

1. base64 上传: 将图片转换成base64 然后再通过请求将base64上传到服务端

    图片转换成base64很简单,直接百度就可以了,一大堆图片转base64的插件,但转换成的base64特别长,一般不建议使用。

2. 数据流上传图片/文件:通过流上传文件(现实开发过程中我们也通常使用流的方式做上传文件模块)

    这种方式不仅可以上传图片,还可以上传word等文件。

我们通常使用FormData对象来存放上传图片的数据流,然后上传FormData对象

具体代码如下:

templote内容:

 
  

    JavaScript内容:

Vue上传文件流程总结:

1.获取文件对象 :e.target.files[0]

2.将文件对象存储在FormData实例中:

  let formData=new FormData() 

  // 向formData实例中追加属性 (参数1:属性名 参数2:属性值)

  formData.append(‘参数1′,’参数2’)

3.发生请求,请求参数为创建的FormData实例

axios.post(‘请求路径’,formData).then(res=>{

                console.log(res);

            })

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221240.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午6:35
下一篇 2026年3月17日 下午6:35


相关推荐

  • OJ错误提示类型

    OJ错误提示类型答案正确(Acepted,AC)  恭喜你!所提交的代码通过了数据!这个评测结果应该是大家最喜欢见到的,也非常好理解。如果是单点测试,那么没通过一组数据,就会返回一个Accepted;如果是多点测试,那么只有当通过了所有数据时,才会返回Accepted。编译错误(CompileError,CE)  很显然,如果代码没有办法通过编译,那么就会返回CompileError。这是要…

    2022年6月24日
    24
  • Pyqt5界面设计之pycharm配置QtDesigner

    Pyqt5界面设计之pycharm配置QtDesigner安装 pyqt5 的时候 pycharm 已经安装好了 qtDesigner 但是默认的配置往往无法启动成功 第一步 复制 designer exe 路径 第二步 配置 designer 路径第三步 复制 pyuic5 exe 路径第四部 配置 pyuic5 exe 路径第五步 复制 pyrcc5 exe 路径第六步 配置 pyrcc5 路径

    2026年3月27日
    1
  • 证书签名验签以及加密解密

    证书签名验签以及加密解密签名,验签的理解(转) 一、公钥加密假设一下,我找了两个数字,一个是1,一个是2。我喜欢2这个数字,就保留起来,不告诉你们(私钥),然后我告诉大家,1是我的公钥。我有一个文件,不能让别人看,我就用1加密了。别人找到了这个文件,但是他不知道2就是解密的私钥啊,所以他解不开,只有我可以用数字2,就是我的私钥,来解密。这样我就可以保护数据了。我的好朋友x用我的公钥1加密了字…

    2022年5月2日
    221
  • html可视化布局工具_iframe嵌套多个页面

    html可视化布局工具_iframe嵌套多个页面使用易优cms如何分栏目调用栏目banner图呢,下面小编就给大家提供一个方法来实现。1.先再后台添加栏目字段。1.高级选项,2.字段管理,3.栏目字段,4.新增字段 2.新增字段,字段标题“栏目banner图”,字段名称“banner”,字段类型“单张图”3.模板标签的调用。添加完成后,我们在模板文件里找到图片相对应的代码,填写为我们新增的字段代码即可。当前栏目banner图:{$ey…

    2022年10月6日
    4
  • 使用HttpClient4,post提交multipart/form-data数据

    使用HttpClient4,post提交multipart/form-data数据问题由来: 在Vert.x的项目中,进行公众号开发的时候,发现回复用户图片的时候需要先上传图片,获取一个media_id,然后拿着这个media_id去发送数据。 问题是,Vert.x的vertx-web-client不提供表单文件上传(form-data)方式post请求。     于是,只能找一个HttpClient方法。发现组装一个这样的请求,并不简单解

    2022年7月22日
    20
  • flash咏鹅课件_咏鹅flash动画课件下载

    flash咏鹅课件_咏鹅flash动画课件下载咏鹅flash动画课件下载文欣赏咏鹅鹅,鹅,鹅,曲项向天歌。白毛浮绿水,红掌拨清波。本动画声情并茂的展示了这首著名的诗文,朗读者感情丰富,是很好的小学一年级语文Flash动画课件关键词:北师大版一年级上册语文Flash动画课件下载,一年级语文Flash动画课件下载,咏鹅Flash动画课件下载,.swf格式;更多关于《咏鹅》PPT课件,请点击咏鹅ppt标签。《咏鹅》PPT:《咏鹅》PPT第…

    2022年4月29日
    97

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号