iview 图片上传

前端开发工作中，难免会遇到做文件上传的功能，现在的前端开发一般都是使用各种框架，基本的前端框架一般都会有自己的上传组件。虽然前端框架很多，但其实相同的组件基本使用方法是大同小异的。

公司最近使用的前端框架是iview+vuejs,因工作需要做一个身份证文件上传的功能，组件选择的是iview的上传组件Upload 

先展示下效果图，好让这篇文章的同学判断一下需求是否一致

未上传之前

上传成功以后

下面说下核心代码

<Upload class="upload" accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp" v-model="formValidate.coverPhoto" 
:show-upload-list="showList" :action="upload_url" with-credentials 
:on-success="uploadSuccess"
:on-error="uploadError" :before-upload="preview" :data="{CoverOrBack:'Cover',Version:version,SessionID:SessionID,_Uploader_TaskID:uploadTaskID,_Method:'CertificateFile.userUpload',_Uploader_Total:'1',IdentityType:'01'}">
	<img src="../../../assets/before.png" class="img-idcard" v-if="idBefore==''">
    <img v-bind:src="idBefore" ref="upload-list" :disabled="hasSubmit" class="img-idcard"     v-else>
</Upload>

首先说下该组件各个参数的意义

1：action    文件上传的地址，必填

2：accept   指的接受的文件格式，不同的格式之间以逗号隔开。我这里写了几种常见的文件格式

3：show-upload-list  是否显示已上传文件列表 true代表显示，false代表不显示

4：with-credentials 支持发送cookie凭证信息

5：on-success 文件上传时的钩子，返回字段为response,file,fileList

6:on-error 文件上传失败时的钩子，返回字段为error,file,fileList

7:before-upload 文件上传前的钩子，参数为上传的文件，返回false或者promise则停止上传

8：data   上传时附带的额外参数（可根据自己的业务去决定要不要带data属性）

除此之外还有很多的属性，具体可去官网查看：http://v2.iviewui.com/components/upload

解释下携带:before-upload钩子的原因，因为业务需求是点击上传时要有图片预览。但是官方文档没有给出这方面的相关说法和展示，于是我利用了该钩子函数做了该功能

该钩子函数的定义如下

preview(file) {
                this.idBefore = window.URL.createObjectURL(file);
         }

图片预览实现了。

下面的代码是我根据自己的业务需求写的：

uploadSuccess(res, file, fileList) { // 文件上传回调 上传成功
                let that = this;
                if(res._STATUS == 1) {
                    this.version = res.Version;
                    this.formValidate.coverPhoto=true
                    this.formValidate.backPhoto=true
                } else {
                    that.$Message.error(res.Message);
                }

            },
            uploadError(res, file) { // 上传失败
                this.$Message.error('上传失败');
            }

根据自己的业务需求在on-success和on-err的钩子函数中编写业务逻辑代码即可基本实现完整的图片上传功能。