今天完成的事情： 

在文件上传前做类型大小等限制

（1）一种方式是，加accpet属性

<el-upload class="upload-demo" :multiple="true" :action="action" accept="image/jpeg,image/gif,image/png,image/bmp" 

:file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">

（2）另一种方式是在上传前的触发函数里面去判断

复制代码

beforeAvatarUpload(file) {

    const isJPG = file.type === 'image/jpeg';

    const isGIF = file.type === 'image/gif';

    const isPNG = file.type === 'image/png';

    const isBMP = file.type === 'image/bmp';

    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isGIF && !isPNG && !isBMP) {

        this.common.errorTip('上传图片必须是JPG/GIF/PNG/BMP 格式!');

    }

    if (!isLt2M) {

        this.common.errorTip('上传图片大小不能超过 2MB!');

    }

    return (isJPG || isBMP || isGIF || isPNG) && isLt2M;

},

复制代码

3、同时传递form表单及有多个upload文件该如何传递？

复制代码

newSubmitForm () {

  this.$refs['newform'].validate((valid) => {

    if (valid) {

      //表单的数据

      this.uploadForm.append('expName', this.newform.expName)

      this.uploadForm.append('expSn', this.newform.expSn)

      this.uploadForm.append('groupId', this.newgroupId)

      this.uploadForm.append('subGroupId', this.newsubgroupId)

      this.uploadForm.append('expvmDifficulty', this.newform.expvmDifficulty)

      newExp(this.uploadForm).then(res => {

        if (res.code === 400) {

          this.$message.error(res.error)

        } else if (res.code === 200) {

          this.$message.success('上传成功！')

        }

      })

      this.$refs.uploadhtml.submit()   // 提交时分别触发各上传组件的before-upload函数

      this.$refs.uploadfile.submit()

      this.$refs.uploadvideo.submit()   

    } else {

      console.log('error submit!!')

      return false

    }

  })

},

newHtml (file) {   // before-upload

  this.uploadForm.append('html', file)

  return false

},

newFiles (file) {

  this.uploadForm.append('file[]', file)

  return false

},

newVideo (file) {

  this.uploadForm.append('video', file)

  return false

}

复制代码

复制代码

export function newExp (data) {

  return axios({

    method: 'post',  // 方式一定是post

    url: '你的后台接收函数路径',

    timeout: 20000,

    data: data        // 参数需要是单一的formData形式

  })

}

复制代码

　　注意：（1）对于多个上传组件来说，需要分别触发，去给FormData append数据

　　（2）接收多文件一定要是数组形式的file[]，this.uploadForm.append('file[]', file)

4、如何传递文件和其他参数

　　就像第一节那样，如果不使用action实现上传，而使用before-upload属性也能实现上传的效果。

　　before-upload属性，这是一个function类型的属性，默认参数是当前文件，只要能传递这个文件也能实现效果

　　要传递这个方法就需要new一个formdata对象，然后对这个对象追加key和value，类似于postman测试时那样。

　　另外注意：传递formdata和data不能一起传递，要传递formdata就不能有data，所以对于其他参数的传递，也要改为

复制代码

beforeUpload (file,id) {

    let fd = new FormData()

    fd.append('file', file)

    fd.append('id',id)//其他参数

    axios.post(url, fd, {

    })

 },

复制代码

　　而不能使用这种又有FormData，又有data的模式

复制代码

beforeUpload (file,id) {

        let fd = new FormData()

        fd.append('key', file, fileName)

        axios.post(url, fd,{

          data：{

           id:id

          },

          headers: {

           'Content-Type': 'multipart/form-data'

          }

        })

     },

明天计划的事情：
遇到的问题： 
收获：