export const uploadVideo = (data,onUploadProgress) => {
return http({
url: "/upload",
method: "post",
data: data,
onUploadProgress: function (progressEvent) {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
onUploadProgress(percentCompleted)
},
headers:{'Content-Type': 'multipart/form-data'}
});
};
使用
<el-upload
class="upload-demo"
action="#"
ref="upload"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:limit="1"
:file-list="fileList"
:http-request="handleFileUpload"
>
<el-button type="primary" :disabled="form.url !==''">上传</el-button>
</el-upload>
<el-progress v-if="progressBar > 0" :percentage="progressBar" />
const progressBar = ref(0); // 进度条值
const handleFileUpload = (param) => {
const formData = new FormData() //FormData对象,添加参数只能通过append('key', value的形式添加
formData.append('file', param.file) //添加文件对象
uploadVideo(
formData,
(percent) => {
// 进度回调(更新进度条)
console.log(`当前进度:${percent}%`);
progressBar.value = percent; // 假设有进度条元素
}
)
.then(response => {
// 上传成功处理
form.url = response
ruleFormRef.value.clearValidate('url')
})
.catch(error => {
// 错误处理
console.error('上传失败', error);
});
}
效果如下: