zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片上传

Browse Source
This commit is contained in:
始于初见
2024-08-01 10:52:51 +08:00
parent 91bc3dca07
commit 8810926fd1
1 changed files with 148 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/modules/shop/curriculum.vue
View File

@@ -179,6 +179,10 @@
>
</el-upload>
<quill-editor
v-loading="uploadLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-model="dataForm.productDetails"
ref="myQuillEditor"
:options="editorOption"
@@ -203,7 +207,7 @@
<script>
import { quillEditor } from "vue-quill-editor";
import global from "../../common/common.vue"; //引入共用组间
import axios from "axios";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
@@ -238,6 +242,8 @@ const toolbarOptions = [
export default {
data() {
return {
quillEditorIndex: 0,
uploadLoading: false,
pointMemery: [], // 花生币操作记录
baseUrl: global.baseUrl,
goodsTypeList: [],
@@ -359,11 +365,16 @@ export default {
maxStack: 50,
userOnly: false
},
clipboard: {
matchers: [["img", this.handlePasteImg]]
},
toolbar: {
container: toolbarOptions,
handlers: {
image: function(value) {
console.log("value at line 365:", value);
if (value) {
this.uploadLoading = true;
// 调用element的图片上传组件
document.querySelector(".avatar-uploader input").click();
} else {
@@ -383,18 +394,148 @@ export default {
this.getTags();
},
methods: {
handlePasteImg(node, delta) {
this.uploadLoading = true;
var that = this;
let ops = [];
delta.ops.forEach(async (op, index) => {
if (op.insert && typeof op.insert !== "string") {
// 如果粘贴了图片，这里会是一个对象
if (op.insert.image) {
if (op.insert.image.includes(";base64")) {
let file = that.dataURLtoFile(
op.insert.image,
`paste-${Math.random()
.toString(36)
.slice(-8)}.jpg`
);
console.log("file at line 397:", file);
// key 值可以自己用当前日期生成
let key = `detail/${new Date().getTime()}${Math.random()
.toString(36)
.slice(-8)}.jpg`;
let formdata = new FormData();
formdata.append("file", file);
formdata.append("fileName", key);
formdata.append("key", key);
console.log("🚀 ~ handleRequest ~ formdata:", formdata);
axios
.post(this.baseUrl + "/oss/fileoss", formdata)
.then(res => {
console.log("🚀 ~ this.$axios.post ~ res111:", res);
if (res.data.code == 0) {
// 如果上传成功
if (res.data.url) {
// 获取光标所在位置
var quill = that.$refs.myQuillEditor.quill;
var length = this.quillEditorIndex;
console.log("length at line 397:", length);
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.data.url);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
} else {
// 提示信息，需引入Message
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
} else {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
})
.catch(err => {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
console.log(err);
});
// const [res, err] = await apiService.getUploadToken();
// if (err) return false;
// let origin = res.data.picture.origin;
// const fd = new FormData();
// fd.append("key", key);
// fd.append("token", res.data.picture.token);
// fd.append("origin", origin);
// fd.append("time", new Date().getTime());
// fd.append("file", file);
// apiService
// .uploadImage(fd)
// .then(res => {
// console.log(res, "res");
// let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象
// let length = quill.getSelection().index; // 获取编辑器光标位置
// quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片 图片地址
// quill.setSelection(length + 1); // 光标后移一位 调整光标到最后
// })
// .catch(err => {
// console.log(err);
// });
}
}
}
});
delta.ops = ops; // 不加会报错
return delta;
},
dataURLtoFile(dataurl, name) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], name, { type: mime });
},
// 提取富文本中image中的src
extractImageSrc(htmlString) {
let imgSrcArray = [];
let imgTagRegex = /<img[^>]+src=['"]([^'"]+)['"][^>]*>/g;
let match;
while ((match = imgTagRegex.exec(htmlString)) !== null) {
let src = match[1];
imgSrcArray.push(src);
}
return imgSrcArray;
},
// ocr识别
async handleImageOCR() {
if (!this.quillContent) {
this.$Message.error("请上传图片！");
return false;
}
let imageList = this.extractImageSrc(this.quillContent);
if (Array.isArray(imageList) && imageList.length) {
const [res, err] = await service.ocrResult(imageList);
if (err) return;
if (res.ok && res.data) {
this.ocrDescribe = res.data;
}
}
},
contentUploadSuccess(res, file) {
// console.log(res)
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
let length = this.quillEditorIndex;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
} else {
this.uploadLoading = false;
// 提示信息，需引入Message
this.$message.error("图片插入失败！");
}
@@ -443,7 +584,6 @@ export default {
}
})
.then(res => {
console.log("result at line 452:", res);
if (res && res.data.code === 0) {
@@ -551,7 +691,7 @@ export default {
data: {
...this.dataForm,
product_details: this.dataForm.productDetails,
activityPrice: this.dataForm.hDprice,
activityPrice: this.dataForm.hDprice
},
header: {
//默认 无 说明：请求头
@@ -696,10 +836,14 @@ export default {
},
// 失去焦点事件
onEditorBlur(quill) {
// console.log(".index at line 841:", quill.getSelection().index);
// console.log('editor blur!', quill)
},
// 获得焦点事件
onEditorFocus(quill) {
var index = quill.getSelection().index;
this.quillEditorIndex = index;
console.log("quill at line 839:", this.quillEditorIndex);
//console.log('editor focus!', quill)
},
// 准备富文本编辑器