Vue上传材料（使用Element Upload组件）

之前写了使用input上传材料的方法，这次分享一下自己对使用Elemen Upload组件进行上传材料的理解。

本身比较喜欢使用Element upload组件的照片墙来上传材料。有以下几个优点：

1.可以多张上传

2.可以很清楚的看到所上传的材料

3.可以很清楚的观察上传时的状态

4.文件列表移除单独文件及放大预览等优点

如果使用input的方法管实现一个预览功能就很麻烦，所以还是很看好Element的这个组件，平时也很喜欢去使用。

首先分享一下我用Upload组件的代码：

 　　<el-upload

          ref="upload"

          :on-success="handleAvatarSuccess"

          :data="uploadImgData"

          :on-preview="handlePictureCardPreview"

          :on-remove="handleRemove"

          :action= "action"

          list-type="picture-card"

        >

          <i class="el-icon-plus" />

        </el-upload>

      </el-form-item>

　　<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="50%" >

      <el-image :src="dialogImageUrl" width="100%" />

    </el-dialog>

 

<script>

 

export default {

  props: {

    action: {

      type: String,

      default: '/upload/image'

    },

    uploadImgData: {

      type: Object,

      default: () => ({})

    }

  },

　data(){

　　return{

　　　　dialogVisible: false,

　　　　dialogImageUrl: '' 

　　}

}

　methods: {

　　handleRemove(file, fileList) {

　　　　console.log(fileList)

　　　　},

 　handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url

      this.dialogVisible = true

    },

　　}

}

</script>

 我们基本的代码时这样子的，有几个点需要注意下的

1.action：是上传文件的接口url，如我们写的upload/image，看自己的接口是什么

2.data： data是上传接口需要的header参数，需要给后端传什么参数都可以在data里面定义

3.list-type:文件列表的类型有text，picture，picture-card等三个类型

4.on-preview：预览功能，写一个方法起控制一个对话框之类的显示和隐藏

5.on-remove：删除功能，upload组件可以上传多张图片，可以删除锁任意已经上传的图片（这里要注意一下，如果要用上传接口，然后用到push到一个数组或者其他数据处理的，使用删除方法时要注意下所处理的数据变化，去掉所删除的图片的数据）

其他相关属性可以去看Element 文档

还有就是，之前自己在实际开发当中遇到的问题：

如果上传材料很大，还没有上传完成，这个是点击提交了，如果没有特殊处理，提交是可以成功的，但是图片不会成功上传（element组件上传时的百分比不是很实用）

这个情况怎么处理？

此时我们给upload的组件 传一个

:on-change="handleOnChange"

方法进去，去监听uploa组件的change事件，data里面定义一个，然后去写

handleOnChange(file, fileList) {
      this.uploadData = fileList
    },

提交的方法里写个一个这个判断：

if (this.uploadData.some(item => !item.response)) {
        this.$message.error('材料加载未完成')
        return
      }

因为，如果材料没有上传完成的话onchange里面的fileList里面的元素不会包含response对象，我们就利用这点去判断就可以解决了。