vue文件上传与显示

input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626

formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

结果：

代码：

<div><span>上传文件：</span><a class="upload" id="up_btn"><input type="file" @change="uploadFile()" class="change" id="file1" />选择文件</a><a:href="this.config.hostfile + file1.FilePath":download="file1.SysFileName"target="_blank"class="file2">{{file1.OriginName}}</a></div>import axios from "axios";
data() {return {file1: {name: "",url: "",download: "",}}}
methods：{uploadFile() {let f = document.getElementById("file1");if (f.files) {let fileList = f.files;let formData = new FormData();  //创建空对象for (let i = 0; i < fileList.length; i++) {//如需判断文件就在这判断 现在不判断formData.append("film", fileList[i]);}axios.post(文件上传接口, formData).then((res) => {if (res.data.Success) {this.file1 = res.data.Result;} else {this.$message.error(res.Msg || "获取数据失败，无法上传");}}).catch((err) => {console.log(err);this.$message.error("无法上传");});}}
}.upload {padding: 4px 10px;height: 20px;background-color: #00b3ee;color: #fff;position: relative;
}
.change {position: absolute;top: 0;left: 0px;overflow: hidden;opacity: 0;width: 76px;height: 24px;
}
.file2{padding-left: 10px;
}

vue文件上传与显示相关推荐

php中图片文件上传，显示缩略图
php中图片文件上传,显示缩略图 htm代码块: <meta charset="utf-8" /> <style>img {max-width: 100px ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
Knife4j文件上传不显示上传选择文本域
Knife4j文件上传不显示上传选择文本域升级新版本过后不显示上传文件按钮前置配置配置效果解决方式整体代码贴图升级新版本过后不显示上传文件按钮官方解决方法:并不能解决knife4j3.0 ...
vue文件上传功能bootstrap框架
vue文件上传功能bootstrap框架封装公共组件components/fileupload/FileUpload.vue 内容如下: 公共组件 ```html <template>& ...
Struts2实现文件上传并显示实时进度
基于浏览器的文件上传,特别是对于通过<input type="file">标签来实现上传的情况, 存在着严重的性能问题,因为用户提交了文件之后,在浏览器把文件上传到服务 ...
Vue文件上传问题合集
目录 1.背景 2.环境 3.问题集 1)文件上传完成后,文件名的回显 2)文件上传完成前的加载状态 3)文件上传作为必填项 1.背景在使用Vue+ElementUI进行前端工程开发中,遇到一些文件 ...
.vue文件_Spring Boot 2.x（十六）：玩转vue文件上传
为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...
java 上传进度,关于 javaweb的文件上传实时显示进度
方法:使用单例保存实时信息.具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息.然后编写一个servlet,用于返回单例中的信息,前台 ...
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认"拿来主义",只是我个人 ...

vue文件上传与显示

vue文件上传与显示相关推荐

最新文章

热门文章