上一篇元素用户界面编辑富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容，这篇文章单独介绍一下元素用户界面图片上传控件的使用。首先要安装元素并中引入，安装引入过程这里不再赘述。

1.引用元素上传控件。

埃尔-上传操作='/mgr/common/imgUpload'//这里需要配置一下文件上传地址（跨域)list-type=' picture-card ' accept=' image/* ' : limit=' imgLimit ' : file-list=' productImgs ' : multiple=' is multiple ' : on-preview=' handlepicturecard preview ' : on-remove=' handleRemove ' : on-success=' handleAvatarSuccess ' 33: before-upload=' 33333: on-over='

导出默认{ data(){ return { dialogimageurl : ' '，dialogVisible: false，productImgs: []，isMultiple: true，imgLimit: 6 } }，methods: { handleRemove(文件，文件列表){//移除图片console.log(文件，文件列表);}，handlePictureCardPreview(文件){//预览图片时调用console.log(文件);这个。dialogimageurl=文件。网址；this.dialogVisible=true}，beforeAvatarUpload(文件){//文件上传之前调用做一些拦截限制console.log(文件);const isJPG=true//const isJPG=file。type===' image/JPEG '；const isLt2M=文件。尺寸/1024/1024 2；//if(！isJPG) { //这个$message.error('上传头像图片只能是使用联合图象专家组文件交换格式存储的编码图像文件扩展名格式!');//} if(！isLt2M){ 0这个$message.error('上传图片大小不能超过2MB！');}返回isJPG isLt2M}，handleAvatarSuccess(res，file) {//图片上传成功控制台。日志(RES)；console.log(文件);这个。imageurl=URL。createobjecturl(文件。生的)；}，handleExceed(文件，文件列表){//图片上传超过数量限制这个$message.error('上传图片不能超过6张！');console.log(文件，文件列表);}，imguploadererror(err，file，fileList){//图片上传失败调用console.log(错误)这个$message.error('上传图片失败！');} } }3 .控制器

@请求映射(值='/imgUpload ')公共包装器imgUpload(httpersvletrequest请求多部分multiparthttpersvletrequest多请求)引发IOException {系统。出去。println('-'文件上传路径)；//我这里用的跳羚在应用程序。属性中配置，使用@值获取的文件上传目录多部分文件文件=multiReq.getFile('文件');string originalFilename=file。getoriginalfilename()；字符串后缀=originalfilename。子字符串(originalfilename。indexof(' . '));字符串本地文件名=MD5 util。MD5(文件。GetinputStream())后缀；文件本地文件=新文件（文件上传路径本地文件名);if(！localfile。exists()){ localfile。新建文件()；文件输出流fos=新文件输出流(本地文件)；文件输入流fs=(文件输入流)多请求。getfile(' img ').getInputStream()；字节[]缓冲区=新字节[1024];int len=0；while ((len=fs.read(buffer))！=-1) { fos.write(buffer，0，len)；} fos。close()；fs。close()；} else { log.info('文件已存在！');}返回包装映射器。包装.成功代码，包装器. SUCCESS_MESSAGE，' http://localhost :8080/img/'本地文件名)；//这里是我执行封装的返回结果，也可以使用地图，}4。讯息摘要5工具类

导入Java。io。*;导入Java。保安。messagedigest导入Java。保安。nosuchalgorithm异常；public class MD5 util { private static char[]Dige={ ' 0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' a '，' b '，' c '，' d '，' e '，' f ' }；公共静态字符串字符串输入引发没有这样的算法异常{ MessageDigest digest=MessageDigest。getinstance(' MD5 ')；byte[]input trbyte=input tr。getbytes()；消化。更新(输入trbyte，0，输入trbyte。长度)；byte[]MD5 sum=摘要。digest()；StringBuffer sb=new StringBuffer()；for(int I=0；i 16i ) { char[] ob=新char[2]；ob[0]=数字[MD5和[I]40x0F]；ob[1]=数字[MD5和[I]0x0F]；字符串s=新字符串(ob)；追加某人；}返回某人（somebody的简写）ToString()；} /** * 对字符串进行讯息摘要5加密* * @param str *待加密字符串* * @返回加密后字符串*/public静态字符串MD5(String str){ MessageDigest MD5=null；请尝试{ MD5=messagedigest。getinstance(' MD5 ')；MD5。更新(字符串。getbytes(' UTF-8 ')；} catch(nosuchalgorithm异常e){ throw new RuntimeException(e . getmessage())；} catch(unsupportdencodinegexception e){ throw new RuntimeException(e . getmessage())；}字节[]encodedValue=MD5。digest()；int j=encodedvalue . length char FilValue[]=新字符[j * 2]；int k=0；for(int I=0；I j；I){字节编码=编码值[I]；最终值[k]=数字[编码40xf]；最终值[k]=数字[编码0xf]；}返回新字符串(FinalValue)；} /** * 签名字符串* * @param文本*需要签名的字符串* @param符号*签名结果* @返回签名结果*/public静态布尔验证(字符串文本，字符串符号){ String my sign=MD5(文本)；if (mysign.equals(符号)){ return true } else { return false } }/* * *对文件进行讯息摘要5加密* * @param文件*待加密的文件* * @返回文件加密后的讯息摘要5值* @抛出IOException */公共静态字符串MD5(文件文件)抛出IOException { File inputstream is=new File inputstream(文件);返回MD5(is)；}公共静态字符串md5(输入流输入流)引发IOException { MessageDigest MD5=null；请尝试{ MD5=messagedigest。getinstance(' MD5 ')；int n=0；字节[]缓冲区=新字节[1024];do { n=inputStream.read(缓冲区);if(n ^ 0){ MD5。更新(缓冲区，0，n)；} } while (n！=-1);inputstream。跳过(0)；} catch(nosuchalgorithm异常e){ throw new RuntimeException(e . getmessage())；}最后{ InputStream。close()；}字节[]encodedValue=MD5。digest()；int j=encodedvalue . length char FilValue[]=新字符[j * 2]；int k=0；for(int I=0；I j；I){字节编码=编码值[I]；最终值[k]=数字[编码40xf]；最终值[k]=数字[编码0xf]；}返回新字符串(FinalValue)；}}5.效果

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

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