vue移动端头像上传,不大于50K

先看效果:

稍加说明一下:第一张图是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文件中,直接就可以找到。希望能帮到你!加油

时间: 2024-10-31 20:14:41

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

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

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

Vue 实现文件的上传

要把文件上传的web,需要分几步? 答:三步 第一步:创建一个上传文件的标签 <input type="file" id="fileExport" @change="handleFileChange" ref="inputer"> 由于是在vue中,考虑到获取节点,所以给标签添加一个ref,方便获取属性并给标签添加事件 第二步:改动事件 handleFileChange (e) { let inputDOM = t

移动端头像上传

头像上传HTML代码: <form action="/index.php?m=&c=User&a=uploadImage" method="post" id="formid" enctype= "multipart/form-data" style="display: block;"> <input id="upfiles" class="up

移动端头像上传AJax input file

jQuery中的Ajax不能支持 input file 需要用ajaxupload.js但是先需要引入jQuery文件 <script src="__PUBLIC__/js/ajaxfileupload.js"></script> HTML代码很简单: input id="upfiles" class="upfiles" type="file" name="log" onchange

vue + axios 实现图片上传 简单版

uploadImg(img) { // img => base64图片地址 let param = new FormData(); //创建form对象 param.append('multipartFile', this.dataURLtoBlob(img));// base64 转 二进制流 multipartFile => 后端要求的参数 this.$axios({ method: 'post', // post 方式 url: '/ss-minprogram/uploads', //

vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix">   <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>   <img :src="item">   </li>   <li style="position:

iview Upload组件多文件上传,以及vue文件下载

iview Upload组件多文件上传 系统经常遇到文件上传的问题,iview提供了Upload组建,能够很好的实现文件上传,当然一次上传多个文件也是允许的. 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before-upload ="handleUpload"等于false (1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式(自动上传模

(七)利用apache组件进行文件上传下载

一.文件上传 文件上传,即服务器端得到并处理用户上传的文件,这个文件存放在request里,也就是需要对request进行处理. 1.1 编写html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action=&q

文件的上传与下载

为方便用户处理文件上传数据,Apache 开源组织提供了一个用来处理表单文件上传的一个开源组件( Commons-fileupload ),该组件性能优异,并且其API使用极其简单,可以让开发人员轻松实现web文件上传功能,因此在web开发中实现文件上传功能,通常使用Commons-fileupload组件实现. 使用Commons-fileupload组件实现文件上传,需要导入该组件相应的支撑jar包:Commons-fileupload和commons-io. commons-io 不属于文