精华内容
下载资源
问答
  • Vue文件上传方法
    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 文件上传 带格式、类型、大小、进度展示
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • 主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 ...以上就是本次关于vue中实现上传文件给后台的全部实例内容,感谢大家对软件开发网的支持。
  • 主要为大家详细介绍了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.背景

    2.环境

    3.问题集

    1)文件上传完成后,文件名的回显

    2)文件上传完成前的加载状态

    3)文件上传作为必填项


    1.背景

    在使用Vue+ElementUI进行前端工程开发中,遇到一些文件上传的问题,包括上传、回显、等待等。这里做一些记录,方便以后查看

    2.环境

    npm6.14.12
    vue-admin-template4.4.0
    axios0.18.1
    element-ui2.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实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue开发之封装上传文件组件与用法,结合实例形式分析了vue.js使用elementui的 el-upload插件进行上传文件组件的封装及使用相关操作技巧,需要的朋友可以参考下
  • 本篇文章主要介绍了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:51
    input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626 ...上传文件:</span> <a class="upload" id="up_btn"> <input type="file

    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;
    }
    
    展开全文
  • 一个文件上传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文件夹内为打包后的...
  • //上传图片 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,....
  • vue代码: 将搜索的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:16
    iview 文件上传 .vue
  • ant 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:26
    SpringMVC+vue实现文件上传后台前端 异步上传(后端springmvc加前端vue) 后台 采用springmvc,实现获取到相对路径和绝对路径存储为json传到前端作为新增到数据库里的数据 //文件上传 @PostMapping(value = "/...
  • Vue文件代理每个文件都应该得到同等对待高性能Vue文件上传组件,每个Vue文件代理应具有优雅而独特的预览高性能Vue文件上传组件,对于每种文件类型和支持均具有优雅而独特的预览用于拖放,验证,具有进度支持的默认...
  • vue文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发...
  • 使用springboot+vue技术,实现分片 快速上传
  • 主要介绍了vue中使用input[type="file"]实现文件上传功能,实现代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作,需要的朋友参考下吧
  • vue实现文件上传功能

    2020-10-18 05:59:38
    主要为大家详细介绍了vue实现文件上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了SpringBoot+Vue.js实现前后端分离的文件上传功能,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,485
精华内容 21,794
关键字:

vue文件上传

友情链接: rrsnzry.zip