el-upload 上传图片和文件并显示

el-upload 上传图片和文件并显示

一、先看页面

					//图片
					<el-form-item label="营业执照图" prop="businessLicensePhotos" ref="zhizhao2">
                        <el-upload
                            class="upload-demo"
                            :action="imageurl"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name="file"
                            :on-success="handleAvatarSuccess6"
                            :on-exceed="handleExceed"
                            list-type="picture"
                            v-model="ruleForm.zhizhao"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>

					//文件
                    <el-form-item label="授权书" prop="authorization">
                        <el-upload
                            class="upload-demo"
                            :action="fileurl"
                            :on-success="handleAvatarSuccess7"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="2"
                            name="file"
                            :on-exceed="handleExceed"
                            v-model="ruleForm.shouquan"
                        >
                            <el-button size="small" type="primary" style="display: inline-block">点击上传</el-button>&nbsp;&nbsp;&nbsp;
                            <div style="display: inline-block; color: #606266; font-size: 12px">(经办人不是法人时需提供此项资料)</div>
                        </el-upload>
                    </el-form-item>

二、重点来了

action是上传的接口，必填参数

name是上传的文件字段名

理解：el-upload这个组件在文件图片上传过程中其实就是发送了一个请求，action就是接收、响应请求的接口地址，name的值就是这个接口需要传的字段的名字（对应接口文档里就是下图这个意思）

三、在页面里应该怎么写

第一步：在data里定义

			imageurl : this.$HOST + 'api/cert/upload/image',
            fileurl : this.$HOST + 'api/cert/upload/file',

第二步：写进生命周期mounted

		this.imageurl = this.$HOST + 'api/cert/upload/image';
        this.fileurl = this.$HOST + 'api/cert/upload/file';

第三步：请求结果:用到了成功的钩子函数，res就是返回值

	handleAvatarSuccess6(res, file) {
            this.ruleForm.zhizhao = res.obj;
            this.$refs.zhizhao2.clearValidate();
        },
        handleAvatarSuccess7(res, file) {
            this.ruleForm.shouquan = res.obj;
        },