Vue+ FormData 实现上传文件

Posted 辣可乐少加冰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+ FormData 实现上传文件相关的知识,希望对你有一定的参考价值。


前言

提示:小编今天介绍一下 用FormData 结合 el-upload 实现上传文件


提示:以下是本篇文章正文内容,下面案例可供参考

一、FormData是什么?

传统的文件上传方式是提交form表单,今天使用了 formdata 所以想好好研究一下
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,
并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,
本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。

提到了 “可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去” 那不是ajax吗
那么我们就用ajax来实现文件上传吧!!

  • 使用FormData.append()添加属性

二、使用步骤

使用 Element-ui 中的el-upload 最终实现

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

2.读入数据

代码如下(示例):

   <el-upload
            style="width: 579px"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
             :http-request="http_request"  // 上传
            :on-preview="handlePreview"  
            :before-remove="beforeRemove"  // 删除
            multiple
            :on-exceed="handleExceed"  // 限制
            :file-list="fileList"   // 生成
          >
            <el-button size="small" class="button2" style="150px;"
              >点击上传</el-button
            >
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
   </el-upload>

点击http_request 这里结合使用 FormaData

 var formData = new FormData();
      formData.append("file", params.file);
      formData.append("fileName", params.file.name);
      formData.append("tenantId", sessionStorage.getItem("id"));

接着把formadata 作为Ajax 的参数 提交 即可

  this.ajax= (
		 url: '请求地址',
         data: formData,
         method: 'post',
         headers:  
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Auth-Token": sessionStorage.getItem("token"),
         
)
 .then(() =>  
	调用方法一半情况是调用查询附件详情接口(详情的方法查询到的数据赋值到:file-list 中即可 )
)

删除附件:

    beforeRemove(file, fileList) 
       if (file && file.status === "success") 
        this.$confirm("您确定要删除吗?", "提示", 
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "butText",
          type: "warning",
          center: true
        )
          .then(() => 
              this.$axios(
                method: "post",
                url:
                headers: 
                  "Content-Type": "application/json",
                  Accept: "application/json",
                  "X-Auth-Token": sessionStorage.getItem("token"),
                ,
              )
              .then(res => 
                // console.log(res);
                this.query_attachment();
          
                  this.$message(
                    type: "success",
                    message: "删除成功!"
                  );
       
              )
              .catch(err => 
                console.log(err);
              );
          )
          .catch(() => 
            this.query_attachment();
            this.$message(
              type: "info",
              message: "已取消删除"
            )
          
          );
      
    ,

小伙伴快尝试一下吧!!


总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了formdata的使用,而formdata提供了大量能使我们快速便捷地处理数据的函数和方法。

以上是关于Vue+ FormData 实现上传文件的主要内容,如果未能解决你的问题,请参考以下文章

vue框架实现文件上传功能

vue axios 与 FormData 结合 提交文件 上传文件

vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData())

Vue-resource + FormData 文件上传与 Laravel 后端

vue+axios通过formdata提交参数和上传文件

vue使用formdata上传多个图片,springboot以文件数组的形式接受