2.Upload上传组件自定义上传实例及注意点

1.自定义上传时，当选中图片this.$refs.upload.submit() 就会触发:http-request = "httpRequest"事件 。

<el-form-item :label="upload_lable" :label-width="formLabelWidth">
  <el-upload class="upload-demo" ref="upload" :limit="upload_limit" :auto-upload="false" :http-request="httpRequest" action=""  :on-change="filechange" :on-remove="handleRemove" :file-list="form.fileList" list-type="picture">
    <el-button size="small" type="primary">点击选择</el-button>
    <div slot="tip" class="el-upload__tip">只能上传1张jpg/png文件，且不超过500kb</div>
  </el-upload>
</el-form-item>

<div slot="footer" class="dialog-footer">
  <el-button @click="dialogFormVisible = false">取 消</el-button>
  <el-button type="primary" @click="commitSave">确 定</el-button>
</div>

 

filechange(file, fileList) { // 如果没有选取文件，可以加个字段来控制流程
  if (file.name) {
    this.upload_flag = true;
  }
},
//触发 httpRequest 事件
commitSave(){ // 点确定时触发事件
  if(this.upload_flag){
    this.$refs.upload.submit();
  }else{ // 不传图片,直接调用
    this.$refs['form'].validate((valid) => {