element-ui之upload上传

文件上传（图片）是非常常用的一个组件，element-ui中的这个upload如何使用呢？示例如下：

具体描述请参考在线文档：http://element-cn.eleme.io/#/zh-CN/component/upload

页面部分：

<el-upload
  class="upload-demo"
  drag
  action="//www.offeu.com/upfile"
  name="fname"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :on-change="handleChange"
  list-type="picture">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">（若上传图片不成功，请使用谷歌浏览器）</div>
</el-upload>

脚本部分：

methods: {
    handleChange: function (file, fileList) { // 演示维护fileList列表
      if (file.response !== undefined) {
        // 远程地址：'https://www.offeu.com' + file.response.ObjectFileName
        // 缓存地址：URL.createObjectURL(file.raw);
        let jd = JSON.parse('{"name":"' + file.name +
          '","status":"success","uid":' + file.uid +
          ',"url":"https://www.offeu.com' + file.response.ObjectFileName + '"}')
        this.fileList.push(jd)
        console.log(JSON.stringify(this.fileList))
      }
    },
    handleRemove: function (file, fileList) { // 删除图片时的处理
      console.log(file, fileList)
    },
    handlePreview: function (file) { // 预览图片时的处理
      console.log(file, this.fileList)
    }

还需要在data里放一个fileList的json对象，如：fileList: [{name: '152880729664.jpg', url: 'https://www.offeu.com/up/20181009/152880729664.jpg'}]

以上代码是针对本站的 https://www.offeu.com/upfile 文件上传接口实现的文件上传效果，同时对上传的文件进行预览。