element中使用formdata进行上传文件的方法
作者：lilly呀
前言
在使用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;
}
参考博客：
elementUI 上传文件使用formdata
elementUI
到此这篇关于elementUI中使用formdata进行上传文件的文章就介绍到这了,更多相关elementUI中使用formdata进行上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！