正文
elementui上传文件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<el-form-item label="上传附件">
<transition name="fade">
<el-upload ref="upload" class="upload-demo" drag :action="fileUploadPath"
accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar"
:on-success="handleUploadSuccess" :on-remove="handleUploadRemove"
:before-upload="handleBeforeUpload" :file-list="this.ruleForm.fileJson">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处(火狐不支持)，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">支持格式：doc,docx,xls,xlsx,ppt,pptx,pdf,zip,rar (请上传小于8M的文件)。</div>
</el-upload>
</transition>
</el-form-item>
主要依靠的是handleUploadSuccess上传成功执行的方法
fileUploadPath这个字段是你上传的文件路径
data 里面定两个变量fileIdsList，sourceFileList 数据类型为函数
handleUploadRemove(file, fileList) {//删除类似
this.fileIdsList = [];
this.sourceFileList = [];
fileList.map(res => {
if (res.response) {
this.fileIdsList.push(res.response.data.id);
this.sourceFileList.push({
name: res.response.data.fileName,
url: res.response.data.accessUrl,
fileUrl: res.response.data.fileUrl,
id: res.response.data.id
});
} else {
this.fileIdsList.push(res.id);
this.sourceFileList.push({
name: res.fileName,
url: res.accessUrl,
fileUrl: res.fileUrl,
id: res.id
});
}
})
},
handleBeforeUpload(file){//文件过滤，html用了accept，不过不考虑兼容下面可以不要
var FileExt = file.name.replace(/.+\./, ""); if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'zip', 'rar']
.indexOf(FileExt.toLowerCase()) === -)
{ this.$message({ type: 'warning', message: '请上传后缀名为[doc,docx,xls,xlsx,ppt,pptx,pdf,zip,rar]的附件！' }); return false; } },
handleUploadSuccess(response,files,fileList){//这里是自带的3个参数
if(response.code!==){
this.$message({
type: 'warning',
message: response.msg
});
//this.$refs.upload.clearFiles();
this.fileIdsList = [];
this.sourceFileList = [];
for (let i = ; i < fileList.length - ; i++) {//数据会有两种可能
if (fileList[i].response) {
this.fileIdsList.push(fileList[i].response.data.id);
this.sourceFileList.push({
name: fileList[i].response.data.originalFileName,
url: fileList[i].response.data.accessUrl,
fileUrl: fileList[i].response.data.fileUrl,
id: fileList[i].response.data.id
});
} else {
this.fileIdsList.push(fileList[i].id);
this.sourceFileList.push({
name: fileList[i].name,
url: fileList[i].url,
fileUrl: fileList[i].fileUrl,
id: fileList[i].id
});
}
}//这里主要是处理假设上传失败，获取失败之前成功的图片
}else{
this.$message({
message: "上传成功！",
type: 'success'
});
this.fileIdsList=[];
this.sourceFileList = [];
fileList.map(res=>{
if(res.response){
this.fileIdsList.push(res.response.data.id);
this.sourceFileList.push({
name: res.response.data.fileName,
url: res.response.data.accessUrl,
fileUrl: res.response.data.fileUrl,
id: res.response.data.id
});
}else{
this.fileIdsList.push(res.id);
this.sourceFileList.push({
name: res.fileName,
url: res.accessUrl,
fileUrl: res.fileUrl,
id: res.id
});
}
})
}
let mesfileLists=[];//把数据处理成后端给的接口需要的样子
this.sourceFileList.forEach((item)=>{
let mesfile={};//定一个对象存字段
mesfile.fileName=item.name;
mesfile.url=item.fileUrl;
mesfile.fileId= item.id;
mesfileLists.push(mesfile);//然后push到一个函数里面
})
if(this.sourceFileList){
this.ruleForm.fileJson=mesfileLists;
}
编辑页面同理
注意，你如果数据格式像我这样的在编辑页面你还要处理下
fileList.map(res=>{
if(res.response){
this.fileIdsList.push(res.response.data.id);
this.sourceFileList.push({
name: res.response.data.fileName,
url: res.response.data.accessUrl,
fileUrl: res.response.data.fileUrl,
id: res.response.data.id
});
}else{
this.fileIdsList.push(res.id);
this.sourceFileList.push({
name: res.name,
url: res.accessUrl,
fileUrl: res.fileUrl,
id: res.id
});
}
})
他们两个读的名字不一样，我被坑了下，所以留下博客留念
补充elementui图片上传
单图上传
<p class="logoLoading" v-if="progressNum">图片过大,上传中,请稍后...</p>
<div class="logoBox" v-if="ruleForm.logoUrl">
<img :src="ruleForm.logoUrl" class="logo">
<div class="img-del-btn" @click="clearLogo">
<div class="del-box">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</div>
</div>
</div>
<el-upload
class="logo-uploader"
:action="UploadPath"
:show-file-list="false"
:before-upload="handleBeforeLogo"
:on-progress="handleLogoing"
:on-success="handleLogo"
accept=".image,.jpg,.jpeg,.image,.bmp,.image,.gif,.png">
<el-button class="logo_update">上传图标</el-button>
</el-upload>data(){
UploadPath:' 图片上传路径' ，
ruleForm:{
logoUrl:'',
},
progressNum:false,
}
methods:{
handleBeforeLogo(file){
if (['image/jpeg', 'image/bmp', 'image/gif', 'image/png'].indexOf(file.type) === -) {
this.$message.error('上传图片仅支持.jpg .jpeg .gif .png .bmp图片格式！');
return false;
}
return true;
},
handleLogoing(event,file,fileList){
if (file.size / / >= ) {
this.progressNum=true
}
},
handleLogo(res){
if(res.data.url){
this.ruleForm.logoUrl =res.data.url;
this.progressNum=false;
}
},
clearLogo(){
this.ruleForm.logoUrl=''
}
}
多图上传
<ul class="bannerUl">
<li class="bannerLi" :style="`backgroundImage:url(${bannerItem.url})`" v-for="(bannerItem,index) in bannerList" :key="index">
<div class="img-del-btn" @click.stop="handleBannerRemove(index)">
<div class="del-box">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</div>
</div>
</li>
</ul>
<el-upload
class="bannerAdd"
:action="UploadPath"
:before-upload="handleBeforeBanner"
:on-success="handleBannerSuccess" accept=".image,.jpg,.jpeg,.image,.bmp,.image,.gif,.png">
<i class="el-icon-plus bannerAddIcon"></i>
<span class="bannerAddTitle">添加轮播图<br/><span style="font-size:12px;">建议1200*360</span></span>
</el-upload>
methods:{
handleBeforeBanner(file){
if (['image/jpeg', 'image/bmp', 'image/gif', 'image/png'].indexOf(file.type) === -1) {
this.$message.error('上传图片仅支持.jpg .jpeg .gif .png .bmp图片格式！');
return false;
}
if (file.size / 1024 / 1024 >= 2) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
return true;
},
handleBannerSuccess(res, file, fileList){
let flag=true;
if(this.bannerList&&this.bannerList.length>4){
this.$message({
type: 'error',
message: '轮播图最多上传5张！'
});
flag=false;
}else{
this.bannerList.push(res.data);
flag=true;
} },
}
