一、axios如何上传FormData
要点:
1、把用户上传的文件变成文件流(file)
2、axios 请求头中Content-Type 变为 multipart/form-data
向 FormData
对象中添加新的属性值,把后台要的参数全部传入
function upLoads(config) {
let formData = new FormData();
formData.append('courseFile', state.value.file);
formData.append('status',1); // 后台要的状态
UploadExcel(formData)
.then(res => {
if (res.data.code === 200) {
message.success(err.data.msg);
}
})
.catch(err => {
message.error(err.data.msg);
});
}
上传完成后与普通post请求的区别
二、ant自定义上传文件customRequest
customRequest里面有一个data参数,data包含了对file文件上传状态的操作
dom代码
<a-upload-dragger
v-model:fileList="fileList"
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:max-count="1"
accept=".xlsx, .xls"
:custom-request="handleChange"
:progress="progress"
@drop="handleDrop"
>
<div class="upload-icon">
<img src="../../assets/images/icon_upload_plus.png" />
</div>
<p class="ant-upload-text">点击或拖拽文件到此处上传</p>
<p class="ant-upload-hint"> 最多可上传1个文件,文件大小不能超过3M</p>
</a-upload-dragger>
function handleChange(data) {
let fileName = data.file.name;
state.value.file = data.file;
//
const isXlsx =
data.file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
data.file.type === 'application/vnd.ms-excel';
const isLt3M = data.file.size / 1024 / 1024 > 3;
if (!isXlsx) {
message.error('请上传表格文件');
fileLists.value = [];
return;
} else if (isLt3M) {
message.error('文件大小超出上传限制');
fileLists.value = [];
return;
} else {
console.log('成功');
fileLists.value = [data.file];
console.log(333, fileLists.value);
let config = {
timeout: 12000,
onUploadProgress: Progress => {
let percents = Math.round(Progress.loaded / Progress.total) * 100;
state.value.percents = percents;
// 更新进度条
// onProgress({ percent: percents }, data);
// onSuccess({ percent: percents }, data);
}
};
upLoads(config);
}
}
上传的时候通过loaded和total计算出进度,自定义上传的onProgress同步进度到ant组件 看打印:
上传文件部分:
// 上传
function upLoads(config) {
console.log(32323, state.value.file, config);
let formData = new FormData();
formData.append('courseFile', state.value.file);
formData.append('status',1);
UploadExcel(formData, config)
.then(res => {
if (res.data.code === 200) {
message.success(err.data.msg);
} else {
message.error(err.data.msg);
state.value.strokeColor = '#82BC3F'; // 进度条颜色
state.value.dataSource = res.data.data; // 数据
}
})
.catch(err => {
console.log(err);
state.value.percents = 90; // 上传失败手动写的进度为90%
state.value.strokeColor = '#FF5252'; // 进度条颜色
message.error(err.data.msg);
});
}
axios上传文件请求封装
最终效果图
三、华为云上传图片
- 下载对应的sdk npm install esdk-obs-browserjs --save-dev
- 创建公共文件(utils/uploads.js)和定义方法类,如下
3.使用 如下
效果如下