上传:
watch: {
content(val) {
this.setBaseImg(val);
},
},
save(){
this.updataImg();
this.ruleForm.activityContent = this.content;//this.ruleForm.activityContent要传给后端的参数
}
//把路径转成key
updataImg() {
let content = this.content;
var self = this;
let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let arr = content.match(imgReg) // 筛选出所有的img
if (arr != null) {
for (let i = 0; i < arr.length; i++) {
let src = arr[i].match(srcReg)
// 获取图片地址判断是否是base64格式
if (src[1].indexOf('https://') != -1) {
var a = src[1].split('?')[0].split('https://oilpay-test.oss-cn-shanghai.aliyuncs.com/')[1];
self.content = self.content.replace(src[1], a);
}
}
}
},
回显:
created(){
this.$http.post("",data).then(res=>{//请求后端接口获取回显数据
this.content = res.data.activityContent;
this.list1 = [res.data];
this.listInit();
}
// list初始化
listInit(content) {
var self = this;
for (let j = 0; j < this.list1.length; j++) {
let contents = this.list1[j].activityContent;
let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let arr = contents.match(imgReg) // 筛选出所有的img
console.log(arr)
if (arr != null) {
for (let i = 0; i < arr.length; i++) {
let src = arr[i].match(srcReg)
// 获取图片地址判断是否是base64格式
var promise = new Promise(function(resolve, reject) {
if (src[1].indexOf('https://') == -1 && src[1].indexOf('base64') == -1) {
self.$http.post("api/oss/signKey", {
key: src[1]
}).then(res => {
if (res.code == "0") {
if (i == arr.length - 1) {
contents = contents.replace(src[1], res.data);
setTimeout(() => {
resolve(); //等所有图片加载完成,大图片有点慢
}, 200)
} else {
contents = contents.replace(src[1], res.data);
}
}
})
}
})
}
promise.then(() => {
contents = contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
this.list1[j].activityContent = contents;
this.content = this.list1[0].activityContent
this.ruleForm = this.list1[0];
})
} else {
this.list = this.list1;
}
}
},
//把key转成路径
setBaseImg(val) {
console.log('tiptiptip1')
let content = val;
var self = this;
let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let arr = content.match(imgReg) // 筛选出所有的img
let srcArr = []
console.log(arr)
if (arr != null) {
for (let i = 0; i < arr.length; i++) {
let src = arr[i].match(srcReg)
// 获取图片地址判断是否是base64格式
if (src[1].indexOf('base64') == -1) {
if (src[1].indexOf('https://') == -1) {
self.$http.post("api/oss/signKey", {
key: src[1]
}).then(res => {
self.loading = false
if (res.code == "0") {
console.log(res.data)
self.content = self.content.replace(src[1], res.data);
}
})
}
} else {
console.log('tiptiptip')
srcArr.push(src[1])
}
}
let formData = new FormData()
srcArr.forEach(item => {
// 将base64转换成文件流
var file = this.dataURLtoFile(item, new Date().getTime());
this.handleAvatarSuccess(file, item);
})
}
// console.log(content)
},
handleAvatarSuccess(file, item) {
var _self = this;
this.fileUrl = URL.createObjectURL(file);
this.$http.post("api/oss/getSign").then(res => {
if (res.code == 0) {
_self.aliyunOssToken = res.data;
this.uploadFile(file, item);
}
})
},