前言:在使用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 https://blog.csdn.net/weixin_43695464/article/details/112682022
elementUI https://element.eleme.cn/#/zh-CN/component/upload