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>



相关文章
|
18天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
11天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
13天前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
13 0
|
18天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
16 0
|
2月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
2月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
27 0
|
2月前
|
JavaScript 前端开发 API
js和jquery的区别
js和jquery的区别
26 8
|
2月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
2月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
2月前
|
JavaScript 前端开发 API
JavaScript和jQuery的区别
JavaScript和jQuery的区别