Vue移动端实现图片上传及超过1M压缩上传

本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下

1、实现效果

2、代码

Html:

<div class="choosePic">
    <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}">
     <input type="file" class="uploads" @change="uploadserpRecords" accept="image/*" multiple >
     <img src="../../assets/home/ic_AddImage@3x.png" alt="" v-if="form.erpRecords == ''">
     <div v-if="form.erpRecords == ''">添加图片</div>
    </div>
</div>

Css:使用了less ,需要引入less,才能使用(npm install less less-loader --save)

.choosePic{
   margin: 0.64rem 0;
   .pics{
    background-position: center;
    background-size: cover;
    width: 15.1467rem;
    height: 5.5467rem;
    background-color: #F9F9F9;
    border: 2px solid #C3C3C3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #3DCA9A;
    font-weight: bold;
    border-radius: 0.213rem;
    >div{
     margin-left: 0.213rem;
     letter-spacing: 2px
    }
    .uploads{
     position: absolute;
     z-index: 99;
     left: 0;
     width: 99%;
     height: 5.5467rem;
     opacity: 0;
    }
    img{
     width: 1.4933rem;
     height: 1.4933rem;
    }

   }
  }

JS:

/**
 * 上传销售记录
 */
uploadserpRecords (e) {
 let file = e.target.files[0]
 if (file === undefined) {
  return
 }
 if (file.size / 1024 > 1025) { // 文件大于1M(根据需求更改),进行压缩上传
  that.photoCompress(file, { // 调用压缩图片方法
   quality: 0.2
  }, function (base64Codes) {
   // console.log("压缩后:" + base.length / 1024 + " " + base);
   let bl = that.base64UrlToBlob(base64Codes)
   // file.append('file', bl, 'file_' + Date.parse(new Date()) + '.jpg') // 文件对象
   that.uploadLice(bl) // 请求图片上传接口
  })
 } else { // 小于等于1M 原图上传
  this.uploadLice(file)
 }
},
/**
 * base64 转 Blob 格式 和file格式
 */
base64UrlToBlob (urlData) {
 let arr = urlData.split(','),
  mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头,并转化为byte
  bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
  n = bstr.length,
  u8arr = new Uint8Array(n)
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
 }
 // 转blob
 // return new Blob([u8arr], {type: mime})
 let filename = Date.parse(new Date()) + '.jpg'
 // 转file
 return new File([u8arr], filename, {type: mime})
},
  /*
  压缩图片
  file:文件(类型是图片格式),
  obj:文件压缩后对象width, height, quality(0-1)
  callback:容器或者回调函数
*/
photoCompress (file, obj, callback) {
 let that = this
 let ready = new FileReader()
 /* 开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串. */
 ready.readAsDataURL(file)
 ready.onload = function () {
  let re = this.result
  that.canvasDataURL(re, obj, callback) // 开始压缩
 }
},
/* 利用canvas数据化图片进行压缩 */
/* 图片转base64 */
canvasDataURL (path, obj, callback) {
 let img = new Image()
 img.src = path
 img.onload = function () {
  let that = this // 指到img
  // 默认按比例压缩
  let w = that.width,
   h = that.height,
   scale = w / h
  w = obj.width || w
  h = obj.height || (w / scale)
  let quality = 0.2 // 默认图片质量为0.7
  // 生成canvas
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  // 创建属性节点
  let anw = document.createAttribute('width')
  anw.nodeValue = w
  let anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that, 0, 0, w, h)
  // 图像质量
  if (obj.quality && obj.quality >= 1 && obj.quality < 0) {
   quality = obj.quality
  }
  // quality值越小,所绘制出的图像越模糊
  let base64 = canvas.toDataURL('image/jpeg', quality)
  // 回调函数返回base64的值
  callback(base64)
 }
},
// 返回file文件,调用接口执行上传
uploadLice (file) {
 console.log(file)
 uploadLog(file, (data) => {
  this.form.operatingLicense = data
  console.log(data)
 })
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现文件上传功能

    vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue使用axios实现文件上传进度的实时更新详解

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • Vue上传组件vue Simple Uploader的用法示例

    在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传 支持拖拽文件.文件夹上传 统一对待文件和文件夹,方便操作管理 可暂停.继续上传 错误处理 支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传 分块上传 支持进度.预估剩

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

随机推荐