极客观点
项目管理
HarmonyOS
下面的html包括多种类型的表单，其中包括图片上传，如何拿到这些表单的值提交到后台？除了用jquery，想看看用vue.js怎么做。
说明：
1、下面html中用到了一个lrz.bundle.js的插件，作用是进行上传图片的压缩，github为：https://github.com/think2011/localResizeIMG
2、下面script标签中的代码是压缩图片，然后取得压缩后的图片。
3、需求：把所有表单的数据都获取到（包括图片、单选、复选、文本框、下拉列表框），然后发送到php后台。
html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<label for="formGroupExampleInput" class="col-sm-2 form-control-label">文本框：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-sm-2 form-control-label">下拉选择框：</label>
<div class="col-sm-10">
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleTextarea" class="col-sm-2 form-control-label">区域文本：</label>
<div class="col-sm-10">
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="exampleInputFile" class="col-sm-2 form-control-label">文件上传：</label>
<div class="col-sm-10">
<input id="exampleInputFile" name="photo" type="file" class="form-control-file" value="Upload" accept="image/*">
预览：
<img id="preview"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">单选项：</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">多选项：</label>
<div class="col-sm-10">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">提交</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
crossorigin="anonymous"></script>
<script src="js/dist/lrz.bundle.js"></script>
<script>
$(function () {
var $preview = $('#preview');
// var formData = null;
$('#exampleInputFile').on('change', function () {
lrz(this.files[0], {
width: 800
}).then(function (rst) {
// 替换src实现预览
$preview.attr('src', rst.base64);
// 根据情况加入一些额外的参数
rst.formData.append('fileLen', rst.fileLen);
});
});
});
</script>
</body>
</html>
http://cn.vuejs.org/guide/forms.html