1、效果图
2、自定义上传
<a-upload
v-model:file-list="fileList"
name="导入员工"
action=""
:customRequest="upDown"
:beforeUpload="beforeUpload"
:onChange="handleChange"
@remove="removeFile"
accept=".xlsx,.xls"
><a-button class="btn btn_width" type="primary"> 上传Excel </a-button>
</a-upload>
import {queryAutograph,uploadOss,} from '@/api/import';
// 存储文件const fileList = ref<any[]>([]);// 导入文件const upDown = async (file) => {const random = Math.random();const fileName = `${random}${file.file.name}`;//获取oss签名queryAutograph({}).then(async (res) => {
//根据后端上传接口按需解构(这里是oss上传)const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;const address = dir + fileName;const url = host;const formData = new FormData();formData.append('key', address);formData.append('OSSAccessKeyId', OSSAccessKeyId);formData.append('Signature', Signature);formData.append('policy', policy);formData.append('success_action_status', success_action_status);formData.append('file', file.file);//这里必须放在最后,上面的顺序不限制// 上传OSStry {await uploadOss({ url, formData });} catch (e) {message.error('上传失败');return;}//拼接文件地址,用来传递给后端接口downloadUrl.value = host + '/' + address;let list: any = [];list.push({ name: file.file.name, url: downloadUrl });// fileList.value = list.flatMap((item) => item.url);fileList.value = list;});};// 删除文件const removeFile = (file) => {const index = fileList.value.indexOf(file.file);const newFileList = fileList.value.slice();newFileList.splice(index, 1);fileList.value = newFileList;console.log('删除成功:', fileList.value);};
// 文件上传测试import { message } from 'ant-design-vue';// 检查文件类型,如果文件类型正确,则继续上传,false指停止上传,true指继续上传,file是文件const beforeUpload = (file) => {// // 检查文件类型是否为Excelconst isExcel =file.type === 'application/vnd.ms-excel' ||file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';if (!isExcel) {message.error('只能上传Excel文件!');return false;}return true;};
import { request } from '@/utils/request';
const VUE_APP_OSS_API = process.env.VUE_APP_OSS_API;
const VUE_APP_VOICE_API = process.env.VUE_APP_VOICE_API;// OSS上传签名
export function queryAutograph(params) {return request({url: `${VUE_APP_VOICE_API}/oss/getSign`,method: 'get',params,});
}
// 上传OSS 请求
export const uploadOss = ({ url, formData }) => {const pro = process.env.NODE_ENV === 'development' ? VUE_APP_OSS_API : url;return request({url: pro,method: 'post',data: formData,headers: { 'Content-Type': 'multipart/form-data' },});
};
3、思路:做文件上传时,一般使用自定义上传行为,用来覆盖默认行为,首先创建new FormData();及相关上传参数,并调用oss签名接口,拿到返回的host值之后拼接文件地址便于后面调用添加接口上送。(注意:这里使用的阿里云oss上传时,若遇到404情况,可考虑不使用代理,直接直传)
4、若不使用阿里云oss做文件上传时,可不需获取签名,创建完new FormData();及相关参数之后,直接调用后端上传接口即可。
// 存储文件const fileList = ref<any[]>([]);// 导入文件const upDown = async (file) => {fileList.value = [];fileList.value.push(file.file);const formData = new FormData();formData.append('file', fileList.value[0]);await importData(formData).then((res) => {message.info('文件上传成功');// downloadUrl.value = `${platformApi}/dataCockpit/out/common/get-sheet-from-excel`;console.log('导入成功:', res);console.log('文件列表:', fileList.value);}).catch((err) => {message.error(err);});
}