问题

之前项目中前端使用了vue-cli，引入了上传组件，所以在上传文件时很容易，没有考虑太多问题。

image-cropper组件中有url属性，直接使用:url="文件服务器地址"绑定上传的地址即可。

<el-form-item label="讲师头像"><!-- 头衔缩略图 --><pan-thumb :image="teacher.avatar"/><!-- 文件上传按钮 --><el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button><!--v-show：是否显示上传组件:key：类似于id，如果一个页面多个图片上传控件，可以做区分:url：后台上传的url地址@close：关闭上传组件@crop-upload-success：上传成功后的回调 <input type="file" name="file"/>--><image-cropperv-show="imagecropperShow":width="300":height="300":key="imagecropperKey":url="BASE_API+'/eduoss/fileoss'"field="file"@close="close"@crop-upload-success="cropSuccess"/>
</el-form-item>

解决

本次是用的是html基本页面，没有上传组件，那么文件需要自己获取。

<form autocomplete="off"><!--省略其他输入域……--><div class="form-group"><input class="form-control" type="file" name="fileupload" @change="upLoadPicture($event)"v-model="member.avatar" accept="image/*"><i class="icon_images"></i></div><!--省略其他输入域……--><div id="pass-info" class="clearfix"></div><a href="#0" class="btn_1 gradient full-width">立即注册!</a>
</form>

let vm = new Vue({el: "#app",data() {return {member: {mobile: "",password: "",nickname: "",avatar: "",code: "",}}},methods: {upLoadPicture(e) {//获取文件let file = e.target.files[0]//将文件放入表单文件let formData = new FormData();formData.append('file', file);//上传文件axios.post("http://localhost:8004/oss/fileoss", formData).then(response => {alert("头像上传成功！")//将返回的图片url赋值给membervm.member.avatar=response.data.data.url})}}})

@PostMapping
public R uploadOssFile(MultipartFile file){//获取文件//返回上传文件路径String url=ossService.uploadFileAvatar(file);return R.ok().data("url",url);
}

FormData对象的详解，https://www.jianshu.com/p/e984c3619019

主要两步：

使用@change和e.target.files[0]，获取我们添加的文件，
new FormData();并且 formData.append(‘file’, file); 需要将文件条件到FormData()表单对象中，否则后端的MultipartFile 类型获取不到file对象，就会报出java.lang.NullPointerException。

Vue上传文件遇到的问题相关推荐

Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
vue 上传文件和下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
Vue上传文件操作（没有CV,认真看）
项目场景: 通过vue上传文件基本操作问题描述: 使用html上传文件时,很容易理解,那么vue文件上传呢?我们学了vue不可能还往里面写原生html的内容吧! 先放代码再解释: <templ ...
vue上传文件到php,vue+axios+php如何实现上传文件功能？,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
vue 上传文件_前后端分离项目，如何优雅实现文件存储！
在上一节中我们讲到了使用MinIO来自建对象存储服务,这次我们来讲下MinIO如何结合SpringBoot和Vue来实现文件存储. 学前准备学习本文需要一些MinIO的基础知识,还不了解的小伙伴可以 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
SpringBoot+Vue上传文件
最近在研究SpringBoot+Vue的文件上传,踩了不少坑.现在将正确的文件上传流程分享一下. 一.前端采用ElementUI组件前端页面完整代码: <template><el- ...
vue 上传文件到华为云obs
有两种方式, 第一种是在前端直接上传文件到obs, 第二种是先把文件上传到后台, 然后后台再调用obs对应开发语言的SDK 1. 前端直接上传文件到obs,不经过后端 1.1 使用npm引入包 // ...

Vue上传文件遇到的问题

问题

解决

Vue上传文件遇到的问题相关推荐

最新文章

热门文章