element图片（文件）上传使用方法

element提供了图片上传、删除、回显一系列功能 同时支持多文件上传 在vue中使用举例

html部分：

<el-upload action="http://api.chigeetech.com:8072/api/File/UploadFiles" :file-list="file_list" :limit="3" list-type="picture-card" :on-exceed="exceed" :on-progress="uploadProgess" :on-success="uploadSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

 需要注意的是回显部分 路径可能有服务器刚上传的也有原先item中存在的
 所以在点击dia编辑时 留出直接的path 以方便以后的使用
 if (item.imgUrl && item.imgUrl.length > 0) {
    item.imgUrl.forEach(item => {
      let obj = {
        path: item,
        url: 'http://api.chigeetech.com:8072' + item
      }
      this.file_list.push(obj)
    })
  }

同样的 在文件上传成功时的钩子中的fileList参数中也要注意是新给服务器的还是原本item就有的 兼容方法 this.img_path_arr = [] fileList.forEach(item => { // 新上传的有res if (item.response) { let path = item.response.data this.img_path_arr.push(path) } else { // 原先就有的直接取文件路径 let path = item.path this.img_path_arr.push(path) } })