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 axios 与 FormData 结合 提交文件 上传文件
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData())