功能:Vue附件上传:请求参数为二进制文件流数组:[file, file]
能想得到的,就能实现的了~~
·
一、 多个二进制流附件以数组格式上传公共方法
// httpRequest.js
import Vue from 'vue'
import axios from 'axios'
/**
* 多个二进制流附件以数组格式上传
* @param {*} url 请求接口路径
* @param {*} params 请求参数
* @returns 接口响应
*/
var uploadFileList = function (url, params) {
let config = {
// 添加请求头
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': Vue.cookie.get('Authorization_vs') // 请求头带上token
}
}
// 一般参数可以正常序列化并传递,传文件的文件流是无法被序列化并传递的;
// 使用formData对象序列化要传递的参数,就可以进行文件上传了。
let param = new FormData()
// 通过append向form对象添加数据
Object.keys(params).forEach(key => {
const val = params[key]
// 附件是以二进制流数组格式传进来,拆分成一个个相同key的项,放在载荷里面给后端上传;
// 但后端实际上收到的还是一个数组,只不过前端载荷是若干个相同key的参数。
if (Array.prototype.isPrototypeOf(val)) {
val && val.map(file => {
param.append(key, file)
})
} else { // 其他参数正常key上传
param.append(key, val)
}
})
return axios.post(url, param, config) // post请求(可以改成get请求)
}
export { uploadFileList } // 抛出去这个方法,供其他特殊页面使用
二、单页面使用公共方法
// xxx.vue
// 引入附件上传方法
import { uploadFileList } from '@/utils/httpRequest.js'
// 请求参数
const params = {
id: 433,
refundPrice: 1.02,
refundReason: 参数1,
file: [file1, file2]
}
// 参数+附件上传+成功/失败提示
uploadFileList(
this.$http.adornUrl('url/url/url'),
params
).then(({ data }) => { // 接口调用成功 - 走then - 响应数据
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {}
})
}).catch(err => { // 接口调用失败 - 走catch - 错误信息
// 打印见下图
console.log('err', err)
console.log('response', response)
// 错误处理方式 - 这边只是做了一个提示,根据需要进行相关改动
var message = '操作失败'
const response = err.response
if (response.status == 400) {
message = response.data // 错误码为400,提示后端返回的错误信息
} else if (response.status == 500) {
message = '服务器异常' // 错误码为500,提示服务器异常
}
this.$message({
message: message,
type: 'error',
duration: 1500,
onClose: () => {}
})
})
请求报错提示err、err.response
三、效果展示+载荷说明
1、示例页面展示:
2、前端请求载荷:
按理说请求参数对象是不应该有两个相同key值存在的,file是以二进制文件流数组格式上传的,在这里展示的是两个相同的key值,但实际上是数组的格式传输数据的。
2、数据传输是以包的形式传递的:
前端看起来像是两个重复的key进行传参的,但后端接收到的就是一个file数组,具体形式如下:
能想得到的,就能实现的了~~
更多推荐
已为社区贡献3条内容
所有评论(0)