文件上传(图片)是非常常用的一个组件,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 文件上传接口实现的文件上传效果,同时对上传的文件进行预览。