12日
...
12日
Axios PUT文件上传
iView的上传不仅仅限于PUT方法,可能还有其他方法。使用Axios进行上传时,可以通过PUT方法实现。如果不想通过后端服务器进行中转上传,而是希望直接通过前端调用Axios接口上传,则需要自己实现一个上传功能函数。在使用Axios的PUT方法上传时,需要创建一个FormData对象,并将文件对象放入其中。上传过程中需要传入FormData、headers以及一个用于跟踪上传进度的回调函数。这个回调函数由Axios提供,可以实时获取上传进度和速度
前端
<Modal
v-model="uploadModal"
title="上传到本地文件服务器">
<div @dragover.prevent @drop="handleDrop" style="padding: 20px; text-align: center;">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>将文件拖拽到这里上传</p>
</div>
<Scroll v-if="fileUploadInfoList.length > 0">
<div
v-for="(fileUploadInfo, index) in fileUploadInfoList"
:key="index">
<Row>
<Col span="7" >
<span class="file-name" :title="fileUploadInfo.name">{{ truncatedFileName(fileUploadInfo.name) }}</span>
</Col>
<Col span="14" >
<Progress
:key="index"
:percent="fileUploadInfo.progress"
:stauts="fileUploadInfo.complete === 100">
</Progress>
</Col>
<Col span="3" >
<span>{{fileUploadInfo.speed}} MB/s</span>
</Col>
</Row>
</div>
</Scroll>
<div slot="footer" />
</Modal>
async handleDrop(event) {
event.preventDefault();
const items = event.dataTransfer.items;
for (let i = 0; i < items['length']; i++) {
const item = items[i].webkitGetAsEntry();
if (item.isDirectory) {
this.traverseDirectory(item);
} else if (item.isFile) {
let file = items[i].getAsFile();
this.uploadFile(file, `/${file.name}`);
}
}
},
async traverseDirectory(item) {
const directoryReader = item.createReader();
directoryReader.readEntries(entries => {
for (let i = 0; i < entries.length; i++) {
if (entries[i].isDirectory) {
this.traverseDirectory(entries[i]);
} else if (entries[i].isFile) {
entries[i].file(file => {
this.uploadFile(file, item.fullPath + `/${file.name}`);
});
}
}
});
},
async uploadFile(file, path) {
let oldTimestamp = new Date().valueOf();
let oldLoaded = 0;
const formData = new FormData();
formData.append('file', file);
let fullPath = `/${this.currentLocalStorage}` + this.currentPath + path;
const headers = {
'As-Task': true,
'File-Path': encodeURIComponent(fullPath)
};
const fileUploadInfo = {
name: file.name,
progress: 0,
speed: 0
};
this.fileUploadInfoList.push(fileUploadInfo);
const onUploadProgress = (progressEvent) => {
if (progressEvent.total) {
const complete =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
fileUploadInfo.progress = complete;
const timestamp = new Date().valueOf();
const duration = (timestamp - oldTimestamp) / 1000;
if (duration > 1) {
const loaded = progressEvent.loaded - oldLoaded;
const speed = loaded / duration / 1000 / 1000;
const remain = progressEvent.total - progressEvent.loaded;
const remainTime = remain / speed;
fileUploadInfo.speed = speed.toFixed(2);
fileUploadInfo.name = file.name;
console.log(remainTime);
oldTimestamp = timestamp;
oldLoaded = progressEvent.loaded;
}
if (complete === 100) {
this.upload.status = 'backending';
}
}
};
let response = await fileHttp.put('/api/fs/form', formData, { headers: headers, onUploadProgress: onUploadProgress });
if (response.data.code === 200) {
// this.$Notice.success({
// title: '上传成功'
// });
} else {
this.$Notice.error({
title: file.name + '上传失败'
});
}
},
后端
提示
如果自己写可以这样写,使用 alist
的话,直接走 alist
的接口就可以
@ApiOperation(value = "表单上传", notes = "")
@PostMapping(value = "formUpload")
public Result formUpload(@RequestHeader("Content-Length") long contentLength,
@RequestHeader("filePath") String filePath,
@RequestHeader("asTask") boolean asTask,
@RequestHeader("Content-Type") String contentType,
@RequestBody MultipartFile file) {
return fileOperationService.formUpload(contentType, contentLength, filePath, asTask, file);
}
@SneakyThrows
@Override
public Result formUpload(String contentType, long contentLength, String filePath, boolean asTask, MultipartFile file) {
if (StrUtil.isBlank(token)) {
token = BeanUtil.toBean(login().getData(), JSONObject.class).getStr("token");
}
MultipartBody.Part filePart = MultipartBody.Part.createFormData("file", file.getName(),
RequestBody.create(file.getBytes(), MediaType.parse(RequestContentTypeEnum.MULTIPART_FORM_DATA.getValue())));
return fileOperationApi.formUpload(token, contentLength, filePath, asTask, filePart).execute().body();
}
PWA调研
微博的 pwa
应用体验很好,可以深入研究一下
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0