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="file"

                    accept="image/*"
                    @change="getFile($event)"
                    multiple="multiple"
            />
            div>
            <img  alt=""   :src="imageUrl"   ref="fileBtn"  id="uploadFile" width="100" height="100">

        div>

---

完