前端上传文件那些事的记录（一）

原创文章
声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。
全栈老韩
全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

记录一下常用的几个小代码片段，之前在nuxt的file上传那篇文章中记录过，今天又使用到了，就随手记录一下。

一、背景

服务端定义了一个post类型的上传接口，并且告知key是file，前端需要调用接口，并使用组件上传。前端目前使用的是element-plus框架中的el-uploader组件。

二、前端展示

2.1 上传组件

vue 复制代码 
<el-upload
      class="upload-demo"
      drag
      ref="uploadRef"
      action="#"
      accept=".xlsx,.csv"
      :auto-upload="false"
      :limit="1"
      :http-request="requestUpload"
      :on-success="successPicture"
      :on-error="errorPicture"
      :on-change="uploadChange"
      :on-exceed="handleExceed"
      multiple
>
    <i-ep-uploadFilled class="el-icon--upload" />
       <div class="el-upload__text">
            将文件拖到此处 <em>或点击上传</em>
       </div>
       <template #tip>
            <div class="el-upload__tip">
                 ⚠️支持“.xlsx和.csv文件”
            </div>
       </template>
</el-upload>

这个组件中赋值了http-request，所以使用到的是自定义上传接口，并不是直接通过action上传。

2.2 调用接口

setup中 复制代码 
//自定义上传
const requestUpload = (option)=>{
    const file = option.file;
    awardPunishUploadApi(file)
}

2.3 封装的接口中

ts 复制代码 
export function awardPunishUploadApi(file: File) {
    return request({
        url: '/admin/reward/upload',
        method: 'post',
        data: {
            'file': file
        },
        headers: { 
            'Content-Type': 'multipart/form-data',
        },
    });
}

(request中封装了axios，详细代码不再贴上，大家应该都会写的）

其实这样就能调用成功。
web upload file

文章到此为止了，简短吧。

发布于2024-10-14 12:24:50
浏览量236·

暂无评论，快来发表第一条评论吧