网站建设大量定制阶段,长沙市有限公司,火车头发布wordpress带磁力链,wordpress-4.5.2-zh_cn 安装要求一、问题描述 在前端使用element-ui进行文件上传时#xff0c;需要携带请求头信息#xff0c;比如Token。 二、问题解决
1. 表单实现
action置空添加:http-request属性覆盖默认的上传行为#xff0c;实现自定义上传文件。注意:src后的图片路径如果是个网络请求(外链)…一、问题描述 在前端使用element-ui进行文件上传时需要携带请求头信息比如Token。 二、问题解决
1. 表单实现
action置空添加:http-request属性覆盖默认的上传行为实现自定义上传文件。注意:src后的图片路径如果是个网络请求(外链)那么在前面拼接//即可否则会出现localhost:8080/外链的奇葩问题。
el-uploadclassavatar-uploadernameimgaction:show-file-listfalse:on-successhandleAvatarSuccess:before-uploadbeforeAvatarUpload:http-requesthandleUploadAvatarimg v-ifuserInfoObj.avatar :srcuserInfoObj.avatar?//userInfoObj.avatar:static/img/tou.jpg :onerror$store.state.errorImg classavatari v-else classel-icon-plus avatar-uploader-icon/idiv slottip classel-upload__tip点击上传头像只能上传jpg/png文件且不超过1mb/div
/el-upload2. js代码
创建handleUploadAvatar()函数传入参数param其中的param就是表单的文件对象。创建FormData对象封装请求体作为请求数据将文件对象里面的文件以及需要携带的请求数据封装(比如需要携带id信息等)进请求体。创建url即请求地址。创建config对象配置请求头信息注意文件上传时Content-Type必须为multipart/form-data。使用axios发起post请求。注意此时element-ui组件上的:on-successhandleAvatarSuccess会不生效因为禁用了action这个默认实现方式要想在上传文件成功后调用on-success 声明的函数只需要手动调用一下即可。
script
import store from ../store
import axios from axios
import {getToken} from ../utils/auth.jsexport default {name: UserInfo,data() { //选项 / 数据return {uploadURL:,userInfo:{},userInfoObj:,}},methods: {beforeAvatarUpload(file) {// 上传头像成功前校验const isJPG file.type image/png||file.typeimage/jpg||file.typeimage/jpeg;const isLt2M file.size / 1024 / 1024 1;if (!isJPG) {this.$message.error(上传头像图片只能是 JPG/JPEG/PNG 格式!);}if (!isLt2M) {this.$message.error(上传头像图片大小不能超过 1MB!);}return isJPG isLt2M;},handleUploadAvatar(param) {let fileObj param.file // 相当于input里取得的fileslet fd new FormData()// FormData 对象fd.append(img, fileObj)// 文件对象let url this.uploadURLlet config {headers: {Content-Type: multipart/form-data,Token: getToken()}}axios.post(url, fd, config).then(res {if(res.status 200){// 将服务端返回的数据传递给文件上传成功的函数param.onSuccess(res.data)}})},handleAvatarSuccess(res, file) {// 上传头像成功后赋值if(res.code 200){this.userInfoObj.avatar res.data;}else{this.$message.error(上传图片失败);}}},created() {this.uploadURL store.state.baseURL upload}}
/script
