上传文件时，有时候会碰到需要额外传递一些参数，显示上传的进度之类，这里分享下之前做过的一些处理。
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组件部分
<el-upload
ref="newupload"
class="upload-file"
drag
:before-upload="beforeUpload"
multiple
action="no"
:http-request="doUpload"
:auto-upload="false"
accept=".mp4,.flv,.mov"
:on-change="handleChange"
:on-success="handlesuccess"
>
<i v-if="uploadFlag === false" class="el-icon-upload" />
<div v-if="uploadFlag === false" class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
<el-progress
v-if="uploadFlag === true"
type="circle"
:percentage="uploadPercent"
style="margin-top: 30px;"
/>
<div slot="tip" class="el-upload__tip">
请注意您只能上传.mp4 .flv .mov格式的视频文件
</div>
</el-upload>
注意，上述需要使用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其他的配置，也可以用类似的思路来增加。
,
