文件上传（单个和多个上传）

1.结构（多个上传）

 <el-form-item label="附件" prop="fileList" class="item-form-3" v-if="!isDetailPage" >
          <el-upload
                     action=""
                     :file-list='attchList'
                     :http-request="uploadImages"
                     :before-upload="beforeAvatarUpload"
                     show-file-list
                     multiple
                     accept=".doc,.docx,.ppt,.pdf,.rar,.zip,.JPG,.JPEG,.PNG,.gif">
            <el-button type="primary">上传附件</el-button>
          </el-upload>
          <span  v-if="isDetailPage">{{dialogForm.filePath}}</span>
 </el-form-item>

2.方法

beforeAvatarUpload(file) {
        if (file.size > 100 * 1024 * 1024) {
          this.$message.error('文件不能超过100M');
          return false
        }
      },
      uploadImages(val) {
        let formData = new FormData()
        //key：file与后台对应
        formData.append('file', val.file)
        http.post(//  http.post用的插件，可以用其他的ajax请求
                '/file/upload',
                formData,
                {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
        ).then(res => {
          if (res.status==0) {
            this.dialogForm.filePath = res.data.filePath;//上传文件路径
            //判断资料名称是否有值，如果没有值，则把上次附件名称给资料名称赋值
            if(!this.dialogForm.materialName){
              this.dialogForm.materialName=res.data.message;
            }
          } else {
            this.$message.error(res.message)
          }
        }).catch((error) => {
          console.log(error)
        });
      },

1.单个上传（结构）

<el-form-item label="附件" prop="fileList" class="item-form-3" v-if="!isDetailPage" >
          <el-upload
                     action=""
                     :file-list='attchList'
                     :limit="1"//限制数据
                     :http-request="uploadImages"
                     :before-upload="beforeAvatarUpload"
                     :on-exceed="onExceed" //文件超出个数限制时的钩子
                     show-file-list
                     accept=".doc,.docx,.ppt,.pdf,.rar,.zip,.JPG,.JPEG,.PNG,.gif">
            <el-button type="primary">上传附件</el-button>
          </el-upload>
          <span  v-if="isDetailPage">{{dialogForm.filePath}}</span>
        </el-form-item>

2.方法

  //上传
      onExceed: function () {
        return this.$message.error('仅允许上传一个附件');
      },
 beforeAvatarUpload(file) {
        if (file.size > 2 * 1024 * 1024) {
          this.$message.error('文件不能超过2M');
          return false
        }
      },
      uploadImages(val) {
        let formData = new FormData()
        //key：file与后台对应
        formData.append('file', val.file)
        http.post(
                '/file/upload',
                formData,
                {
                  headers: {'Content-Type': 'multipart/form-data'}
                }
        ).then(res => {
          if (res.status==0) {
            this.dialogForm.filePath = res.data.filePath;//上传文件路径
            //判断资料名称是否有值，如果没有值，则把上次附件名称给资料名称赋值
            if(!this.dialogForm.materialName){
              this.dialogForm.materialName=res.data.message;
            }
          } else {
            this.$message.error(res.message)
          }
        }).catch((error) => {
          console.log(error)
        });
      },