精华内容
下载资源
问答
  • vue.js上传文件到后端
    千次阅读
    2020-05-30 20:14:42

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下:

    1、上传文件前端代码如下:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <title></title>
    
      <meta charset="utf-8" />
    
      <script src="../js/vue.js"></script>
    
      <script src="../js/vue-resource.js"></script>
    
      <script src="../asset/js/jquery.js"></script>
    
    
    
    </head>
    
    <body>
    
      <div id="app">
    
        <input type="file" @change="getFile($event)" /><button @click="upload">上传</button>
    
        <div>{{ result }}</div>
    
        <div v-show="uping==1">正在上传中</div>
    
      </div>
    
    
    
    <script>
    
      new Vue({
    
        el: '#app',
    
        data: {
    
          upath: '',
    
          result: '',
    
          uping:0
    
        },
    
        methods: {
    
          upload: function () {
    
            //console.log(this.upath);
    
            var zipFormData = new FormData();
    
            zipFormData.append('filename', this.upath);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
    
            let config = { headers: { 'Content-Type': 'multipart/form-data' } };
    
            this.uping = 1;
    
            this.$http.post('http://localhost:42565/home/up', zipFormData,config).then(function (response) {
    
              console.log(response);
    
              console.log(response.data);
    
              console.log(response.bodyText);
    
               
    
              var resultobj = response.data;
    
              this.uping = 0;
    
              this.result = resultobj.msg;
    
            });
    
          },
    
    
    
          getFile: function (even) {
    
            this.upath = event.target.files[0];
    
          },
    
        }
    
      });
    
    </script>
    
    </body>
    
    </html>

    2、后端处理代码如下asp.net mvc的:

    public ActionResult Up()
    
        {
    
          string msg = string.Empty;
    
          string error = string.Empty;
    
          string result = string.Empty;
    
          string filePath = string.Empty;
    
          string fileNewName = string.Empty;
    
          var files = Request.Files;
    
          if (files.Count > 0)
    
          {
    
            //设置文件名
    
            fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
    
            //保存文件
    
            files[0].SaveAs(Server.MapPath("~/Uploads/" + fileNewName));
    
            Thread.Sleep(10 * 1000);
    
          }
    
          return Json(new { msg = "上传成功", newfilename = fileNewName }, JsonRequestBehavior.AllowGet);
    
        }

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    更多相关内容
  • 前端vue` <template> <el-form> <img :src="url" /> <el-form-item> <el-upload class="upload-demo" ref="upload" action="" :http-request="upload" multiple="" :auto-...

    前端vue`

    <template>
      <el-form>
        <img :src="url" />
    
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            :http-request="upload"
            multiple=""
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件,且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <script>
    export default {
      name: "UploadUi",
      data() {
        return {
          name: "",
          url: "",
        };
      },
      methods: {
        submitUpload() {
          this.$refs.upload.submit();
        },
        //通过onchanne触发方法获得文件列表
        handleChange(file, fileList) {
          this.fileList = fileList;
          console.log(fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        upload(file) {
          let fd = new FormData();
    
          //文件信息中raw才是真的文件
          fd.append("files", file.file);
          console.log(fd);
    
          this.$axios.post(`/uploadUi`, fd).then((res) => {
            this.url = res.data;
            alert("ok");
          });
        },
      },
    };
    </script>
    

    后端代码

    @RequestMapping(value = "/uploadUi", method = RequestMethod.POST)
    
    	@ResponseBody
    
    	public String addUser(@RequestParam("files") MultipartFile file) throws IllegalStateException, IOException {
    		System.out.println(file.getOriginalFilename() + "图片已传入!!");
    		byte[] b = file.getBytes();
    		String str = Base64.getEncoder().encodeToString(b);
    		return "data:image/jpeg;base64," + str;
    
    	}
    

    会出现跨域问题
    解决办法一
    在spring配置文件加入

    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设定默认编码 -->
        <property name="defaultEncoding" value="UTF-8"/>
        <!-- 设定文件上传的最大值5MB,5*1024*1024 -->
        <property name="maxUploadSize" value="5242880"/>
    </bean>
    
    

    解决办法二
    加入依赖

    <dependency>
    			<groupId>commons-fileupload</groupId>
    			<artifactId>commons-fileupload</artifactId>
    			<version>1.2.2</version>
    </dependency>
    

    亲测有效!!!!
    在这里插入图片描述

    展开全文
  • vue 上传文件后端

    2021-04-01 10:38:15
    1. 封装的视频上传组件 <div class="videoBox"> <input class="input" ref="uploader" @change="onFileChange" type="file" :accept="accept" :multiple="multiple"> <label ref="uploaderlabel" ...

    1. 封装的视频上传组件

    <div class="videoBox">
            <input class="input" ref="uploader" @change="onFileChange" type="file" :accept="accept" :multiple="multiple">
            <label ref="uploaderlabel" style="cursor: pointer;">
                <slot>
                    <div class="icon-upload" style="width:100%;height:100%;">
                        <div class="uploadCenter">
                            <i class="el-icon-upload"></i>
                            <div>{{hintTitle}}</div>
                        </div>
                    </div>
                </slot>
            </label>
        </div>
        
    export default {
        props: {
            accept: {
                type: String,
                default: "video/*",    // 指定的文件格式
            },
            multiple: {
                type: Boolean,
                default: false,
            },
              hintTitle: {
                type: String,
                default: "上传视频",
            },
        },
        methods: {
            onFileChange(e) {
                console.log(e.target.files,'ppppp');
                var files = e.target.files;
                var urls = [];
                for (let i = 0; i < files.length; i++) {
                    urls.push(URL.createObjectURL(files[i]));
                }
                this.$emit("on-select", {
                    files: e.target.files, // 传给后端的文件
                    localUrls: urls,  //  // 本地图片展示
                });
                setTimeout(() => {
                    this.$refs.uploader.value = "";
                }, 10);
    
            },
        },
    };
    
    <style lang="less" scoped>
    .videoBox {
        position: relative;
        width: 100px;
        height: 100px;
        .input {
            position: absolute;
            width: 100px;
            height: 100px;
            opacity: 0;
        }
    }
    .icon-upload {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        .uploadCenter{
          text-align: center;
            .el-icon-upload {
            display: block;
        }
        }
    
    }
    </style>
    
    

    2. ## 要使用的页面

        <div style="display:flex">
                  <video v-if="ruleForm.video_url" :src="ruleForm.video_url" controls="controls" style="width:200px;height:100px;margin-right:20px;"></video>
                  <videoUploads @on-select="selectVideo" :hintTitle="hintTitle"></videoUploads>   // 组件的的命名啥名字这里就用什么标签
       </div>
    
    // 引用组件
    import videoUploads from "@/components/videoUploads";
    
        components: {
            videoUploads,
        },
        
        // 选择视频
          async  selectVideo(e) {
                console.log(e, "eeeee");
                 this.ruleForm.video_url = e.localUrls[0];
                this.hintTitle = "切换视频";
                // 打印结果:
                // files: FileList {length: 0}   这个文件是上传给后端的,虽然看着里面是空的,但是就是要传
    			// localUrls: ["blob:http://127.0.0.1:8081/68ff6a7a-cb06-4862-a2da-55faad50ca1c"]  // 这个可以作为本地展示
                this.videoFile = e.files[0];
              // 上传文件给后台一般用 FormData ,不然传不过去
      		 	let formData = new FormData();
                formData.append("type", "video");  // 这是后台要的参数
                formData.append("file", this.videoFile);  // 这是后台要的参数
                formData.append("use", "goods");  // 这是后台要的参数
                let res = await this.$http.post(
                this.$api.uploadFileCache,  // 这是封装的接口,直接调用
                formData,
                { headers: { "Content-Type": "multipart/form-data", },    // 这个必须有
                });
                console.log("图片上传服务器", res);
            },
    	
    	
    
    展开全文
  • FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 ...以上就是本次关于vue中实现上传文件给后台的全部实例内容,感谢大家对软件开发网的支持。
  • 主要为大家详细介绍了vue实现图片上传到后台,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 不知道其他人有没有遇到这个问题,使用element-ui提供的样例上传样式,就是把action改成自己的后端接口,第一个问题会出现跨域,就是一般是报403错误,第二个问题是老是后端收不数据,说files为空。尤其是第二个...

    前端上传文件的组件–> el-upload
    不知道其他人有没有遇到这个问题,使用element-ui提供的样例上传样式,就是把action改成自己的后端接口,第一个问题会出现跨域,就是一般是报403错误,第二个问题是老是后端收不到数据,说files为空。尤其是第二个问题,头发都给抓没了,然后才想到一个可以替代的方法,当然如果大家都没有出现这个问题,只能说是我自己功夫不到家o(╥﹏╥)o
    跨域的解决方法是放弃action,转战httprequest(element ui 用于覆盖action的方法,可以自己写),也不要像其它接口一样直接接地址,就是用一下axios(一个用于创建http请求和转换请求数据的库)
    为空的解决方法就是自己去把数据拿出来,然后再放到请求里面去

    • html
    <el-upload
       :action="action"
       :file-list="modeList1"
       :http-request="modeUpload1"
       :headers="headerObj"
       :multiple="true"
       :before-remove="handleRemove1"
    >
    <el-button size="small" type="primary">上传</el-button>
    </el-upload>
    <el-button @click="upload1">点击上传文件</el-button>
    
    • js
    export default {
    data () {
    headerObj:{
            token:sessionStorage.getItem('token')
     },
          action: 'https://jsonplaceholder.typicode.com/posts/',
          mode1: {},
          modeList1:[],
          fd1: new FormData()
    }
    methods:{
    modeUpload1: function(item) {
          // console.log(item.file);
          // this.mode1 = item.file
          const isIMG =
            item.file.type === 'image/jpg' ||
            item.file.type === 'image/jpeg' ||
            item.file.type === 'image/png'
          const isLt = item.file.size / 1024 / 2000 <= 1
          if (!isIMG) {
            this.error='文件格式有误\n请上传后缀为jpg\\png的图片'
          }
          if (!isLt) {
            // console.log(file.size)
            this.error='上传头像图片大小不能超过500KB!'
          }
          if(isIMG&&isLt){
          this.fd1.append('files', item.file) //这里是自己把文件对象获取到,并存储起来
          }
        },
        upload1: function() {
    
          if(this.fd1.getAll('files').length===0){//formdata.getAll()返回的是一个file的数组(当然这里是你之前的参数得是文件)
            this.error='请先上传图片'
          }else {
            axios.post('这个地址填你自己的后端接口就好', this.fd1, { //
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then(response => {
              console.log(response.data);
            })
          }
        }
      }
    }
    
    • 到这里,其实已经实现了上传文件的功能,但是我又发现了一个bug,因为这个数据是我们自己存储的,那么el-upload所提供的删除文件的功能完全没有用,所以要实现上传多个文件,并且在上传之前删除,就得自己再写一个方法,我本来以为formdata会有那种根据index删除的方法,实际上没有o(╥﹏╥)o,所以我们只能用一些原始方法了
    • 删除文件js方法
    handleRemove1(file, fileList) {
          let files = this.fd1.getAll('files')
          this.fd1.delete('files')
          let len = files.length
          for(var i=0;i<len;i++){
            if(files[i].uid!=file.uid){ //uid应该是可以唯一标志文件的,如果不能,就是我,会死
              this.fd1.append('files',files[i])
            }
          }
        }
    

    到这里就是所有基础功能都实现了,用我的头发亲测有效哟,欢迎集资给我买生发水!

    展开全文
  • 接下来来说上传发送给后端的代码实现 html <input ref="myInput" type="file" class="my_input" :multiple="myMultiple" style="display:none;" @change="importExcel"> <el-button type="primary" style=...
  • vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目 数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息,sys_file_zone_record保存文件分片信息。 /* ...
  • 解析进入后端,就能处理逻辑了 实体类表示excel的列名称包含多少列: 比如:excel如图包含了16列 实体类应该继承BaseRowModel,并与表格列名同数量,以下index16: vue<template>代码块 <...
  • reject(false) } else { let formData = new FormData() formData.set('file', file) // 后端接口 importExcel(formData).then(res => { if (!res.msg) { resolve(file) this.$message.success('上传成功') ...
  • vue实现文件上传,FormData传入后台

    千次阅读 2021-09-03 11:19:55
    文件,多文件看需求都没问题,前端代码弹窗界面如下: :visible.sync="excelVisible" 默认false自定义,ture开始弹窗,改变值是uploadaaa() <!-- excel上传弹窗 --> <el-dialog title="excel上传...
  • vue.js前端,Java后端,如何导入excel文件,并且解析,本文给了前后端代码的实现,以及完美实践OK之后的分享。 前端主要用了element-ui的upload组件。 关于这个组件的官方文档很少:...
  • }, //上传文件之前 beforeAvatarUpload(file) { const isExele = file.type === "application/vnd.ms-excel" || file.type === "application/vnd.openxmlformats-...
  • Vue ajax图片上传后端处理

    千次阅读 2019-05-30 14:03:07
    console.log("上传文件", event); let that = this; let file = event.target.files[0]; that.uploadImgName = file.name; let param = new FormData(); // 创建form对象 param.append("file", file, file....
  • 组件文件: UploadFile.vue{{ title }}export default {name: 'FileImporter',props: {url: {type: String,required: true},title: {type: String,required: false,default: '导入文件'},others: {type: Object}},...
  • 首先是前端页面代码,需要导入xlsx的依赖 ...然后是前端的两个vue文件 1.index.vue <template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept
  • vue 前端传图片文件后端接收

    千次阅读 2019-05-06 16:31:02
    vue端 1、在 main.js 文件中添加 const upload = axios.create({ //这里配置你自己的url baseURL: '... timeout: 50000, });...Vue.prototype.$upload = upload;...2、在需要上传文件vue文件中 up...
  • 主要介绍了vue实现Excel文件上传与下载功能,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • } else { /* 火狐谷歌的文件下载方式 */ var blob = new Blob([response.data]) var downloadElement = document.createElement('a') var href = window.URL.createObjectURL(blob) downloadElement.href = href ...
  • 先通过,Fromdata上传文件,当有错误时,后端返回错误文件,当错误文件是正常的,则直接创建A标签,然后主动触发下载,当返回的错误文件不正常时,则返回对于的错误消息,不说了,直接上干货 //上传方法 ...
  • 接口中需要上传文件并接收文件流,el-upload只能采用手动上传的方式 <template> <el-upload action="" :http-request="httpRequest" :show-file-list="false"> <el-button size="small" type=...
  • Vue-el-upload 实现文件上传至后台

    千次阅读 2021-11-10 20:29:32
    <el-button type="primary" plain @click=...点击上传</el-button> <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" id="import_btn" style
  • Vue中接口发送file文件后端

    千次阅读 2020-01-01 09:08:03
    1:先取要传递的File文件 this.filecontent = file; 2:通过FormData添加数据 var formData=new FormData(form); // 通过append()方法追加数据 formData.append("data","fileContent"); 3:最后通过接口...
  • 我正在做一个上传头像功能,前端使用vue.js,后端是springboot构建的项目,但是每次vue请求传到后端时,都会报格式错误。代码如下: 后端接口: @PostMapping("/userinfo/uploadHeadImg") public ...
  • vue上传图片springboot后端

    千次阅读 2019-05-11 17:17:08
    又来记录神仙bug了,照搬这位的代码,可是出现未知bug,如图: 解决方法: 注释掉一段视图将MultiFileUpload对象...application.properties文件不知道怎么配置上传图片路径 项目根路径里: 本地路径也成的: ...
  • 最近在项目中有使用图片上传,在此记录一下。 使用步骤 1.使用了element-ui的upload组件 <el-upload class="avatar-uploader" action="" :on-change="(val)=>changeFile(val)" :auto-upload="false" a
  • <input type="file" id="people-export" ref="inputer" @change="fileUpload" /> //方法: fileUpload(event) { ...//一个文件流 let formData = new FormData(); formData.append("file", file[0]); .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,258
精华内容 6,503
关键字:

vue上传文件到后端

友情链接: power_supply_leds.rar