Vue + Element UI图片上传控件使用详解


Posted in Javascript onAugust 20, 2019

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装element并中引入,安装引入过程这里不再赘述。

1.引用element 上传控件。

<el-upload
 action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域)
 list-type="picture-card"
 accept="image/*"
 :limit="imgLimit"
 :file-list="productImgs"
 :multiple="isMultiple"
 :on-preview="handlePictureCardPreview"
 :on-remove="handleRemove"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload"
 :on-exceed="handleExceed"
 :on-error="imgUploadError">
 <i class="el-icon-plus"></i>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
 <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>

2.js

export default {
 data() {
 return {
 dialogImageUrl: '',
 dialogVisible: false,
 productImgs: [],
 isMultiple: true,
 imgLimit: 6
 }
 },
 methods: {
 handleRemove(file, fileList) {//移除图片
 console.log(file, fileList);
 },
 handlePictureCardPreview(file) {//预览图片时调用
 console.log(file);
 this.dialogImageUrl = file.url;
 this.dialogVisible = true;
 },
 
 beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
 console.log(file);
 const isJPG = true;
 // const isJPG = file.type === 'image/jpeg';
 const isLt2M = file.size / 1024 / 1024 < 2;
 
 // if (!isJPG) {
 // this.$message.error('上传头像图片只能是 JPG 格式!');
 // }
 if (!isLt2M) {
  this.$message.error('上传图片大小不能超过 2MB!');
 }
 return isJPG && isLt2M;
 },
 handleAvatarSuccess(res, file) {//图片上传成功
 console.log(res);
 console.log(file);
 this.imageUrl = URL.createObjectURL(file.raw);
 },
 handleExceed(files, fileList) {//图片上传超过数量限制
 this.$message.error('上传图片不能超过6张!');
 console.log(file, fileList);
 },
 imgUploadError(err, file, fileList){//图片上传失败调用
 console.log(err)
 this.$message.error('上传图片失败!');
 }
 }
 }

3.controller

@RequestMapping(value = "/imgUpload")
 public Wrapper imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq)
  throws IOException {
 System.out.println("---" + fileUploadPath);//我这里用的springboot 在application.properties中配置,使用@Value 获取的文件上传目录
 
 MultipartFile file = multiReq.getFile("file");
 String originalFilename = file.getOriginalFilename();
 String suffix = originalFilename.substring(originalFilename.indexOf("."));
 String localFileName = MD5Util.md5(file.getInputStream()) + suffix;
 File localFile = new File(fileUploadPath + localFileName);
 if (!localFile.exists()) {
  localFile.createNewFile();
 
  FileOutputStream fos = new FileOutputStream(
   localFile);
  FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream();
  byte[] buffer = new byte[1024];
  int len = 0;
  while ((len = fs.read(buffer)) != -1) {
  fos.write(buffer, 0, len);
  }
  fos.close();
  fs.close();
 
 } else {
  log.info("文件已存在!!");
 }
 
 return WrapMapper.wrap(
  Wrapper.SUCCESS_CODE,
  Wrapper.SUCCESS_MESSAGE,
  "http://localhost:8080/img/" + localFileName);//这里是我执行封装的返回结果,也可以使用map,
 }

4.MD5工具类

import java.io.*;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
 
public class MD5Util {
 
 private static char[] Digit = {'0', '1', '2', '3', '4', '5', '6', '7', '8',
  '9', 'a', 'b', 'c', 'd', 'e', 'f'};
 
 public static String getMd5Sum(String inputStr)
  throws NoSuchAlgorithmException {
 MessageDigest digest = MessageDigest.getInstance("MD5");
 byte[] inputStrByte = inputStr.getBytes();
 digest.update(inputStrByte, 0, inputStrByte.length);
 
 byte[] md5sum = digest.digest();
 
 StringBuffer sb = new StringBuffer();
 for (int i = 0; i < 16; i++) {
  char[] ob = new char[2];
  ob[0] = Digit[md5sum[i] >> 4 & 0x0F];
  ob[1] = Digit[md5sum[i] & 0x0F];
  String s = new String(ob);
  sb.append(s);
 }
 
 return sb.toString();
 }
 
 /**
 * 对字符串进行 MD5 加密
 *
 * @param str
 *  待加密字符串
 *
 * @return 加密后字符串
 */
 public static String md5(String str) {
 MessageDigest md5 = null;
 try {
  md5 = MessageDigest.getInstance("MD5");
  md5.update(str.getBytes("UTF-8"));
 } catch (NoSuchAlgorithmException e) {
  throw new RuntimeException(e.getMessage());
 } catch (UnsupportedEncodingException e) {
  throw new RuntimeException(e.getMessage());
 }
 byte[] encodedValue = md5.digest();
 int j = encodedValue.length;
 char finalValue[] = new char[j * 2];
 int k = 0;
 for (int i = 0; i < j; i++) {
  byte encoded = encodedValue[i];
  finalValue[k++] = Digit[encoded >> 4 & 0xf];
  finalValue[k++] = Digit[encoded & 0xf];
 }
 
 return new String(finalValue);
 }
 
 /**
 * 签名字符串
 *
 * @param text
 *  需要签名的字符串
 * @param sign
 *  签名结果
 * @return 签名结果
 */
 public static boolean verify(String text, String sign) {
 String mysign = md5(text);
 if (mysign.equals(sign)) {
  return true;
 } else {
  return false;
 }
 }
 
 /**
 * 对文件进行 MD5 加密
 *
 * @param file
 *  待加密的文件
 *
 * @return 文件加密后的 MD5 值
 * @throws IOException
 */
 public static String md5(File file) throws IOException {
 FileInputStream is = new FileInputStream(file);
 return md5(is);
 
 }
 
 
 public static String md5(InputStream inputStream) throws IOException {
 
 MessageDigest md5 = null;
 try {
  md5 = MessageDigest.getInstance("MD5");
  int n = 0;
  byte[] buffer = new byte[1024];
  do {
  n = inputStream.read(buffer);
  if (n > 0) {
   md5.update(buffer, 0, n);
  }
  } while (n != -1);
  inputStream.skip(0);
 } catch (NoSuchAlgorithmException e) {
  throw new RuntimeException(e.getMessage());
 } finally {
  inputStream.close();
 }
 
 byte[] encodedValue = md5.digest();
 
 int j = encodedValue.length;
 char finalValue[] = new char[j * 2];
 int k = 0;
 for (int i = 0; i < j; i++) {
  byte encoded = encodedValue[i];
  finalValue[k++] = Digit[encoded >> 4 & 0xf];
  finalValue[k++] = Digit[encoded & 0xf];
 }
 return new String(finalValue);
 }
}

5.效果

Vue + Element UI图片上传控件使用详解

6.主要参考文档 element 官方中文文档,文档中好多属性介绍很笼统不够详细,个人感觉比较坑。

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

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 #Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 #Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 #Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 #Javascript
vue 获取视频时长的实例代码
Aug 20 #Javascript
vue+elementUI实现图片上传功能
Aug 20 #Javascript
vue+elementUi图片上传组件使用详解
Aug 20 #Javascript
You might like
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
小程序实现列表多个批量倒计时
2021/01/29 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python面向对象程序设计示例小结
2019/01/30 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python根据时间获取周数代码实例
2019/09/30 Python
Python super()函数使用及多重继承
2020/05/06 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python修改DBF文件指定列
2020/12/19 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
期末复习计划
2015/01/19 职场文书
捐资助学感谢信
2015/01/21 职场文书
实施意见格式范本
2015/06/05 职场文书
遗嘱范文
2015/08/07 职场文书
高一地理教学工作总结
2015/08/12 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python