先看效果:

稍加说明一下:第一张图是user.vue,第二张图是点击头像出现的系统自带上传文件格式(安卓和IOS不一样),第三张图是cropper组件(我单独设置的),第四张图是上传完成的user.vue。

其实插件不难,只不过为了契合项目和移动端,做了些修改。

官方介绍:https://www.npmjs.com/package/cropperjs

第一步:安装插件

cnpm install cropperjs --save

第二步:分离设置成插件cropper.vue

<template>
<div id="demo" class="cropperImg">
<!-- 遮罩层 -->
<div class="container" v-show="panel">
<div>
<img id="image" :src="url" alt="Picture">
</div>
<button type="button" id="button" @click="crop">确定</button>
</div>
<div>
<div class="show" style="height:56px;width:56px;">
<div class="picture" :style="'backgroundImage:url('+headerImage+')'" style="height:56px;width:56px;">
</div>
</div>
<div style="opacity:0;width:360px;position:absolute;top:0;right:0;height:56px;">
<input type="file" id="change" accept="image" @change="change" style="height:56px;">
<label for="change"></label>
</div>
</div>
</div>
</template> <script>
import Cropper from 'cropperjs' //引入插件
export default {
props:{
headerImage:{ //从user.vue父组件传过来数据库图片,即用户从本地上传的图片
type:String,
default:''
}
},
data () {
return {
picValue:'',
cropper:'',
croppable:false,
panel:false,
url:'',
postHeaderImg:''
}
},
mounted () {
//初始化这个裁剪框
var self = this;
var image = document.getElementById('image');
this.cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
background:false,
zoomable:false,
ready: function () {
self.croppable = true;
}
});
},
methods: {
getObjectURL (file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
},
change (e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.panel = true;
this.picValue = files[0]; this.url = this.getObjectURL(this.picValue);
//每次替换图片要重新得到新的url
if(this.cropper){
this.cropper.replace(this.url);
}
this.panel = true;
},
crop () {
this.panel = false;
var croppedCanvas;
var roundedCanvas; if (!this.croppable) {
return;
}
// Crop
croppedCanvas = this.cropper.getCroppedCanvas();
console.log(this.cropper)
// Round
roundedCanvas = this.getRoundedCanvas(croppedCanvas); this.postHeaderImg = roundedCanvas.toDataURL();
//传递给父组件
this.$emit('getHeaderImage',roundedCanvas.toDataURL()); this.postImg()//上传图片 },
getRoundedCanvas (sourceCanvas) { var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
//为了每张图片的大小不超过50k,所以不论裁剪多大,最后上传的,最大宽度不超过90。
if(width > 90){
width = 90
}
if(height > 90){
height = 90
} canvas.width = width;
canvas.height = height; context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill(); return canvas;
},
postImg () {
this.$http.post(
this.http_h + "bp/user/uploadHeadImage",
{
fieldName:this.postHeaderImg
},
).then((res)=>{
let response = res.body;
if(response.code == 200){
this.$vux.toast.show({
type:"success",
text: "上传头像成功",
time:1000
})
}else{
this.$vux.toast.show({
type:"text",
text: response.message,
time:1000
})
}
});
}
}
}
</script>

 

第三步:设置父组件

首先:引入组件

import cropper from "@/components/cropper"
然后:在父组件你需要设置头像的地方,
<cropper :headerImage="headerImage"  @getHeaderImage="newHeaderImage"></cropper> 

小小解释一下::headerImage="headerImage"(传递给子组件)

组件通过emit 事件方式上传给父组件更改之后的图片,然后父组件通过newHeaderImage事件来接收。

newHeaderImage(newImg){
this.headerImage = newImg;
}

 

第四步:测试

总结:cropper在移动端,可能会有图片偏移现象,这就需要你来根据你的项目修改css了,我也是做了修改才符合我们UI的效果。在vue-cli 项目中node_modules文件中,直接就可以找到。希望能帮到你!加油

vue移动端头像上传,不大于50K的更多相关文章

  1. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

  2. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  3. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  4. vue+大文件分片上传

    最近公司在使用vue做工程项目,实现大文件分片上传. 网上找了一天,发现网上很多代码都存在很多问题,最后终于找到了一个符合要求的项目. 工程如下: 对项目的大文件上传功能做出分析,怎么实现大文件分片上 ...

  5. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  6. Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

  9. vue实现图片的上传和删除

    目录 1 UI库使用ElementUI 2 后端使用Express + formidable模块 1 UI库使用ElementUI 安装ElementUI $ npm install --save-d ...

随机推荐

  1. #error和#line使用分析

    #error的用法 #error用于生成一个编译错误消息 用法:error message(不需要用双引号包围) #error编译指示字用于自定义程序员特有的编译错误,消息类似的 #warning用于 ...

  2. 通过HTML 取得页面、屏幕、浏览器的高度宽度

    一.介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内. 通过Js的一些对象可以获取这些容器的高度.宽度 ...

  3. 新建cordova应用

    使用命令行(本例命令行均使用as或webstrom的命令行),在任意目录输入以下命令新建cordova应用 cordova create capp1 com.cesc.ewater.capp1 其中c ...

  4. 手把手教写devops全栈自动化工具(django2.1)

    简单介绍一下自己之前写的一个全栈项目,框架用的是django2.1版本 主要对paramiko模块,salstack的API二次开发. 核心组件包括:MQ,mysql,websocket,redis, ...

  5. STM32 modbus CRC16校验

    typedef unsigned char uint8_t; typedef unsigned short uint16_t; typedef int int32_t; const uint16_t ...

  6. iOS开发之cell位置contentOffset的用法

    @property(nonatomic)         CGPoint                      contentOffset;                  // default ...

  7. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. Dreamoon and MRT(二元枚举)

    题目 数轴上有M个点a1.a2....am,另有一个数列p1.p2....pn,(1 ≤ pii ≤ M). 给定d1.d2....dn,对所有的 i (1 ≤ i ≤ n),已知 |api+1 - ...

  9. ES6对象和数组解构

    解构可以避免在对象赋值时再生成多余的中间变量: function foo() { return [1,2,3]; } let arr = foo(); // [1,2,3] let [a, b, c] ...

  10. 基于Ubuntu 14.04 LTS编译Android4.4.2源代码

    转载自:雨水:http://blog.csdn.net/gobitan/article/details/24367439 基于Ubuntu 14.04 LTS编译Android4.4.2源代码     ...