<a-icon type="plus-square" @click="uploadMaterial()" />
<input type="file" style="display:none" ref="file" @click="e => {e.target.value = '';} " @change="getFileData"
/>
触发方法
@click="e => {e.target.value = ‘’;} " 设置这个方法是为了防止上传两次相同的文件,会触发不了
uploadMaterial() {
this.$refs.file.dispatchEvent(new MouseEvent("click"));
},
// 触发上传材料文件
getFileData() {
const inputFile = this.$refs.file.files[0];
let filename = inputFile.name;
// 此处应向后台请求 后台保存上传文件名称返回fileId作为文件标识
let param = {
fileId: data.fileId,
file: inputFile
};
this.uploadFile(param);
},
// 最后上传
uploadFile(param) {
let formData = new FormData();
formData.set("fileName", param.fileId);
formData.set("file", param.file);
upload({
formData
}).then(() => {
this.$message.success("上传成功");
});
},
export function upload(param) {
return request({
url: "xxxxxx",
method: "post",
data: param,
headers: { "Content-Type": "multipart/form-data" },
transformRequest: function(data) {
const formData = new FormData();
let i = data.formData.entries();
let j = i.next();
while (!j.done) {
formData.set(j.value[0], j.value[1]);
j = i.next();
}
return formData;
}
});
}
import axios from "axios";
/**
* 封装axios异步请求的方法==================
*/
//创建一个axios对象-----------
const request = axios.create({
//baseURL:'/dev-api',//基础路径
baseURL: process.env.VUE_APP_BASE_API, //根据不同的环境,加载不同的常量值
// baseURL: '/',
timeout: 50000 //请求超时,50000毫秒
});
//设置请求拦截器====================================
//对拦截进行请求--------------------
request.interceptors.request.use(
config => {
//请求拦截
config.data = {
...config.data
};
return config;
},
error => {
//出现异常
return Promise.reject(error); //es6写法
}
);
//设置响应拦截器==================================
//对拦截进行响应--------------------
request.interceptors.response.use(
response => {
if (!response.data || response.data == "") {
return '{"flag":"failure","msg":"未知错误"}';
}
return response.data;
},
error => {
return Promise.reject(error);
}
);
export default request; //导出自定义创建的axios对象,供其他组件进行使用
``