ElementUI 踩坑

坑1：当组件宽度变小时 时间部份被遮挡

解决方法：

.el-input--suffix .el-input__inner {

  padding-right: 0px; 

}

最后效果：

坑2：el-dialog 打开相同组件内容不更新（弹窗引用相同的组件，根据传值不同弹窗内容不同）没有触发组件生命周期

  eg:当我点击按钮A弹出页面A，关闭弹窗点击按钮B 此时还是会显示页面A而不会显示页面B 每次进入页面都会进行网络请求

接着踩坑：

在el-dialog上添加 key 保证弹窗唯一性每次打开都是新的弹窗 此时会更新页面A->页面B，但是又产生新的问题 每次打开页面都会产生两次网络请求

个人认为应该是旧组件没有被销毁 导致新旧组件都进行了网络请求

再踩坑：

接着查资料 了解v-if 若为false时组件被销毁 于是乎 el-dialog 的visible 配合v-if 就完美解决该问题

坑3:多选设置表单验证规则后 弹出表单自动验证

解决方法 ：使用自定义验证规则 然后将这个item关联的字段初始值设置为空数组

ElementUI + axios 上传文件

首先是前端代码

<el-upload
    action
    :show-file-list="false"
    :http-request="submitUpload"
    :before-upload="beforeAvatarUpload" >
      <el-button size="small" type="primary"><i class="el-icon-upload2" /> 
        更换头像
      </el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

...

// script

submitUpload(param) {
      const formData = new FormData()
      formData.set('file', param.file)
      console.log('formData', param.file)
      uploadImage(formData)
    }

上传文件接口封装，注意需要在request里面添加header信息'Content-Type': 'multipart/form-data'

...
// api.js封装上传文件接口
export function uploadImage(data) {
  return request({
    url: '/common/uploadImage',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

后台直接就可以获取到文件，我用的nodejs 的 koa2作为后台接收代码酱婶：

const file = ctx.request.files.file; // 获取上传文件

const reader = fs.createReadStream(file.path);// 创建可读流

const upStream = fs.createWriteStream(后端存储文件的路径);// 创建可写流
        
reader.pipe(upStream);// 可读流通过管道写入可写流