vue.js+ jquery上传图片并回显

简介: vue.js+ jquery上传图片并回显

js关键代码


var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        recomBook: {},
        imageUrl: ""
    },
    methods: {
        // //上传文件
        getFile: function (e) {
            let file = e.target.files[0];
            var formData = new FormData();
            formData.append('file', file);
            e.preventDefault();
            // 创建文件读取对象
            var reader = new FileReader();
            var that = this;
            //  将文件读取为DataURL
            reader.readAsDataURL(file);
            // 读取成功调用方法
            reader.onload = ee => {
                console.log('读取成功');
                // e.target.result 获取 读取成功后的  文件DataURL
                 //上传图片回显
                that.imageUrl = ee.target.result;
                // 如果要将图片上传服务器,就在这里调用后台方法
                //jquery默认头是content-type:www-url...键值对
                $.ajax({//Illegal invocation
                    url: baseURL + "sys/oss/upload",
                    type: 'post',
                    data: formData,
                    //当传递formData的时候,就会默认将该对象转换成键值对字符串,这是不合理的
                    //jquery上传文件必须要以下两个属性
                    contentType: false,//不需要头
                    processData: false,//不转换数据
                    success: function (res) {
                        console.log('ok');
                        console.log(res);
                        vm.recomBook.bannerUrl = res.url;
                    }
                });
            }
        },
          getInfo: function (id) {
            $.get(baseURL + "sys/recombook/info/" + id, function (r) {
                vm.recomBook = r.recomBook;
                //加载页面回显
               if(r.recomBook.bannerUrl) vm.imageUrl = r.recomBook.bannerUrl;
            });
        },


html关键代码


<div class="form-group">
            <div class="col-sm-2 control-label">封面上传:</div>
            <div class="col-sm-7">
                <!-- <input type="text" class="form-control" v-model="recomBook.bannerUrl" placeholder="封面"/>-->
            <input
                    type="file"
                    accept="image/*"
                    @change="getFile($event)"
                    multiple="multiple"
            />
            </div>
            <img  alt=""   :src="imageUrl"   ref="fileBtn"  id="uploadFile" width="100" height="100">
        </div>



相关文章
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
43 1
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
43 3
|
25天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
15 0
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
1月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
1月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
59 0
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
3月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
23 1
下一篇
无影云桌面