Vue上传文件遇到的问题[通俗易懂]

Vue上传文件遇到的问题[通俗易懂]问题之前项目中前端使用了vue-cli,引入了上传组件,所以在上传文件时很容易,没有考虑太多问题。image-cropper组件中有url属性,直接使用:url=”文件服务器地址”绑定上传的地址即可。<el-form-itemlabel=”讲师头像”><!–头衔缩略图–><pan-thumb:image=”teacher.avatar”/><!–文件上传按钮–><el-buttontype=

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

问题

之前项目中前端使用了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-cropper v-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赋值给member
                        vm.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。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184073.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • goland2021激活码3月最新在线激活

    goland2021激活码3月最新在线激活,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • spring4.1 请求rest接口406问题解决(转换JSON)[通俗易懂]

    前文说明,本来项目使用的是springmvc的模式,然后接口都是使用的是@Controller+@ResponseBody配置json转换的代码是

  • pycharm选中一行代码快捷键_pycharm设置快捷键

    pycharm选中一行代码快捷键_pycharm设置快捷键在写代码的时候,经常为了对齐代码而烦恼,强大的pycharm为我们提供了一个代码自动对齐功能,而且可以使用快捷键完成。快捷键组合是:Ctrl+Alt+L将光标置于需要调整的代码行,或者选择一个区域,按下快捷键,代码就可以自动对齐啦!…

  • 775针最好的cpu有哪些_1156针cpu是几代

    775针最好的cpu有哪些_1156针cpu是几代针脚也就是cpu的接口,是cpu和主板的连接件,不同的针脚代表不同cpu的类型,现在775针cpu已经成为Intel桌面CPU的标准接口。今天就为大家简单介绍775针cpu以及它们同系列性能排行最好的一款吧。一、775针的cpu的有哪些?主要有奔腾4、赛扬D,奔腾D8、D9系列,奔腾E2、奔腾E5、E6,酷睿E4、E6、E7、E8,酷睿Q6、Q8、Q9。奔腾4采用LGA775接口的有5和6系列,经…

  • Dijkstra算法时间复杂度分析[通俗易懂]

    Dijkstra算法时间复杂度分析[通俗易懂]文章目录Dijkstra算法的思路与关键点Dijkstra算法的时间复杂度之前一直默认Dijkstra算法时间复杂度为o(n2)o(n^{2})o(n2),没有思考过具体的时间复杂度,今天把这个弄清楚。Dijkstra算法的思路与关键点思路:广度优先+松弛所有点分为两个集合SSS和TTT,SSS最开始只包括源点sss,剩余点都位于TTT。SSS集合表示已经计算出最短路径的点集合,TTT表示尚未计算出最短路径的点集合。每次从集合TTT中选出一个与集合SSS距离最短的点vvv,将点vvv加

  • vue数组拼接[通俗易懂]

    vue数组拼接[通俗易懂]例如目前有一组需求,后端传过来的数组里面包含经度,纬度两个属性。我们在前端展示的时候需要把他们放在一个表单直接上图

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号