[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fVDthjxEYejqEjeo2oXvT7Yvh4B6zRjO9SC3XJ4tVJuQ":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},129,"2024-10-14T12:24:50.032Z","前端上传文件那些事的记录（一）","记录一下常用的几个小代码片段，之前在nuxt的file上传那篇文章中记录过，今天又使用到了，就随手记录一下。\n\n## 一、背景\n服务端定义了一个`post`类型的上传接口，并且告知`key`是`file`，前端需要调用接口，并使用组件上传。前端目前使用的是element-plus框架中的el-uploader组件。\n\n\n## 二、前端展示\n### 2.1 上传组件\n```vue\n\u003Cel-upload\n      class=\"upload-demo\"\n      drag\n      ref=\"uploadRef\"\n      action=\"#\"\n      accept=\".xlsx,.csv\"\n      :auto-upload=\"false\"\n      :limit=\"1\"\n      :http-request=\"requestUpload\"\n      :on-success=\"successPicture\"\n      :on-error=\"errorPicture\"\n      :on-change=\"uploadChange\"\n      :on-exceed=\"handleExceed\"\n      multiple\n>\n    \u003Ci-ep-uploadFilled class=\"el-icon--upload\" />\n       \u003Cdiv class=\"el-upload__text\">\n            将文件拖到此处 \u003Cem>或点击上传\u003C/em>\n       \u003C/div>\n       \u003Ctemplate #tip>\n            \u003Cdiv class=\"el-upload__tip\">\n                 ⚠️支持“.xlsx和.csv文件”\n            \u003C/div>\n       \u003C/template>\n\u003C/el-upload>\n```\n这个组件中赋值了`http-request`，所以使用到的是自定义上传接口，并不是直接通过action上传。\n\n### 2.2 调用接口\n```setup中\n//自定义上传\nconst requestUpload = (option)=>{\n    const file = option.file;\n    awardPunishUploadApi(file)\n}\n```\n\n### 2.3 封装的接口中\n```ts\nexport function awardPunishUploadApi(file: File) {\n    return request({\n        url: '/admin/reward/upload',\n        method: 'post',\n        data: {\n            'file': file\n        },\n        headers: { \n            'Content-Type': 'multipart/form-data',\n        },\n    });\n}\n```\n(request中封装了axios，详细代码不再贴上，大家应该都会写的）\n\n其实这样就能调用成功。\n![web upload file](https://image.xinwei.ltd/image1728908538200.png)\n\n文章到此为止了，简短吧。\n\n","记录一下常用的几个小代码片段，之前在nuxt的file上传那篇文章中记录过，今天又使用到了，就随手记录一下。","https://image.xinwei.ltd/image1728908538200.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",275,0,"web file upload,formdata,file post,vue"]