跳至主要內容

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>

后端

提示

如果自己写可以这样写,使用 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);
}

PWA调研

微博的 pwa 应用体验很好,可以深入研究一下

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度