在vue中用multipart/form-data方式上传文件
multipart/form-data方式上传文件这里用iview的框架写<Modalv-model="fileModel"title="导入文件" width="600" :mask-closable="false" ><Upload style="display: inline-block":before-upload="handleUpload"action="//json
·
multipart/form-data方式上传文件
这里用iview的框架写
<Modal
v-model="fileModel"
title="导入文件" width="600" :mask-closable="false" >
<Upload style="display: inline-block"
:before-upload="handleUpload"
action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">选择要导入的文件</Button>
</Upload>
<div v-if="file !== null">已导入的文件: {{ file.name }}</div>
<div slot="footer">
<Button @click="cancel">取消</Button>
<Button type="primary" @click="ok">导入</Button>
</div>
</Modal>
data中写:
uploadType:"aa",
file: null,
loadingStatus: false,
fileModel: false,
方法:
ok() {
if(this.file==null){
return this.$Message.error('请先选择要导入的文件!');
}else{
let fileFormData = new FormData();
fileFormData.append("file",this.file);
fileFormData.append("source",this.uploadType);
let token = window.localStorage.getItem("accessToken")
axios({
method: "POST",
url: "/xxx/xxx",
headers: {
"Content-Type": "multipart/form-data",
"accessToken":token //需要传token
},
data: fileFormData,
})
.then((res) => {
if(res.success){
this.$Message.success('成功!');
this.fileModel=false;
}
})
.catch((e) => {
this.$Message.error(e);
})
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)