elementui 上传图片,element 上传图片
最近在学习前段后分离，本文介绍了某视频剪辑软件元素弹簧靴图片上传的实现示例，具有一定的参考价值，感兴趣的可以了解一下
最近没事刚好联系下vue springboot前段后分离的项目、用上了图片上传功能、记录一下。
前端待提交的表单部分代码
El-表单-项目标签=封面图片
El-upload v-model=数据表单。标题
class=头像上传者
:limit=1
list-type=图片卡
:on-preview= handlePictureCardPreview
多个的
:http-request=uploadFile
:on-remove=handleRemove
:on-change=changeUpload
:file-list=images
i class=el-icon-plus/i
/El-上传
/El-表单-项目
埃尔-上传里面的元素解释：
预览时：点击文件列表中已上传的文件时的事件
开启-移除：删除文件时候调用的方法
变化时：文件状态改变时的事件，添加文件、上传成功和上传失败时都会被调用
文件列表：上传的文件列表或者默认回显的数据展示渲染
retrun和data
返回{
图片：[{name: food.jpg ，URL: https://img-blog。csdnimg。cn/20210329194832973。png }]，
imageUrl:" "，
文件列表：[],//文件上传数据（多文件合一)
dialogImageUrl:" "，
dialogVisible: false，
选项：[],
内容： ,
编辑选项：{},
可见：假，
数据形式：{
id: 0，
标题： ,
内容： ,
bz:" "
},
tempKey: -666666 //临时钥匙，用于解决树半选中状态项不能传给后台接口问题。# 待优化
}
预览图片和上传图片以及删除图片
更改上传：函数（文件，文件列表){//预览图片
这个。文件列表=文件列表；
},
上传文件（文件){
},
手柄移除(文件，文件列表){
},
handlePictureCardPreview(文件){
这个。dialogimageurl=file。网址；
this.dialogVisible=true
},
这里我是用fomrData对象进行提交的、因为只需要上传一张单张封面图片、还有添加其他的一些表单内容进去
//表单提交
dataFormSubmit () {
const form=new FormData()//FormData对象
form.append(file ，this。文件列表)；
form.append(title ，this。数据表单。标题)；
form.append(content ，this .$参考文献。文字。值)；
这个refs[dataForm].验证((有效)={
如果（有效){
这个. http({
网址：这个. http $ adornurl(`/sys/inform/$ {！this.dataForm.id？保存:更新 } `),
方法： post ，
数据：表单
}).然后(({data})={
if (data data.code===0) {
这个消息({
消息： 操作成功，
类型："成功",
时长：1500,
onClose: ()={
this.visible=false
这个emit(refreshDataList )
}
})
}否则{
这个message.error
}
})
}
})
}
后台的话通过对象请求- WebUtils。getNativeRequest(request，multiparthttpservlet请求。类)来获取文件请求并解析文件到服务器或本地
/**
* @作者运动内衣
* 保存个人电脑-后台上传文件
*/
@ request mapping(value= sys/file/save ，method={RequestMethod .发布，请求方法.获取})
@事务性
公共R保存(HttpServletRequest请求){
字符串分类=请求。getparameter( classify )；
multiparthttpservlet请求multipart request=web utils。getNativeRequest(request，multiparthttpservlet请求。类)；
字符串文件名="";
if (multipartRequest！=null) {
迭代器字符串名称=多部分请求。获取文件名()；
while (names.hasNext()) {
列出多部分文件files=多部分请求。获取文件(名称。next())；
如果（文件！=null files.size() 0) {
对于(多文件文件：文件){
文件名=文件。getoriginalfilename()；
字符串后缀=文件实用程序。getfileext(文件名);
File uFile=new File()；
uFile.setFileName(文件名);
uFile.setClassify(分类);
ufile。设置创建时间(新日期())；
uFile.setFileType(后缀);
string uuid=file util。uuid()；
尝试{
uFile.setPath(uploadFile(uuid，file) uuid . 后缀);
} catch (IOException e) {
e。printstacktrace()；
}
文件服务。保存(uFile)；
}
}
}
}
返回r . ok()；
}
上传文件到本地的静态方法
/**
* 上传文件
* @作者运动内衣
* @param文件
* @返回
* @抛出异常
* @throws IllegalStateException
*/
公共静态字符串上传文件(字符串uuid，多部分文件文件)引发IllegalStateException，IOException {
字符串默认URL=myfile config。getfile路径()；
字符串目录=Java。io。文件。分隔符；
String realUrl=defaultUrl目录；
Java。io。文件真实文件=新Java。io。文件(真实网址)；
如果(!realFile.exists()！realFile.isDirectory()) {
真实文件。mkdirs()；
}
字符串fullFile=realUrl uuid . 文件实用程序。getfileext(文件。getoriginalfilename())；
file.transferTo(新的Java。io。文件(全文件))；
string relative planurl=Directory；
返回relativePlanUrl.replaceAll(\\ ，/)；
}
到此这篇关于某视频剪辑软件元素弹簧靴图片上传的实现示例的文章就介绍到这了，更多相关某视频剪辑软件元素弹簧靴图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。