el-upload实现图片上传，将图片上传到后台，后台返回路径

完整代码如下：

<template>
  <div>
    <!-- 图片回填 -->
    <ul v-for="item in ruleForm.imgList" :key="item" class="el-upload-list el-upload-list--picture-card">
      <li tabindex="0" class="el-upload-list__item is-success">
        <img :src="item" alt="" class="el-upload-list__item-thumbnail">
        <a class="el-upload-list__item-name"><i class="el-icon-document"></i></a>
        <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
        <i class="el-icon-close"></i><i class="el-icon-close-tip">按 delete 键可删除</i><!----><span class="el-upload-list__item-actions">
          <span @click="handlePictureCardPreview(item)" class="el-upload-list__item-preview">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(item,ruleForm.imgList)"><i class="el-icon-delete"></i></span></span>
      </li>
    </ul>
    <el-upload
      class="el-upload el-upload--picture-card"
      style="border:none"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :action="this.dialogFileUpload.uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleAvatarSuccess"
      accept="image/gif,image/jpeg,image/jpg,image/png"
      name="file"
      multiple
      :show-file-list=false
     >
      <i class="el-icon-plus el-upload el-upload--picture-card"></i>
    </el-upload>
    <el-dialog width="50%" style="text-align:center" :close-on-click-modal="false" :visible.sync="dialogVisibleImg" size="tiny">
      <img style="max-width:100%;max-height:100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {BASE_PATH} from '@/config/api'

export default {
  data() {
    return {
      /*列表数据*/
      tables: {
        /*表格数据*/
        tableData: [],
        /*默认显示页码*/
        currentPage: 1,
        /*总数*/
        total: 0,
        /*当前页*/
        page: 1,
        /*分页*/
        limit: 10,
        /*加载框*/
        tableLoading: false
      },
      ruleForm:{
        imgList : [],
      },
      allInputDisabled: false, //查询时所有的不可编辑
      dialogImageUrl: '',     //点击放大查看图片
      dialogVisibleImg: false,
      /*文件上传*/
      dialogFileUpload: {
        /*标题*/
        dialogTitle: "文件上传",
        /*显示*/
        dialogFormVisible: false,
        /*上传地址*/
        uploadUrl: BASE_PATH + this.api.REVIEW_COMPLAINTS_UPLOAD,
         /*表单数据*/
        formDate: [],
        imgUrl: [],
      },
    };
  },
  methods: {
    //提交之前
    handleBeforeUpload(file){
        this.tables.tableLoading = true;
    },
    //图片删除
    handleRemove(file, fileList) {
      this.tables.tableLoading = true;
      for(let i=0;i<fileList.length;i++){
        if(fileList[i] == file){
          fileList.splice(i,1);
        }
      }
      this.ruleForm.imgList = fileList;
      this.tables.tableLoading = false;
    },
    //图片放大查看
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file;
        this.dialogVisibleImg = true;
    },
    // 上传文件成功的回调
    handleAvatarSuccess(res,file,fileList){
      this.dialogFileUpload.imgUrl = [];
      this.dialogFileUpload.imgUrl.push(res.body.data.fileUrl)
      fileList = this.dialogFileUpload.imgUrl;
      for(let i=0;i<fileList.length;i++){
        this.ruleForm.imgList.push(fileList[i]);
      }
      setTimeout(()=>{
        this.tables.tableLoading = false;
      },1000)
    },
    // 上传文件失败的回调
    handlerError(res){
      this.$message({
        type: 'warning',
        message: '上传文件失败'
      });
    },
  },
  mounted(){
      
  },
  created() {
  }
};
</script>

<style lang="scss" scoped>
</style>