【vue】el-upload 上传文件
<div class="upload">
<form id="upload" enctype="multipart/form-data" method="post">
<el-upload
ref="upload"
action=""
:on-change="handleChange"
:before-upload="beforeAvatarUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传到服务器</el-button> -->
<div slot="tip" class="el-upload__tip">只能上传 JSON 文件</div>
</el-upload>
</form>
</div>
<script>
import * as adminsAPI from '@/api/admins'
export default {
methods: {
download () {
handleChange (file) {
// this.$refs.upload.submit()
adminsAPI.postUploadFile(Qs.stringify(file))
},
beforeAvatarUpload (file) {
let type = file.name.split('.')
if (type[1] === 'json') {
return file
} else {
this.$message.error('上传文件只能是 JSON 格式!')
return false
}
},
}
</script>
admins.js
/**
* [postUploadFile 上传文件]
* @param {[File]} config [文件流]
* @return {[type]} [description]
*/
export async function postUploadFile (config) {
try {
// console.log(config)
const headerConfig = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
const response = await fetch.post('/admins/import', { config }, headerConfig)
if (response.data) {
Message({ type: 'info', message: '上传配置文件成功' })
}
let authToken = response.headers['authorization'].split(' ')
store.dispatch('refreshToken', authToken[1])
return response.data
} catch (err) {
console.log('message', err)
if (err.response) {
throw Error(err.response.data.message)
}
throw err
}
}
上传文件失败,请问哪里出错了
而且我并不想让它走action,怎么阻止
9 回复
前排水果瓜子
转换不了 fromData, 绝望中
只有走action的时候,才会自动转换,但是token问题就很蛋疼了,因为这个项目的所有请求都有验证token是否过期
@parrot-bot 老铁,有木有办法
@vxhly 人家就是路过,哪里会有什么办法。
试试这个呢
@Pipe-shen 老铁,我要的是能够转化 formData 的最优做法
最恶心的是转换出来是空的
this.$refs.upload.submit() 这里面怎么加 headers 头