element中怎么使用formdata进行上传文件

本篇内容介绍了“element中怎么使用formdata进行上传文件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

前言

在使用elementUI文档的时候，上传图片的组件，使用了formdata的方式，第一次使用，在此记录一下。根据文档，就是在上传的时候，有一个上传图片的接口，点击上传之后会返回给你一个网络路径，再将网络路径跟表单的其他的信息通过提交接口，提交到后台即可。

一、el-upload中的相关参数

<!--上传图片-->
          <el-upload
            ref="upload"
            :headers="headers"
            class="upload-demo"
            :class="showUpload === true ? 'show-upload-pic' : ''"
            :limit="5"
            :action="uploadUrl"
            :data="data"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="changeBigImg"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <!--上传图片-->

①action必选参数

action:必选参数，上传的地址

//上传的地址，可以根据不同的环境配置不同的跳转地址
created() {
    if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
      this.uploadUrl = 'https://test.../common/upload_files';
    } else if (process.env.NODE_ENV === "production") {
      this.uploadUrl = 'https://operate.../common/upload_files';
    }
  },

②http-request实现自定义上传
但是，如果后台只给你一个接口，让你通过formdata来提交。通过查看api发现，还有个方法可以实现自定义上传。

http-request:覆盖默认的上传行为，可以自定义上传的实现。

用这个方法之前，我们还要将auto-upload设置成false.

auto-upload:是否在选取文件后立即进行上传

③headers设置上传的请求头部

headers:设置上传的请求头部

<script>
//可以添加请求的token
import { getToken } from '@/utils/auth'
export default{
	data(){
		return{
			headers:{
				authorization: getToken()
			},
			 data: {
        		projectCode: '',
        		projectVer: '',
        		imageBits: ''
      		},
      		fileList: [],
		}
	},
}
</script>

import Cookies from 'js-cookie'

const TokenKey = 'token'

export function getToken() {
  return Cookies.get(TokenKey)
}

④on-preview点击文件列表中已上传的文件时的钩子

on-preview:点击文件列表中已上传的文件时的钩子

handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogUpload = true;
},

⑤on-remove文件列表移除文件时的钩子

// 删除文件时，将相关参数清空，进行处理操作
    handleRemove(file, fileList, response) {
      this.saveParam.urls = '';

      for (let i = 0; i < this.imgArrs.length; i++) {
        if (file.response) {
          if (this.imgArrs[i] === file.response.data[0].imgUrl) {
            this.imgArrs.splice(i, 1);
          }
        } else {
          if (this.imgArrs[i] === file.url) {
            this.imgArrs.splice(i, 1);
          }
        }
      }
      const result = this.imgList.split(",");

      for (let i = 0; i < result.length; i++) {
        if (file.response) {
          if (result[i] === file.response.data[0].imgUrl) {
            result.splice(i, 1);
          }
        } else {
          if (result[i] === file.url) {
            result.splice(i, 1);
          }
        }
      }

      this.imgListCopy = ''; // 重新赋值
      for (let i = 0; i < result.length; i++) {
        this.imgList += result[i] + ",";
        if (result[i] !== '') {
          this.imgListCopy += result[i] + ",";
        }
      }
      this.imgList = this.imgListCopy;

      if (fileList.length < 5) {
        this.showUpload = false;
      }
    },

⑥on-success文件上传成功时的钩子

on-success:文件上传成功时的钩子

//在文件上传成功时，将相关参数进行赋值操作
handleAvatarSuccess(res, fileList) {
      let imgArr = '';

      imgArr = res.data[0].imgUrl;
      this.imgList += imgArr + ",";

      this.imgArrs.push(imgArr);
      if (this.imgArrs.length > 4) {
        this.showUpload = true;
      } else {
        this.showUpload = false;
      }
    },

图片展示：

调用接口的情况：

⑦on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

on-change:文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

// 上传图片的验证
changeBigImg(file, fileList) {
   this.bigFileList = fileList
   this.bigFile = file
}

二、扩展–如何在上传超过5张图片后，隐藏上传按钮

通过查看代码，发现上传按钮，是通过.el-upload–picture-card标签进行控制的，那么是不是可以在照片数量达到上限时，通过display: none;来控制显示和隐藏呢？直接对el-upload–picture-card不好控制，那么就通过判断数量，加上动态类名来控制。

<style>
.show-upload-pic .el-upload--picture-card {
  display: none;
}
</style>

if (fileList.length < 5) {
    this.showUpload = false;
}

if (this.imgArrs.length > 4) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}

if (this.fileList.length >= 5) {
    this.showUpload = true;
} else {
    this.showUpload = false;
}

“element中怎么使用formdata进行上传文件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！