-
2021-12-17 10:12:47
前端新人,欢迎各位大佬指出问题
通过FormData()方法来上传到后端,使用的是BootStrapVue文件选择组件
uploadFile(){ if (this.file==null) { alert('您尚未选择文件') }else{ var formData = {}; formData = new FormData(); //file为后端接收的数据名,需要和后端进行沟通 formData.append('file', this.file); axios .post('接口',formData ,{ headers: { "Content-Type": "application/json;charset=UTF-8", }, }) .then((response)=>{ console.log(response) alert('上传成功') //上传成功后让文件选择框为空 this.file =null, //刷新 this.reload() }) .catch((error)=>{ console.log(error) alert('上传失败') }) } },
更多相关内容 -
vue文件上传带进度展示
2021-04-02 17:52:12vue 文件上传 带格式、类型、大小、进度展示 -
springboot+vue实现文件上传下载
2021-01-18 17:04:45本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行... -
vue实现文件上传读取及下载功能
2020-10-16 08:43:50主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue中实现上传文件给后台实例详解
2020-12-01 23:48:35FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 ...以上就是本次关于vue中实现上传文件给后台的全部实例内容,感谢大家对软件开发网的支持。 -
springboot整合vue实现上传下载文件
2020-08-25 08:08:24主要为大家详细介绍了springboot整合vue实现上传下载文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Vue文件上传问题合集
2021-11-23 11:06:27在使用Vue+ElementUI进行前端工程开发中,遇到一些文件上传的问题,包括上传、回显、等待等。这里做一些记录,方便以后查看 2.环境 npm 6.14.12 vue-admin-template 4.4.0 axios 0.18.1 element-ui...目录
1.背景
在使用Vue+ElementUI进行前端工程开发中,遇到一些文件上传的问题,包括上传、回显、等待等。这里做一些记录,方便以后查看
2.环境
npm 6.14.12 vue-admin-template 4.4.0 axios 0.18.1 element-ui 2.13.2 3.问题集
1)文件上传完成后,文件名的回显
关键属性el-upload中 :file-list, :show-file-list
详细代码请往后看~~
参考:
https://www.jb51.net/article/183328.htm
vue+elementUI上传图片/文件,编辑时回显文件名_LBJSagiri的博客-CSDN博客
elementUI上传图片回显在编辑 - 写手在作画 - 博客园
根据elementui中的上传组件upload,手写一个编辑时回显上传文件以及继续新增文件的功能 - 简书
element-ui Upload 上传文件再编辑显示的两种方式_liaoxuewu的博客-CSDN博客
2)文件上传完成前的加载状态
关键属性v-loading和el-upload中:on-progress。
详细代码请往后看~~
参考:
vue自定义指令v-loading_伴个人993的博客-CSDN博客
【转】Vue v-loading实现加载效果 - 花影疏帘 - 博客园
vue+element-ui中上传文件使用Progress自定义实时更新进度条 - 简书
vue element-ui 上传文件的 :on-progress钩子无法触发的原因及报错原因 - 嘉煠 - 博客园
3)文件上传作为必填项
关键属性 el-form中定义prop和:rules。上传后,必填提示清除
详细代码请往后看~~
参考:
【vue】vue表单必填项前面添加红色*_小朋友的博客-CSDN博客
vue上传文件,文件是必填项的验证 - 吃的快不吐骨头 - 博客园
<template> <div v-loading="loading" ref="fileUpload"> <el-form-item label="文件上传" ref="fileUpload" prop="filepath" :rules="rules.file"> // 必填项以及规则 <el-upload v-model="item.filepath" :on-success="handleFileSuccess" :on-remove="handleFileRemove" :before-remove="beforeFileRemove" :on-exceed="handleUploadExceed" :file-list="fileList" // 文件列表 :show-file-list="isShow" // 文件回显标记 :action="'/myService/file/upload'" :limit="1" class="upload-demo" > <el-button size="small" type="primary">上传文件</el-button> <el-tooltip placement="right-end"> <div slot="content">只能上传txt文件,且不超过2MB</div> <i class="el-icon-question" /> </el-tooltip> </el-upload> </el-form-item> </div> </template> export default { data() { return { loading: false, item: { filepath: "", }, // 必填项规则 rules: [ file: {required: true, message:"文件必须上传", trigger: "change"} ] } }, handleFileSuccess(response) { this.item.filepath = response.data.items.filepath; // 后端返回的对象key为items,其中文件链接存放在变量filepath中 if (this.item.filepath != null) { this.isShow = true; this.$message({ showClose: true, message: "上传成功!", type: "success", }); (this.rules.file = []), this.$refs.fileUpload.clearValidate(); // 动态删除文件上传必填的提示信息 } else { this.isShow = false; this.fileList = []; this.$message({ showClose: true, message: "上传失败!", type: "error", }); } this.loading = false; // 上传完成后loading状态清楚 }, handleUploadExceed() { this.$message.warning("想要重新上传文件,请先删除已上传的文件"); }, beforeFileRemove(file, fileList) { return this.$confirm(`确定删除 ${file.name}`); }, handleFileRemove() { this.item.filepath = ""; // 删除文件时清空文件地址 }, }
-
node+vue实现文件上传功能
2020-10-15 06:56:41主要介绍了node+vue实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Vue开发之封装上传文件组件与用法示例
2020-10-17 02:43:48主要介绍了Vue开发之封装上传文件组件与用法,结合实例形式分析了vue.js使用elementui的 el-upload插件进行上传文件组件的封装及使用相关操作技巧,需要的朋友可以参考下 -
vue中用H5实现文件上传的方法实例代码
2020-08-30 10:16:56本篇文章主要介绍了vue中用H5实现文件上传的方法实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
java vue 文件上传下载
2022-01-27 11:33:21上传 @RequestMapping("/uplaod") @ResponseBody public RespBean add(@RequestParam("file") MultipartFile file) { //TODO 处理上传的数据 String fileName = file.getOriginalFilename(); String ...注
文件上传
content-type:multipart/form-data
Vue端
多文件上传
let files = new FormData() for (let i in this.fileList) { files.append('files', this.fileList[i].raw) }
下载
window.open(this.BASE_URL + '/download/' + id)
Controller层
上传
@RequestMapping("/uplaod") @ResponseBody public RespBean add(@RequestParam("file") MultipartFile file) { //TODO 处理上传的数据 String fileName = file.getOriginalFilename(); String contentType = file.getContentType(); long size = file.getSize(); }
下载
@GetMapping("/download/{id}") @ResponseBody public void show(@PathVariable("id") String id, HttpServletResponse response) { //TODO 获取需要下载的数据 String contentType = null; String fileName = null; byte[] data = null; try { response.setCharacterEncoding("UTF-8"); response.setHeader("content-type", contentType + "; charset=utf-8"); response.setContentType(contentType + ";charset=utf-8"); response.setHeader("Content-Disposition", "attachment; filename=" + java.net.URLEncoder.encode(fileName, "UTF-8")); response.getOutputStream().write(data); response.getOutputStream().flush(); response.getOutputStream().close(); } catch (Exception e) { e.printStackTrace(); } }
附
获取
resources
目录下文件,部署可用。@Autowired ResourceLoader resourceLoader; File file = resourceLoader.getResource("classpath:apk/ai.apk").getFile();
常见
content-type
.apk:application/vnd.android.package-archive .jpg:image/jpeg .zip:application/zip .docx:application/vnd.openxmlformats-officedocument.wordprocessingml.document .mp4:video/mp4 .pdf:application/pdf
-
vue文件上传与显示
2020-09-11 17:17:51input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626 ...上传文件:</span> <a class="upload" id="up_btn"> <input type="fileinput[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; }
-
一个文件上传Vue2插件可以拖动文件或在对话框中选择要上传的文件
2019-08-10 10:57:01一个文件上传Vue2插件,可以拖动文件或在对话框中选择要上传的文件 -
vue文件上传插件
2021-01-15 22:59:03插件描述:vue文件上传插件,可配置更新时间:2020-12-23 10:17:131、本插件基于vue+element,使用前请先使用npm install安装相关依赖2、运行项目 npm run serve3、打包项目 npm run build4、dist文件夹内为打包后的... -
vue中实现图片和文件上传的示例代码
2020-12-29 21:42:08//上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test'); $.ajax({ url: '/ShopApi/util/upload.weixun',//这里是后台 -
Vue文件上传、下载
2021-07-29 13:55:18代码示例:文件上传到接口,对接口返回的文件进行下载。 <template> <div class="hello"> <h1>{{ msg }}</h1> <input type="file" @change="uploadFile($event)" accept=".sql,.... -
vuejs学习之路 vue上传文件控件往golang服务器上传文件
2021-01-20 13:45:44vue代码: 将搜索的nginx日志文件拖到此处,或点击上传 golang代码: func UploadHandler(w http.ResponseWriter, r *http.Request) GetFile(w, r, ../test.dat) } func GetFile(w ... -
iview 文件上传 .vue
2021-01-08 11:10:16iview 文件上传 .vue -
ant design of vue文件上传
2021-09-02 23:53:24ant design of vue文件上传 action设置上传的地址 headers设置上传的请求头部 fileList接收已经上传的文件列表(受控)可以控制文件数量 事件change记录上传文件改变时的状态,当status为‘done’时将文件列表的地址... -
SSM+Vue文件上传实现
2021-04-14 16:23:11前端用的ElementUI的上传组件,然后直接调用后台的接口。直接上代码吧 1、后台代码: import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.... -
SpringMVC+Vue文件上传
2020-11-10 16:33:26SpringMVC+vue实现文件上传后台前端 异步上传(后端springmvc加前端vue) 后台 采用springmvc,实现获取到相对路径和绝对路径存储为json传到前端作为新增到数据库里的数据 //文件上传 @PostMapping(value = "/... -
vue-file-agent-启用了全功能的拖放功能,具有预览和上传进度的Vue文件上传组件-Vue.js开发
2021-05-27 21:28:22Vue文件代理每个文件都应该得到同等对待高性能Vue文件上传组件,每个Vue文件代理应具有优雅而独特的预览高性能Vue文件上传组件,对于每种文件类型和支持均具有优雅而独特的预览用于拖放,验证,具有进度支持的默认... -
vue 文件上传自定义实现
2020-12-21 19:16:29vue的文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发... -
vue+springboot 大文件上传
2021-01-23 23:55:38使用springboot+vue技术,实现分片 快速上传 -
vue中使用input[type="file"]实现文件上传功能
2020-10-18 01:36:19主要介绍了vue中使用input[type="file"]实现文件上传功能,实现代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue项目中使用axios上传图片等文件操作
2020-10-19 01:13:07axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作,需要的朋友参考下吧 -
vue实现文件上传功能
2020-10-18 05:59:38主要为大家详细介绍了vue实现文件上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
SpringBoot+Vue.js实现前后端分离的文件上传功能
2020-10-18 10:21:18主要介绍了SpringBoot+Vue.js实现前后端分离的文件上传功能,需要的朋友可以参考下