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 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
jquery实现数字输入框
Feb 22 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
微信小程序项目总结之记账小程序功能的实现(包括后端)
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
php递归json类实例
2014/12/02 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
XML的代替者----JSON
2007/07/21 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
AngularJS基础知识
2014/12/21 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
js正则匹配多个全部数据问题
2019/12/20 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
孝老爱亲模范事迹
2014/01/24 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
企业理念标语
2014/06/09 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书