Article Directory
js key code
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 key code
<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>
Finish