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;
      }
      
    },
}