input 上传图片_移动端实现照片上传功能

这个功能其实并不复杂，因为在原生的HTML5中就有定义一个input上传文件的功能，所以只要定义一个input就可以了，接下来就是细节和部分逻辑处理

这个页面主要功能就是，点击框框打开文件夹，然后选择图片，选中后把图片显示出来，附带删除和预览效果，预览使用的是Vant - 轻量、可靠的移动端 Vue 组件库，在移动端中这个框架还是比较实用的。就是坑多。

阿里巴巴矢量图标库中下载的一个加号

<link rel="stylesheet" href="//at.alicdn.com/t/font_824867_hv0d5orlb4u.css" />

<style type="text/css">

.foot {

position: absolute;

bottom: 20px;

width: 100%;

text-align: center;

}

.uploader {

position: relative;

width: 300px;

height: 380px;

border: 1px solid #f2f2f2;

margin: 20px auto;

text-align: center;

background-color: #fff;

}

.van-uploader {

position: relative;

}

.delete {

display: inline-block;

position: absolute;

top: 7px;

right: 10px;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

border-radius: 50%;

background-color: red;

color: #fff;

padding: 1px;

}

.content {

text-align: center;

}

/*获取input中type为file的节点,然后使用opacity隐藏按钮,这样就能造成幻觉，然后还可以实现按钮的点击事件*/

input[type=file] {

opacity: 0;

width: 300px;

height: 380px;

}

.icon-xinfow-jia {

position: absolute;

top: 43%;

left: 42%;

font-size: 38px;

color: #999;

}

</style>

对于布局的话就用了if和else，主要用来替换显示图片还是加号的。一个按钮用来上传

<div id="app">

<div class="uploader">

<span v-if="imageStr64!=''">

<span class="delete" @@click="deleteImg">×</span>

<img :src="imageStr64" style="width:100%;height:100%;" @@click="previewImg" />

</span>

<div v-else class="van-uploader">

<i class="iconfont icon-xinfow-jia"></i>

<input type="file" accept="image/jpeg" id="img" capture="camera" @@change="changeImg">

</div>

</div>

<div class="foot">

<van-button size="large" @@click="upPic" type="primary" style="border-radius:5px;width:80%;" :disabled="disabled">上传照片</van-button>

</div>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

imageStr64: '',

imageName: '',

disabled: false

},

methods: {

//选中图片的时候获取input id然后创建FileReader文件,获取图片路径，但是这个出现一个问题，就是reader.onload 没有办法同步

//写了几种方法都不行，后面直接再次调用,不知道这算不算投机取巧。此时就能获取到选中图片的base64字符格，使用画布的方法，

//设置该图片指定大小，并从新吧图片base64字符格赋值显示。canvas.toDataURL()将图片转为Base64

changeImg: function () {

var _this = this;

var file = document.getElementById("img");

var reader = new FileReader();

reader.readAsDataURL(file.files[0]);

reader.onload = function (e) {

_this.imageStr64 = this.result;

var quality = 0.3;

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var img = new Image();

img.src = this.result;

img.onload = function () {

canvas.width = 300;

canvas.height = 380;

context.drawImage(img, 0, 0, canvas.width, canvas.height);

var cdata = canvas.toDataURL();

_this.imageStr64 = cdata;

}

}

reader.onload();

},

//预览图片

previewImg: function () {

var _this = this;

vant.ImagePreview([

_this.imageStr64

]);

},

//删除选择照片

deleteImg: function () {

var _this = this;

_this.$dialog.confirm({

message: '是否确认删除图片？'

}).then(function () {

_this.imageStr64 = '';

_this.$toast("删除成功!");

}).catch(function () {

_this.$toast("已取消删除!");

});

},

//根据获取到的base64字符格截取出64字符,然后上传到接口，成功时禁用按钮。

upPic: function () {

this.$toast.loading({

mask: true,

duration: 0,

message: '正在上传图片...'

});

var _this = this;

var imageStr64 = this.imageStr64.split(',')[1];

this.imageName = new Date().getTime();

axios.post('/cil/OA/OA_WorkBench_ImageUpload', {

"ImageStr64": imageStr64,

"ImageName": this.imageName,

"Filenameextension": 'jpg',

"ImagePurpose": '上传照片'

}).then(function (res) {

var resData = JSON.parse(res.request.responseText).Message;

_this.disabled = true;

_this.$toast(resData);

}).catch(function (error) {

var errData = JSON.parse(error.request.responseText).Message;

_this.$toast(errData);

});

}

}

})

</script>

然后简单的移动端图片上传就实现了。有不足的地方请多多指教