/*
因为上传请求的头是["multipart/form-data"],所以要封装一个上传接口请求
*/
上传接口请求:
function uploadApiAxios (method, url, params, success, failure) {
if (params) {
params = filterNull(params)
}
axios({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
// 允许请求的数据在传到服务器之前进行转 把Request PayLoad 转成 Form Data
transformRequest: [function (params) {
// return qs.stringify(params, {arrayFormat: 'brackets'});
return params
}],
// 自定义的要被发送的头信息
headers:{
'Content-Type':'multipart/form-data'
},
baseURL: root,
// 是否跨域请求
withCredentials: false
})
.then(function (res) {
if(res.data.errCode == 0){
if(success){
success(res.data)
}
}else{
if(failure){
failure(res.data)
}
}
})
.catch(function (err) {
})
}
// 返回在vue模板中的调用接口
export default {
// 上传图片
uploadPost: function (url, params, success, failure) {
return uploadApiAxios('POST', url, params, success, failure)
}
}
-------------------------------------------------------------------------
<el-form-item label="实图">
<div class="uploadLine">
<div>
<img src="../assets/add.png" alt="" class="uploadPicture" v-if="!ruleForm.picture">
<img :src="ruleForm.picture" alt="" v-else style="width:200px; height:200px;">
</div>
<input type="file" class="photoBtn" @change="uploadPhoto">
</div>
</el-form-item>
/**
* 上传图片
*/
uploadPhoto(e){
console.log(e)
var file = e.target.files[0]; // js获取文件对象
var formData = new FormData();
formData.append('file', file) // 添加字段与对应的值
if(file.size > 307200){
this.$message.error('上传图片不得超过200kb!');
return false;
}
// 接接口
this.$http.uploadFile(formData,(res)=>{
this.ruleForm.picture = res.data.image
this.$message.success(res);
},(errRes)=>{
this.$message.error(errRes);
})
},