用element的upload组件实现多图片上传和压缩的示例代码


Posted in Javascript onFebruary 12, 2019

我用vuex做状态管理,七牛云做图床。

项目地址:多图片上传组件

效果展示

用element的upload组件实现多图片上传和压缩的示例代码

项目执行流程

首先,让我们来分析一下实现多图片上传的流程:

  • 前端向后端请求用来上传图片至服务器的token
  • 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token
  • 后端将图片名和token返回给前端
  • 前端拿到token以后,将图片上传至服务器
  • 上传成功以后,前端将图片名发给后端
  • 后端将图片名存入数据库

用element的upload组件实现多图片上传和压缩的示例代码

项目实现过程

1.我们要利用element-ui的Upload组件布置界面:

//upload.vue
<el-upload
 :action= domain
 ref="upload"
 accept='image/jpeg,image/gif,image/png'
 :auto-upload="false"
 :http-request="upqiniu"
 :limit="limit"
 :multiple="multiple"
 list-type="picture-card"
 :before-upload="beforeUpload"
 :on-preview="handlePictureCardPreview"
 :on-change="handldChange"
 :on-remove="handleRemove">
 <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
 <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

domain 指的是我们的上传地址,upqiniu 是我们自定义的上传方法,beforeUpload 是图片上传前执行的方法。关于该组件的其他用法可以在element的官方文档查阅:Upload 上传

2.对图片进行压缩

// upload.vue
imgQuality: 0.5, //压缩图片的质量

dataURItoBlob(dataURI, type) {
 var binary = atob(dataURI.split(',')[1]);
 var array = [];
 for(var i = 0; i < binary.length; i++) {
  array.push(binary.charCodeAt(i));
 }
 return new Blob([new Uint8Array(array)], {type: type});
},

beforeUpload(param) {
 //对图片进行压缩
 const imgSize = param.size / 1024 / 1024
 if(imgSize > 1) {
  const _this = this
  return new Promise(resolve => {
   const reader = new FileReader()
   const image = new Image()
   image.onload = (imageEvent) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const width = image.width * _this.imgQuality
    const height = image.height * _this.imgQuality
    canvas.width = width;
    canvas.height = height;
    context.clearRect(0, 0, width, height);
    context.drawImage(image, 0, 0, width, height);
    const dataUrl = canvas.toDataURL(param.type);
    const blobData = _this.dataURItoBlob(dataUrl, param.type);
    resolve(blobData)
   }
   reader.onload = (e => { image.src = e.target.result; });
   reader.readAsDataURL(param);
  })
 }
}

压缩图片实现起来比较简单。就是在beforeUpload()方法里面return一个Promise,Promise里面我们把图片的长度和宽度按比例进行缩小,并把图片画到canvas上,然后把canvas转成一个blod对象。

3.前端向后端请求上传token。

//upload.vue
upqiniu(param) {
 let filetype = ''
 if (param.file.type === 'image/png') {
  filetype = 'png'
 } else {
  filetype = 'jpg'
 }
 const formdata = {
  filetype: filetype,
  param: param
 }
 this.actionGetUploadToken(formdata)    
}

// vuex/action.js
actionGetUploadToken({commit}, obj) {
 const msg = {
  filetype: obj.filetype
 }
 usersApi.getImgUploadToken(msg).then((response) => {
  if(response.stateCode === 200) {
   commit('uploadImg', {'token': response.token, 'key': response.key, 'param': obj.param})
  } 
 }, (error) => {
  console.log(`获取图片上传凭证错误:${error}`)
  commit('uploadImgError')
 })
},

4.后端生成上传token,并发给前端,我用Python实现。

filetype = data.get('filetype')
# 构建鉴权对象
q = Auth(configs.get('qiniu').get('AK'), configs.get('qiniu').get('SK'))

# 生成图片名
salt = ''.join(random.sample(string.ascii_letters + string.digits, 8))
key = salt + '_' + str(int(time.time())) + '.' + filetype

# 生成上传 Token,可以指定过期时间等
token = q.upload_token(configs.get('qiniu').get('bucket_name'), key, 3600)
return Response({"stateCode": 200, "token": token, "key": key}, 200)

5.前端接收token,开始向服务器上传图片

// vuex/state.js
imgName: [], //图片名数组

// vuex/mutations.js
uploadImg(state, msg) {
 const config = {
  useCdnDomain: true,
  region: qiniu.region.z2
 }
 var putExtra = {
  fname: msg.param.file.name,
  params: {},
  mimeType: ["image/png", "image/jpeg", "image/gif"]
 };
 var observer = {
  next(res){

  },
  error(err){
   console.log(`图片上传错误信息:${err.message}`)
  }, 
  complete(res){
   console.log(`图片上传成功:${res.key}`)
   state.imgName.push(res.key)
  }
 }
 var observable = qiniu.upload(msg.param.file, msg.key, msg.token, putExtra, config)
 //上传开始
 var subscription = observable.subscribe(observer)
},

6.上传成功以后,将图片名存入数据库

// 用到upload.vue的界面
this.imgsList = this.imgName.map(key => `http://${this.qiniuaddr}/${key}`)
switch(this.imgsList.length) {
 case 4:
 this.img4 = this.imgsList[3]
 case 3:
 this.img3 = this.imgsList[2]
 case 2:
 this.img2 = this.imgsList[1]
 case 1:
 this.img1 = this.imgsList[0]
}
let obj = {
 goods_img1: this.img1,
 goods_img2:this.img2,
 goods_img3:this.img3,
 goods_img4:this.img4
}
//将信息发送给后端
this.actionPublish(obj)

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

Javascript 相关文章推荐
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JQuery实现图片轮播效果
May 08 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 #Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 #Javascript
在微信小程序中保存网络图片
Feb 12 #Javascript
VUE中使用MUI方法
Feb 12 #Javascript
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 #Javascript
Vue表单控件绑定图文详解
Feb 11 #Javascript
You might like
php中截取字符串支持utf-8
2007/01/18 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python去掉空白行的多种实现代码
2018/03/19 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python实现三次样条插值
2018/12/17 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python如何访问字符串中的值
2020/02/09 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
华为的Java面试题
2014/03/07 面试题
行政文员岗位职责
2013/11/08 职场文书
工程监理应届生求职信
2013/11/09 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
车辆安全检查制度
2014/01/12 职场文书
房屋租赁协议书
2014/04/10 职场文书
产品售后服务承诺书
2014/05/21 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
食品安全主题班会
2015/08/13 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫