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) => {
      if (valid) {
        this.loading = true;
        if(this.dialogTitle == "新增风格"){
          this.form.id = '';
        }else{}
        var fd = new FormData();// FormData 对象
        fd.append("image_file", '');// 文件对象
        // 其他参数
        fd.append("id", this.form.id);
        fd.append("sort", this.form.sort);
        fd.append("name", this.form.name);
        updateStyle(fd).then(rsp => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getInitData();
          this.clearForm();
          this.loading = false;
          this.dialogFormVisible = false;
        }).catch(error => {
          this.loading = false;
        })
      } else {
        console.log('error httpRequest submit!!');
        return false;
      }
    });
  }

},
httpRequest(param) { // param是自带参数。 this.$refs.upload.submit() 会自动调用httpRequest方法.在里面取得file
  this.$refs['form'].validate((valid) => {
    if (valid) {

      this.loading = true;
      if(this.dialogTitle == "新增风格"){
          this.form.id = '';
      }else{}

  var fileObj = param.file; // 相当于input里取得的files
  var fd = new FormData();// FormData 对象
  fd.append("image_file", fileObj);// 文件对象
  // 其他参数
  fd.append("id", this.form.id);
  fd.append("sort", this.form.sort);
      fd.append("name", this.form.name);
      updateStyle(fd).then(rsp => { // 直接提交给后台。
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.getInitData();
        this.clearForm();
        this.loading = false;
        this.dialogFormVisible = false;
      }).catch(error => {
        this.loading = false;
      })
    } else {
      console.log('error httpRequest submit!!');
      return false;
    }
  });
},

下面是项目实例：（单张上传,大家只要参考上传图片的部分，有些不相关的字段请自行增减）

<!--新增编辑-->
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" v-loading="loading">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item :label="upload_lable" :label-width="formLabelWidth">
      <el-upload class="upload-demo" ref="upload" :limit="upload_limit" :auto-upload="false"  action="" :show-file-list="true"  :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">只能上传一张图片，且小于1M</div>
      </el-upload>
    </el-form-item>
  </el-form>

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

js:

data(){
    return{

form: {
  "id": undefined,
  "name": "",
  "image": "", // 取数据时返回的图片url，上传时不用提交
  // "sort": 0, // 20190104 去掉排序 sfk
  "image_file": "",//图片上传提交
  fileList: [] // 初始上传的文件
},
upload_limit: 2, // 最大上传数定为2且配合filechange方法就可以实现符合操作习惯的单张上传了，如果限制为1张，那在切换选择时就要删除原先的图片才能再选择新图片。
upload_lable:"", //上传lable
    }
}

 

methods:{

        

// 删图片时触发，raw
handleRemove(file, fileList) {
  this.form.image = "";
  this.form.image_file = "";
  this.form.fileList = [];
},

filechange(file, fileList) { //
  if(file.size > 1024 * 1024){
    this.$message({
      type: 'warning',
      message: '图片不能大于1M'
    })
    if(fileList.length >= 2){
      this.form.fileList = fileList.slice(0,1);
    }else{
      this.form.fileList = [];
    }
  }else{
    if(fileList.length >= 2){
      this.form.fileList = fileList.slice(1);
    }else{
      this.form.fileList = fileList;
    }
  }
},
//触发 httpRequest 事件
commitSave(form){
  this.$refs[form].validate((valid) => {
    if (valid) {
      if(this.dialogTitle == "新增风格"){
        this.form.id = '';
      }else{}

      var fd = new FormData();// FormData 对象
      var imagefile;
      if(this.form.fileList.length > 0){
        imagefile = this.form.fileList[0].raw;
        fd.append("image_file", imagefile);// 文件对象
      }else{
        imagefile = "";
      }
      fd.append("id", this.form.id);
      // fd.append("sort", this.form.sort);
      fd.append("name", this.form.name);

      this.loading = true;
      updateStyle(fd).then(rsp => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.getInitData();
        this.clearForm();
        this.loading = false;
        this.dialogFormVisible = false;
      }).catch(error => {
        this.loading = false;
      })
    } else {
      return false;
    }
  });
},
// 修改风格
handleEdit(row){
  this.dialogFormVisible = true;
  this.dialogTitle = "修改风格";
  this.form.id = row.id;
  this.form.name = row.name;
  this.form.image = row.image;
  // this.form.sort = row.sort;
  var obj = {}
  obj.url = row.image;
  obj.name = "";
  this.form.fileList = [];
  if(obj.url != undefined && obj.url != "" && obj.url != null){
    this.form.fileList.push(obj);
  }
  this.upload_lable = "重新上传图片"
}

}

Brief summary:

1.图片预览是根据this.form.fileList变量来控制的。