精华内容
下载资源
问答
  • 我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <...
  • vue表单文件上传

    2021-04-14 11:38:15
    上传文件 multiple="multiple" 多选 获取值 js document.getElementById("file").files vue this.$refs.file.files 提交 ajax 需要加请求头 var files = document.getElementById("file").f

    填写表单,然后根据需要选择文件,最后将数据一起提交给后台

    使用

    <input ref="file" type="file" multiple="multiple"/> 上传文件

    • multiple="multiple" 多选
    获取值
    js
    document.getElementById("file").files
    
    vue
    this.$refs.file.files
    
    提交
    ajax

    需要加请求头

    var files = document.getElementById("file").files
    var formdata = new FormData();
    const arr = Array.from(files);  // files是个对象 转换成数组
    arr.map(function (element) {
      formdata.append("file", element);
    });
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          console.log("响应成功")
        }
      }
    }
    //建立连接           这里填自己的服务器地址
    xhr.open("post", "http://www.123.com");
    xhr.setRequestHeader("enctype","multipart/form-data")
    xhr.setRequestHeader("processData", false)
    xhr.setRequestHeader("contentType", false)
    xhr.setRequestHeader("cache", false)
    //发送请求
    xhr.send(formdata);
    
    vue

    使用的axios,按post请求正常传值就可以了,这里传formdata,不用加请求头

    const formdata = new FormData()
    const files = Array.from(this.$refs.file.files)
    files.map(file => {
    formdata.append('file', file)
    })
    

    最后,如果要清除input的值:

    this.$refs.file.value = ''
    
    展开全文
  • 在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现 <el-form-item label="测试依赖excel文件:" label-width="150...

    实现提交form表单上传文件,

    • 在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现
       <el-form-item label="测试依赖excel文件:"
                              label-width="150px">
                  <el-upload class="upload-demo"
                             ref="upload"
                             :action="baseUrl+'/module/v1/manage/'"
                             multiple
                             :data="formInline"
                             :on-preview="handlePreview"
                             :file-list="fileList"
                             :http-request="httpRequest"
                             :limit="1"
                             :auto-upload="false">
                    <el-button slot="trigger"
                               size="small"
                               type="">选取文件</el-button>
                    <div slot="tip"
                         style="width: 250px;"
                         class="el-upload__tip">只能上传excel格式文件,文件不能超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-button type="primary"
                           icon=" iconfont icon-baocun"
                           @click="submitUpload('formInline')">保存</el-button>
    

    js代码如下,手动创建一个FormData对象,并且运用append的方法把要提交的表单数据逐个追加

     submitUpload (formName) {
     const fd = new FormData()// FormData 对象
          this.fd = fd
          this.$refs.upload.submit();//获取文件的提交动作
          this.fd.append('productid', this.formInline.productid)
       }   
    
     //新增自定义文件上传事件
        httpRequest (param) {
          console.log(param, '000')
          const fileObj = param.file // 相当于input里取得的files
          this.fd.append('file', fileObj)// 文件对象
          console.log(this.fd.get("file"), '选中文件后')
          axios.post('module/v1/manage/', this.fd).then(res => {
            console.log(res)
            this.moduleidenvieorment = res.data.moduleid
            if (res.data.code == '0000') {
            this.$message({
                  type: 'success',
                  message: '成功!'
                });
            } else if (res.data.code == '400') {
              this.$message.error(res.data.description);
              // this.$refs.upload.clearFiles();
            }
          })
    
        },
    
    展开全文
  • FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 ...以上就是本次关于vue中实现上传文件给后台的全部实例内容,感谢大家对软件开发网的支持。
  • 1,使用element-ui里面的el-upload组件进行文件上传,设置auto-upload为false不自动上传。后面我们通过设置请求头部通过表单的形式进行传参。 let config = { headers: { "Content-Type": "multipart/form-data" ...

    在这里插入图片描述
    1,使用element-ui里面的el-upload组件进行文件上传,设置auto-upload为false不自动上传。后面我们通过设置请求头部通过表单的形式进行传参。

    let config = {
       headers: {
         "Content-Type": "multipart/form-data"
       }
     };
    

    2,防止跨域我们这里需要设置

      const instance = axios.create({
        withCredentials: true
      });
    

    3,最终的代码请求方式如下

                 headers: {
                    "Content-Type": "multipart/form-data"
                 }            
                const instance = axios.create({
                  withCredentials: true
                 });           
                var formData = new FormData();
                formData.append("data", {name:"jjj"});
                formData.append("sign", {age:29});
                formData.append("apkFile", '具体上传的文件地址');
    
                let config = {
                  headers: {
                    "Content-Type": "multipart/form-data"
                  }
                };
                console.log(formData, config, "kklooo----");
                // return false
                self.$message({
                  type: "success",
                  message: "新增版本成功"
                });
                instance
                  .post(
                    "https://xxxxxxxx",
                    formData,
                    config
                  )
    
                  .then(response => {
                    self.isdisabledFn = false;
                    if (response.data.code == 200) {
                      self.$message({
                        type: "success",
                        message: response.data.msg
                      });
                    } else {
                      self.$message({
                        type: "warning",
                        message: response.data.msg
                      });
                    }
                  });
    
    展开全文
  • ref="ruleForm":model="formDataAll":rules="rules":label-col="labelCol":wrapper-col="wrapperCol">v-model="formDataAll.name"@blur="()=>{$refs.name.onFieldBlur();}"/>上海北京v-model="formDataAll....

    ref="ruleForm"

    :model="formDataAll"

    :rules="rules"

    :label-col="labelCol"

    :wrapper-col="wrapperCol"

    >

    v-model="formDataAll.name"

    @blur="

    () => {

    $refs.name.onFieldBlur();

    }

    "

    />

    上海

    北京

    v-model="formDataAll.date1"

    show-time

    type="date"

    placeholder="Pick a date"

    style="width: 100%;"

    />

    Online

    Promotion

    Offline

    Sponsor

    Venue

    :file-list="fileList"

    :remove="handleRemove"

    :before-upload="beforeUpload"

    >

      Select File 

    创建

    重置

    import reqwest from "reqwest";

    export default {

    data() {

    return {

    labelCol: { span: 4 },

    wrapperCol: { span: 14 },

    other: "",

    fileList: [],

    uploading: false,

    formDataAll: {

    name: "",

    city: undefined,

    date1: undefined,

    type: [],

    resource: "",

    fileName: null,

    desc: ""

    },

    rules: {

    name: [

    {

    required: true,

    message: "Please input Activity name",

    trigger: "blur"

    },

    {

    min: 3,

    max: 5,

    message: "Length should be 3 to 5",

    trigger: "blur"

    }

    ],

    city: [

    {

    required: true,

    message: "请选择城市",

    trigger: "change"

    }

    ],

    date1: [

    { required: true, message: "Please pick a date", trigger: "change" }

    ],

    type: [

    {

    type: "array",

    required: true,

    message: "Please select at least one activity type",

    trigger: "change"

    }

    ],

    resource: [

    {

    required: true,

    message: "Please select activity resource",

    trigger: "change"

    }

    ],

    desc: [

    {

    required: true,

    message: "Please input activity form",

    trigger: "blur"

    }

    ]

    }

    };

    },

    methods: {

    handleRemove(file) {

    const index = this.fileList.indexOf(file);

    const newFileList = this.fileList.slice();

    newFileList.splice(index, 1);

    this.fileList = newFileList;

    },

    beforeUpload(file) {

    this.fileList = [...this.fileList, file];

    return false;

    },

    handleUpload() {

    const { fileList } = this;

    this.formDataAll.fileName = fileList[0].name;

    const formData = new FormData();

    fileList.forEach(file => {

    formData.append("file", file);

    });

    // 请求加入新参数

    for (var prop in this.formDataAll) {

    if (this.formDataAll.hasOwnProperty(prop)) {

    formData.append(prop, this.formDataAll[prop]);

    }

    }

    // console.log(formData.get("user"));

    this.uploading = true;

    // You can use any AJAX library you like

    reqwest({

    url: "https://www.mocky.io/v2/5cc8019d300000980a055e76",

    method: "post",

    processData: false,

    data: formData,

    success: () => {

    this.fileList = [];

    this.uploading = false;

    this.$message.success("upload successfully.");

    },

    error: () => {

    this.uploading = false;

    this.$message.error("upload failed.");

    }

    });

    },

    onSubmit() {

    this.$refs.ruleForm.validate(valid => {

    if (valid) {

    alert("submit!");

    this.handleUpload();

    } else {

    console.log("error submit!!");

    return false;

    }

    });

    },

    resetForm() {

    this.fileList = [];

    this.$refs.ruleForm.resetFields();

    }

    }

    };

    展开全文
  • vue form表单上传文件

    2021-02-27 09:01:33
    data: {name: '',age: '',file: ''},methods: {getFile(event) {this.file = event.target.files[0];console.log(this.file);},submitForm(event) {event.preventDefault();let formData = new FormData();...
  • 1、文件大小验证 2、文件类型验证 3、额外参数传输 <el-upload class=upload-demo action :limit=1 :file-list=formFileList :...
  • 1、validate.min.js 表单验证,自定义规则,自定义中文错误提示 2、formdata 表单文件上传 3、文件上传获取缩略图 FileReader
  • 简单来说就是用Formdata方法,将表单数据和文件流一并处理,请求后台示例如下:表单:点击上传文件上传文件:{{modifyItem.exam.name}}提交方法:modifyOk(){this.$refs.modifyItem.validate(valid => {var ...
  • 必须是post请求,需要设置headers: {'Content-Type':'multipart/form-data'},在这个前提下才能文件上传。2.你的文件上传外层要有3.的change方法很重要,要记得加上,是用来获取选择的文件的信息数据。4.参数传递要...
  • 代码如下:<el-form-item label="Android客户端文件:" prop="file" ref="uploadpic"> <el-upload class="upload-demo" ref="upload" :headers="headers" :action="updateUrl" ...
  • elementUI+vue表单上传多个文件和其他表单数据一起提交 这里使用的formdata提交方式,this.$refs.upload.submit()提交会触发http-request自定义上传方法 element代码 <el-dialog title="文件上传" :visible....
  • vue之H5表单文件上传

    千次阅读 2018-06-15 18:18:34
    *" ref="fileToUpload" name="fileToUpload" id="fileToUpload" style="opacity: 0" @change=... 最后发现外网进入内网限制了上传大小为1M,我所使用的文件上传路径是外网路径。。。修改了外网限制后则正常。
  • JS 部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...文件上传&lt;/title&gt; &lt;script src="../js/commom.js"&gt;&lt;/script&
  • 本文主要是解决文件表单一起上传时,需要验证文件类型,如何验证文件类型。如何将表单其它项与文件一起提交保存暂不做说明。 看了官方得文档 使用钩子函数:before-upload="beforeAvatarUpload" ...
  • 在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。 过多介绍不说,过多的...
  • vue form表单上传文件弹窗组件使用 先上图,后上码 创建组件createIdeaPop.vue 直接上代码啦 createIdeaPop.vue <template> <div class="modal-bg" v-show="showPop" @mousemove="modalMove" @mouseup=...
  • value = "e://#%.jpg"; 后台接收: 前台时可以看到文件名 java后台String path = request.getParameter("path");时变成了e:// 解决: 需要在前台对特殊字符进行处理 function filter(value) { .......
  • 表单内使用上传文件表单其他内容一起上传 <template> <div class="addAppUpdate"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm...
  • Vue实现附件上传功能

    2020-10-15 06:55:39
    主要为大家详细介绍了Vue实现附件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一次接口。 起初是准备使用upload组件自带的http-request来自定义事件,覆盖组件的默认上传行为,但那样需要自己...
  • 文章目录具体的思路:一、Vue1.1 template1.2 script1.2.1 uploadZip()1.2.2 getFilePath()...前端接收这个链接后存到变量里,等提交表单时一起把数据传给后端 把数据传给后端时,Django通过一个forms接收数据 把这
  • vue页面设置 <el-upload class=upload-demo action= :before-upload=beforeUpload //上传前操作 :before-remove=beforeRemove //移除钱操作 :multiple=false //禁止多选 :http-request=myUpload //文件...
  • 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82811812 Spring Boot + Vue...
  • 1、表单数据提交, 2、表单中携带文件附件。 3、附件上传过程中进度提示。 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个小技巧设置 1、全局loading弹框定义使用 创建一个loading.js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,186
精华内容 2,074
关键字:

vue提交表单并上传文件

vue 订阅
友情链接: medfilter.rar