小程序分销商城_Vue移动端完成图片上传及超过

Vue移动端实现图片上传及超过1M压缩上传       这篇文章主要为大家详细介绍了Vue移动端实现图片上传及超过1M压缩上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1、实现效果

2、代码

Html:

 div 
 div :style="{backgroundImage: 'url(' + form.erpRecords + ')'}" 
 input type="file" @change="uploadserpRecords" accept="image/*" multiple 
 img src="../../assets/home/" 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)
},

关于vue.js组件的教程,请大家点击专题进行学习。

更多vue学习教程请阅读专题

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