el-upload formdata格式上传文件

最新推荐文章于 2024-04-02 16:10:15 发布

初秋-.-

最新推荐文章于 2024-04-02 16:10:15 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44184780/article/details/128483400

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

el-upload formdata格式上传文件

使用场景：上传文件、图片有时候会要求使用formdata格式来上传

代码基于el-upload来讲 (如果有需要后面会写一篇专门讲解el-upload)

<template>
 <div>
  <el-upload
                  action="#"
                  :show-file-list="false"
                  slot="prepend"
                  ref="uploadref"
                  :http-request="httpRequest"
                >
                  <div style="display:flex">
                    <el-button type="primary" size="small">选择文件</el-button>
                  </div>
                </el-upload>
 </div>
</template>

  httpRequest(opt) {
      let file = opt.file;
      let name = file.name;
      let fd = new FormData();
      fd.append("file", this.file); //append我们可以理解为set一个属性和值进去（key,value）
      fd.append("name", name );
       let config = {
              headers: {
                "Content-Type": "multipart/form-data", //设置请求头
              },
            };
      this.woaicc.upload(fd).then((res) => {
              if (res.code === "200") {
                this.$message({ message: "上传成功",type: "success",});
              }
            });
    },