首先先封装axios请求
import axios from "axios";
import { Message } from "element-ui";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
//请求拦截
axios.interceptors.request.use(
(config) => {
if (sessionStorage.getItem("tokenStr")) {
config.headers["Authorization"] = sessionStorage.getItem("tokenStr");
}
return config;
},
(error) => {
console.log(error);
}
);
//响应拦截器
axios.interceptors.response.use(
(success) => {
//业务逻辑错误
if (success.status && success.status == 200) {
if (success.data.code == 401 || success.data.code == 403) {
Message.error({ message: success.data.msg });
return;
}
if (success.data.msg) {
Message.success({ message: success.data.msg });
}
}
return success.data;
},
(error) => {
if (error.response.code == 504 || error.response.code == 404) {
Message.error({ message: "服务器被吃了o(╯□╰)o" });
} else if (error.response.code == 403) {
Message.error({ message: "权限不足,请联系管理员!" });
} else if (error.response.code == 401) {
Message.error({ message: "尚未登录,请登录" });
router.replace("/");
} else {
if (error.response.data.status == 500) {
Message.error({ message: "该数据有关联数据,操作失败" });
} else if (error.response.data.message) {
Message.error({ message: error.response.data.message });
} else {
Message.error({ message: "未知错误!" });
}
}
return;
}
);
let base = "api3";
//传送json格式的post请求
export const postRequest = (url, params) => {
return axios({
method: "post",
url: `${base}${url}`,
// params: params,
data: params,
});
};
export const putRequest = (url, params) => {
return axios({
method: "put",
url: `${base}${url}`,
data: params,
});
};
export const getRequest = (url, params) => {
return axios({
method: "get",
url: `${base}${url}`,
data: params,
});
};
export const deleteRequest = (url, params) => {
return axios({
method: "delete",
url: `${base}${url}`,
params: params,
data: params,
});
};
export const fileRequest = (url, data) => {
return axios({
method: "post",
url: `${base}${url}`,
data: data,
});
};
我这个基本把所有请求都封装了,文件传输的是之后那个
export const fileRequest = (url, data) => {
return axios({
method: "post",
url: `${base}${url}`,
data: data,
});
};
然后在mian.js全局引入下就可以,跨域问题记得配置下代理。
main.js这样引入
演示代码以上传头像为例
<template>
<el-upload
class="avatar-uploader"
action="fuck"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
name: "ParmsPage",
data() {
return {
imageUrl: "",
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
return false;
}
let uploadfile = new FormData();
uploadfile.append("file", file);
this.fileRequest("/demo/upload", uploadfile).then((response) => {
if (response) {
this.imageUrl = response.dialogImageUrl;
console.log(this.imageUrl);
}
});
return false;
},
},
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
注意:
这个action已经没有用了但是不能删除,删了就会报错哈哈哈。
在这个函数里自己封装请求就可以,采用formdata的方式进行传递,name属性还是需要和后端一致,return false就是使action失效,但是不能删除它