.vue文件_vue上传文件时的一些定制操作

上传文件时，有时候会碰到需要额外传递一些参数，显示上传的进度之类，这里分享下之前做过的一些处理。

vue里一般上传文件会用到一些组件，本次使用的是el-upload，这里只是介绍一种思路, 其他的组件类似，有碰到类似问题的，欢迎探讨。 前端小白，涉及到的代码可能会有点粗糙，欢迎来喷。

一开始在demo的时候，直接用的axios，按照官方的文档，还是比较顺利的。不过一般vue项目里里都会封装一个http请求的拦截器，用来做一些请求的拦截和一些必要信息的传递。自然为了统一，上传文件的内容也会使用到这个封装的请求。

http拦截器部分代码如下：(保存的文件位置和文件名是在utils/request.js里

import axios from 'axios'import { Message } from 'element-ui'const baseURL =  process.env.NODE_ENV === 'development'    ? 'http://127.0.0.1:8080/api'    : 'http://127.0.0.1/api'const instance = axios.create({  baseURL,  timeout: 30000,  withCredentials: true})instance.interceptors.request.use(  config => {    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')    return config  },  error => {    Message({      showClose: true,      message: error,      type: 'error'    })    Promise.reject(error)  })

axios有一个配置项是onUploadProgress, 主要就是获取文件上传进度的，上面的通用封装没有这个选项，但是我们可以在需要使用的地方，加入这个配置项，比如下面的这个upload方法

import request from '@/utils/request'function upload(data, config = {}) {  return request({    url: '/upload',    method: 'POST',    data: data,    ...config  })}

在实际的业务的vue代码里, template组件部分

将文件拖到此处，或点击上传

请注意您只能上传.mp4 .flv .mov格式的视频文件

注意，上述需要使用el-upload的http-request方法，如果不用的话，直接使用原生的action方式，就没法携带额外的参数了

vue文件中的script代码，就可以使用上面封装的upload方法了，部分doUpload方法的代码如下：

// 上传文件是Form表单，但是el-upload默认的形式，没法额外增加其他参数// 这里新定义一个FormData对象let fd = new FormData()let self = this// video属性绑定了二级制文件流内容fd.append('video', val.file)// 这里可以携带另外参数，用fd.append的形式即可fd.append('Content-Type', 'video/mp4')// 调用前面封装的upload方法upload(fd, {    onUploadProgress(progress) {     // uploadPercent的值是el-progress组件绑定的值      self.uploadPercent = Math.round(        (progress.loaded / progress.total) * 100      )    }}).then(res => {    console.log(res)})

这里upload的参数，传入了一个{}类型，方法是onUploadProgress，axios其他的配置，也可以用类似的思路来增加。