element-ui中上传具体用法

dialog页面上传部分

<el-dialog title="门店详情" :visible.sync="dialogStoreDetails" width="60%">
  <el-form>
    <el-form-item label="微信默认头像" prop="defaultUserAvatar">
      <el-upload
        class="gebi_img_icon_slide"
        :auto-upload="false"
        :show-file-list="false" multiple
        accept="image/jpg,image/png,image/jpeg"
        list-type="picture-card"
        :on-change="imgWxChange">
        <img v-if="imageIcon" :src="imageIcon" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogStoreDetails = false">取 消</el-button>
    <el-button type="primary" @click="rowUpdateStoreDetails">确 定</el-button>
  </span>
</el-dialog>

对应 imgWxChange 事件：

imgWxChange(file, fileList) {
  const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
  if (!isLt2M) {
    this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!')
    return;
  } else {
    this.imageIconFile = file;
    this.imageIcon = URL.createObjectURL(file.raw);
  }
}

点击打开弹dialog弹窗：

// 门店详情按钮
storeDetailsAdd(row) {
  this.dialogStoreDetails = true;
  this.storeDetailsStoreId = row.id;
  this.dataStoreDetails = [];
  this.onLoadStoreDetails(this.pageStoreDetails);
}

打开弹窗初始化界面内容：

// 门店详情初始化
onLoadStoreDetails(pageStoreDetails, params = {}) {
  getStoreDatailsList(this.storeDetailsStoreId, pageStoreDetails.currentPage - 1, pageStoreDetails.pageSize, Object.assign(params, this.formItemStoreDetails)).then(res => {
    const data = res.data;
    if (data.content && data.content[0]) {
      this.dataStoreDetails = data.content[0];
    } else {
      this.dataStoreDetails = {
        defaultUserAvatar:'',
        defaultNickNamePrefix:''
      };
    }
  });
},

点击确认修改dialog内容并上传

// 修改门店详情
rowUpdateStoreDetails() {
  let row = this.dataStoreDetails;
  row['storeId'] = this.storeDetailsStoreId;

  if (row.id) {
    let defaultUserAvatarFile = this.imageIconFile;
    let formData = new FormData();
    if (defaultUserAvatarFile) {
      formData.append('defaultUserAvatarFile', defaultUserAvatarFile.raw);  //添加图片信息的参数
    }
    for (var p in row) {
      if (p.indexOf("$") < 0) {
        formData.append(p, row[p]);
      }
    }

    updateStoreDatails(formData).then((res) => {
      if (res.status == "SUCCESS") {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      } else {
        this.$message({
          type: "error",
          message: "编辑失败!" + res.error
        });
      }
      this.dialogStoreDetails = false
    }, error => {
      this.dialogStoreDetails = false
    });
  } else {
    saveStoreDatails(row).then((res) => {
      if (res.status == "SUCCESS") {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      } else {
        this.$message({
          type: "error",
          message: "添加失败!" + res.error
        });
      }
      this.dialogStoreDetails = false
    }, error => {
      this.dialogStoreDetails = false
      console.log(error);
    });
  }
},