el-upload文件上传

1.使用默认方式上传

1. action填写后端给的文件上传地址
2. 如果接口需要传输其他参数,可以绑定到data上面, 比如data={token: "token"}

• 使用默认的上传方式,后端返回的必须要给成这种格式

{
  "error": 0,
  "url": "",
  "name": ""
}

2.自定义上传

• 自定义上传时就不用管后端返回的数据格式

1. el-upload中添加属性:http-request="upload"绑定自定义的上传函数

2. 实现上传函数,这里使用xhr上传

upload(param) {
     console.log('参数', param)
     try {
      // 创建form对象,必须使用这个,会自动把content-type设置成multi-part-form
       const formData = new FormData()
       formData.append('file', param.file)
       //创建xhr
       const xhr = new XMLHttpRequest()
       //post上传地址
       xhr.open('post', this.url)
       //设置token如果需要
       xhr.setRequestHeader('token', getToken())
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4 && xhr.status === 200) {
           const json = JSON.parse(xhr.response)
          // 根据后端给的信息判断是否上传成功
           if (json.code === 1) {
             param.onSuccess(json, param.file, param.fileList)
             this.fileList.push({ name: param.file.name, url: json.url, data: json.data })
           } else {
             param.onError(json)
           }
         }
       }
       //获取上传的进度
       xhr.upload.onprogress = function(event) {
         if (event.lengthComputable) {
           var percent = event.loaded / event.total * 100
           param.onProgress(percent)
         }
       }
       //将formdata上传
       xhr.send(formData)
     } catch (e) {
       param.onError(e)
     }
   },

3.上传到七牛,和2类似,把其中的xhr换成七牛上传即可