上传视频用的el-upload,
前后端分离的项目,应该用:
http-request=“触发的方法名”
:show-file-list=“false”
接口不需要单独封装,直接使用
request.js文件
const requests = axios.create({
baseURL: '你的ip',
timeout: 6000 // 请求超时时间
})
//请求拦截器
requests.interceptors.request.use(config => {
// 需要授权的 API ,必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
const token = window.localStorage.getItem('X-Access-Token')
if (token) {
config.headers['X-Access-Token'] = token
}
// 在最后,必须 return config;
return config
},
error => {
// 这里处理一些请求出错的情况
Promise.reject(error)
})
。。。。
这里是测试环境,所以token是保存的localStorage
config.js文件
export function postAction(url, parameter) {
return axios({
url: url,
method: 'post',
data: parameter
})
}
api.js文件
// 上传文件
const uploadFile = (parameter) => postAction('接口地址', parameter);//上传文件
如上所述,接下来下面看看上传的方法
一般后端会有一个上传文件的接口提供给你
handleAvatarSuccess(params) {//方法名调用,params是文件的信息
let formData = new FormData();//创建一个formData实例
formData.append("file", params.file);//将文件信息加进去
uploadFile(formData)//上传的接口
.then((res) => {
console.log(res);//成功的回调
})
.catch((err) => {
console.log(err);//失败的回调
});
},
上面用formData一定要写第2,3行
因为已经传过了,所以显示文件存在,接口是通的,完成