mui+vue文件上传（图片）

文件上传是任何系统都必须具有的功能

设置上传按钮

                    <div style="height: 30px; width: 30%; float: right; position: relative; text-align: right; padding-right: 0px; "><img id="btnFileSelect" src="../Resources/camera29.png" alt="" style="position: relative;top:-34px" /><div class="FileSelectHide"><input id="upFile" name="upFile" type="file" onchange="UpLoadImg(this)" /></div></div>

这个按钮是一个重叠的img和button 只显示img 也可以不要img直接显示input也可以，下面是样式。

.FileSelectHide {width: 30px;height: 32px;overflow: hidden;position: relative;background-image: none;background-attachment: scroll;background-repeat: no-repeat;background-position-x: center;background-position-y: center;background-size: auto;background-origin: padding-box;background-clip: border-box;background-color: transparent;margin-top: -34px;float: right;}.FileSelectHide input {height: 34px;width: 50px;right: 0px;bottom: 0px;font-size: 20px;filter: alpha(opacity=0);position: absolute;cursor: pointer;outline-width: medium;outline-style: none;outline-color: invert;opacity: 0;float: right;}

2.添加点击事件

   function UpLoadImg(file) {//弹出对话框后选择文件  该文件会立即显示出来。然后在进行后台的处理var oFReader = new FileReader();oFReader.readAsDataURL(file.files[0]);oFReader.onloadend = function (oFRevent) {var src = oFRevent.target.result;$("#showImg").attr("src", src);}///var fileId = $("#upFile").attr("Id");var url = '/Media/UploadImg';//文件上传ajaxFileUpload(fileId, url, null);}function ajaxFileUpload(elementId, url, sendData) {var obj = {url: url,//用于文件上传的服务器端请求地址fileElementId: elementId,//文件上传空间的id属性type: 'POST',dataType: 'JSON',data: sendData,success: function (data, status) {if (data.UpSucceed == 'True' && data.FileName != null) {app.DetailContent.PicName = data.FileName;//将返回的文件名保存到vue的对象中localStorage.setItem('img',data.FileName);//保存前的临时存储mui.toast("上传成功");} else {$("#showImg").attr("src", '');}},error: function (xhr, status, p3, p4) {mui.toast("上传失败");$("#showImg").attr("src", '');}};$.ajaxFileUpload(obj);return false;}

说明：以上文件保存成功后返回的数据是通过一个视图完成的文章链接https://blog.csdn.net/fwq_17802927858/article/details/97147607

2.后台接收处理

[HttpPost]public ActionResult UploadImg(){int res = 0;int length = Request.Files.Count;if (length == 0)return new EmptyResult();var file = Request.Files[0];var name = file?.FileName;var folder = getPicFolderPath();var savePath = folder + name;try{if (!string.IsNullOrEmpty(folder)){if (!Directory.Exists(folder)){Directory.CreateDirectory(folder);}file?.SaveAs(folder + name);res += 1;}}catch (Exception ex){res = 0;throw ex;}var model = new FileModel();model.FileName = name;model.FilePath = savePath;model.UpSucceed = res == 1;return View("FileUpLoad", model);}

说明：这个View:FileUpLoad就是保存返回的数据的FileModel,再ajax的success方法的参数data能够体现出来。 var folder = getPicFolderPath();这个路径是存储在数据库的系统配置的路径，可以是固定的。

mui+vue文件上传（图片）相关推荐

文件上传(图片上传) 大小限制的配置及注意点
文件上传(图片上传) 设置大小注意点 //检查文件是否为空if (multipartFile.isEmpty()){return "文件为空";}//检查文件大小 209715 ...
vue文件上传功能bootstrap框架
vue文件上传功能bootstrap框架封装公共组件components/fileupload/FileUpload.vue 内容如下: 公共组件 ```html <template>& ...
mui ajax 文件上传,MUI的图片上传和压缩
MUI的上传图片目前知道有两种方式,一种见前面文章中关于图片裁切时使用的base64作为字符串上传,另外一种则是本篇章中所使用的plus.uploader方式,它是一种真正意义上的文件上传,我们可以使 ...
Vue文件上传和图片上传实例
图片上传 1.先通过组件库选择对应的文件上传组件,或者自行封装的组件,示例选的的Ant Design Vue组件库. 代码: <a-uploadaction="xxxxxxxxx&qu ...
mui 多文件上传至spring mvc 服务器
今天用了一天时间搞定了多文件上传. 首先是mui代码,主要就是img标签,我这里用的是id声明主要对应后端数据库的字段通过src获取文件路径包括相册选择和手机拍照 <div class=&qu ...
.vue文件_Spring Boot 2.x（十六）：玩转vue文件上传
为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...
ajax请求携带tooken_Spring Boot+Vue 文件上传，如何携带令牌信息？
关于文件上传这块,松哥之前也写了好几篇文章了,甚至还有视频: Spring Boot+Vue+FastDFS 实现前后端分离文件上传但是,之前和小伙伴们提到的方案,是基于 session 来做认证的 ...
Vue文件上传问题合集
目录 1.背景 2.环境 3.问题集 1)文件上传完成后,文件名的回显 2)文件上传完成前的加载状态 3)文件上传作为必填项 1.背景在使用Vue+ElementUI进行前端工程开发中,遇到一些文件 ...
vue 文件上传组件封装
增加图片缩略图以及Word.txt文档在线预览文件上传组件完整代码 <template><div><el-uploadclass="upload-demo&q ...
js文件上传—图片压缩
-需求- 前台上传图片过程中,需要在前台对图片进行压缩,然后传到后台. -限制- 使用现有现有后台文件上传处理代码,即:不可修改后台处理代码. -技术问题- js如何压缩图片,图片压缩后如何上传到后台 ...

mui+vue文件上传（图片）

mui+vue文件上传（图片）相关推荐

最新文章

热门文章