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

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

  
    点击选择
    
只能上传1张jpg/png文件，且不超过500kb
  



  取 消
  确 定

 

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;
    }
  });
},

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

  
    
      
        点击选择
        
只能上传一张图片，且小于1M
      
    
  

  

    取 消
    确 定
  

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变量来控制的。