vue使用input标签 type='file'上传文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用input标签 type='file'上传文件相关的知识,希望对你有一定的参考价值。

参考技术A 1、html

2、js

3、注意

该api接口需要单独配置请求头headers

4、成功后会返回图片的地址,就ok了

如果你做的是上传头像的功能,并且要对图片进行裁剪,推荐个 不错的插件

input标签的type为selectradiocheckbox的使用

1.<selecte>标签:中的name属性可以规定select元素的名称。
作用:对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript引用表单数据。
举例:<select id="selectID" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
使用:(1)绑定下拉框change事件---$("#selectID").change(function(){});
(2)获取下拉框选中项的text属性值---$("selectID").find("option:selected").text();
(3)获取下拉框选项中的value属性值----$("selectID").val();
(4)获取下拉框选中的option标签----$("selectID").find("option:selected");

2.<radio>标签--单选框
举例:<div id="wrap"><input type="radio" checked="checked" name="Sex" value="male">
<input type="radio" name="Sex" value="female"></div>
解释:这2个radio的name值相同。
使用:获取一组单选按钮的对象:var object=$(‘#wrap input[name="Sex"]‘);
获取被选中按钮的值:var value=$(‘#wrap input[name="Sex"]:checked‘).val()

3.checkbox标签--复选框
举例:<input type="checkbox" id="Bike" name="Bike">自行车
<input type="checkbox" id="Car" name="Car">汽车
使用:可以查看是否被选中--$("#Bike").is(":checked")返回值为true fasle
拓展:也可以和上面的radio一样设置一样name,获取被选中的值

小贴士:
(1)将时间类型转化为String类型。Datetime.ToString("yyyy-MM-dd HH-mm-ss").
(2)时间控件:到laydate官网上下载对应的事件控件,将css和js添加到页面上。
在页面中添加:<input class="laydate-icon" type="text" onclick="laydate({istime:true,format:‘YYYY-MM-DD hh:mm:ss‘})">
(3)在jquery$()的括号中添加选择器,可以添加多个选择器,用空格隔开,表示这些选择器都被选中。

以上是关于vue使用input标签 type='file'上传文件的主要内容,如果未能解决你的问题,请参考以下文章

input[type='file']样式美化及实现图片预览

Vue3中通过 input 标签 发送文件/图片给后端

美化input type=range标签滑动样式(带渐变效果)

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'

html 中上传文件标签 <input type="file">,它是由文本框与按钮组成的,