header设置Content-Type:'multipart/form-data'
const axios = require('axios')
const service = axios.create({
baseURL: 'https://xxx/attachment/',
timeout: 5000
})
service.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'multipart/form-data'
config.headers['Accept'] = '*/*'
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
console.log(response, `:::response`)
},
error => {
console.log(error, `:::error`)
return Promise.reject(error)
}
)
Vue:
<van-uploader v-model="fileList" multiple :after-read="afterRead" />
export default {
name:'index-page',
data(){
fileList:[],
},
methods: {
afterRead(file,info){
ile.status = 'uploading'
file.message = '上传中...'
const source = 'event' // 项目自己定义的
const type = 'handle' // 项目自己定义的
const data = new FormData() 1// 文件流
data.append('filedata', file.file)
const params = {
source,
type
}
request({
url: 'fileUtil/uploadFile',
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'post',
data,
params
})
.then(res => {
console.log(res, 'res 后端返回的数据,一般包含附件的id、fileName、url之类信息')
file.status = 'done'
file.message = '上传完成'
})
.catch(err => {
console.log(err, `:::err`)
file.status = 'failed'
file.message = '上传失败'
})
}
}
}
注意:Chrome控制台,请求成功后的参数格式:
传参注意data跟params分开传,浏览器Playload下,Query String Parameters对应params的参数;Form Data对应new FormData()处理过的data(filedata)。