使用element上传图片功能

1.页面导入elementUi（略）

2.在页面合适位置编写上传图片模块

 <el-upload
 	 id="upload"
     class="upload-demo"
     ref="upload"
     :on-change="changeUp"
     :on-remove="changeRe"
     list-type="picture-card"
     :action="httpurl + 'b_jxpc_cpjsbjtpxx/save/'"
     :on-preview="handlePictureCardPreview"
     :on-remove="handleRemove"
     :with-credentials="true"
     :auto-upload="false"
     :data="accData"
     :on-success="handleAvatarSuccess"
     :on-error="handleAvatarError"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

• 参数说明
  
  

3.编写JS

自带data数据

自带函数

发送请求

• this.$refs.upload.submit() 即可发送请求
  

附带参数

• 如果在保存图片时需同时发送其他参数，可使用 :data=“xxx” 进行附带
  
• 在后端controller直接获取使用
  

上传一张图片后隐藏上传框

• 调用on-change函数即可
• 删除图片后重新显示 on-remove即可（同理）
  
  

图片回显

• 调用 file-list函数
  
• 先在data里让fileList为空[]
  
• 判断是否存在图片：有数据的话改变fileList，否则继续为空[]
  
• 具体使用参考element官方