VUE element-ui 文件上传组件上传编码格式问题解决方法 multipart
项目需要element-ui上传文件,但是直接用upload的时候一直报错,没有设置编码格式,编码格式件就不是multipart/form-data*网上找了很多方法都用不起, 头痛!直接设置好像也不行—>也有可能是自己太菜了.但是现在我终于找到了一个方法安装axiosnpm install axiosnpm install --save axios vue-axios...
·
项目需要element-ui上传文件,但是直接用upload的时候一直报错,没有设置编码格式,编码格式件就不是 multipart/form-data* 网上找了很多方法都用不起, 头痛!
直接设置好像也不行—>也有可能是自己太菜了.
但是现在
我终于找到了一个方法
安装axios
npm install axios
npm install --save axios vue-axios
import 'axios';
import 'vue-axios';
之后在页面上这样
<el-upload
style="display:inline-block"
:limit="5"
class="upload-demo"
ref="upload"
action="http://localhost:8080/upload"
:file-list="fileList"
:http-request="uploadSectionFile"
:auto-upload="true"
:before-remove="handleRemove"
>
<el-button slot="trigger" size="small" type="primary" plain>
选取文件
</el-button>
<el-button
style="margin-left: 10px;"
size="small"
icon="el-icon-upload2"
type="success"
@click="submitUpload"
>
导入
</el-button>
</el-upload>
import axios from 'axios';
export default {
data() {
return {
fileList: []
};
},
methods: {
uploadSectionFile(param) {
var fileObj = param.file;
// FormData 对象
var form = new FormData();
// 文件对象
alert('进来了');
form.append('file', fileObj);
axios({
method: 'post',
url: 'http://localhost:8080/upload',
headers: {
'Content-Type': 'multipart/form-data'
},
data: form
}).then(res => {
alert(res);
});
}
},
//删除时
handleRemove(file, fileList) {
var data = {
attacMentCode: this.attachMentCode
};
deleteAttachment(data).then(res => {
alert(res);
});
}
};
</script>
就能够完美解决了
更多推荐
已为社区贡献2条内容
所有评论(0)