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&nbsp;&nbsp;(请上传小于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()) === -1)
 { this.$message({ type: 'warning', message: '请上传后缀名为[doc,docx,xls,xlsx,ppt,pptx,pdf,zip,rar]的附件！' }); return false; } },

handleUploadSuccess(response,files,fileList){//这里是自带的3个参数
      if(response.code!==200){
        this.$message({
            type: 'warning',
            message: response.msg
        });
        //this.$refs.upload.clearFiles();
        this.fileIdsList = [];
        this.sourceFileList = [];
        for (let i = 0; i < fileList.length - 1; 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) === -1) {
          this.$message.error('上传图片仅支持.jpg .jpeg .gif .png .bmp图片格式！');
          return false;
      }
      return true;
    },
    handleLogoing(event,file,fileList){
      if (file.size / 1024 / 1024 >= 2) {
          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;
      }
      
    },
}

posted on 2018-12-04 19:59 执候阅读(6421) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部