富贵资源网 Design By www.hznty.com

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

1、实现效果

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

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="/UploadFiles/2021-04-02/ic_AddImage@3x.png">

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(/:(.*"_blank" href="//www.jb51.net/Special/926.htm">vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。