前言

在使用iview ui作为前端框架时，记录其中上传组件的笔记

一、上传组件常用属性

<Upload
  ref="upload"
  :multiple="false"
  :before-upload="handleUpload"
  :show-upload-list="false"
  :format="['jpg','jpeg','png']"
  :on-success="uploadSuccess"
  action="http://192.168.47.100:8080/material/material/upload">
  <div>
    <Icon type="md-image" style="font-size: 120px;color: gainsboro"/>
  </div>
</Upload>

1.ref=“upload”

ref=“upload”：ref必须这样写，如果不这样写，则无法上传，我在想万一有这样的场景，一个表单里面有两个字段需要是上传文件类型，ref都为"upload"如果都放在一个组件内，ref则类似DOM元素的ID，可想而知，两个一样名称的ID，会让产生混淆，有兴趣的网友可以自行尝试下，也许也不会遇到这个问题。

2.multiple

multiple：是否允许多个文件上传

3.before-upload

before-upload：如果没有阻止上传组件的自动上传事件，那么上传组件一上传文件就开始上传。设置before-upload并返回false则可以阻止默认上传，根据属性名称可以知道，上传前需要给上传文件进行处理和验证等都可以在这个属性中进行。handleUpload方法如下所示：

handleUpload (file) {
    
     // 再上传之前需要对文件做些处理
  let keyID = Math.random().toString().substr(2);//这个是对上传图片绑定个关键ID
  file['keyID'] = keyID;
  this.file.push(file);
  this.uploadFile.push(file)
  return false;
},

4.show-upload-list

show-upload-list：是否显示上传文件列表，选择false则不显示。

5.format

format：上传文件的类型。这个版本的iview的format属性里面设置的参数只能上传的才能起作用，而且没有任何提示，一般情况下，是在文件域选择的时候就应该限制选择的类型。

6.on-success

on-success：上传成功之后的属性

7.action

action：上传地址，必须填写。

二、手动上传的函数

因为 自动上传已经被停止了，所以我们需要自己手动编写上传文件的函数

handleSubmit (name) {
    
    
        this.formValue.tag_id = this.formValue.tagId
        if (this.formTitle == '上传作品') {
    
    
          if(this.uploadFile.length === 0 ) {
    
    
            this.$Message.error('未选择上传文件')
            return false
          }//对上传文件经验验证，判断下是否有上传文件
          this.$refs[name].validate((valid) => {
    
    
            if (valid) {
    
    
              this.loading = true
              for (let i = 0; i < this.uploadFile.length; i++) {
    
    
                let item = this.file[i]
                this.$refs.upload.post(item);//此句代码为上传组件的关键代码
              }
            } else {
    
    
              this.$Message.error('提交失败!')
            }
            this.loading = false
          })
        } else {
    
    
          ...
        }
      },

总结

我也忘记了当时将两个上传组件放在同一个表单里面是否遇到了问题，等有空自己尝试下