|
|
@@ -0,0 +1,489 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box">
|
|
|
+ <div class="intPage">
|
|
|
+ <div class="tit">H5页面说明上传后台</div>
|
|
|
+ <div>
|
|
|
+ <div>请输入H5页面id</div>
|
|
|
+ <el-input v-model="id" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>请输入使用说明</div>
|
|
|
+ <div
|
|
|
+ class="avatar-uploader"
|
|
|
+ @click.stop="addImg($event)"
|
|
|
+ style="cursor: pointer"
|
|
|
+ >
|
|
|
+ +
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/*"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload($event)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <quill-editor
|
|
|
+ v-model="inData.content"
|
|
|
+ ref="myQuillEditor"
|
|
|
+ class="editer"
|
|
|
+ :options="editorOption"
|
|
|
+ @change="onEditorChange($event)"
|
|
|
+ >
|
|
|
+ </quill-editor>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>请上传附件</div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="PDF"
|
|
|
+ multiple="multiple"
|
|
|
+ @change="beforeUpload1($event)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="uploadCon">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const toolbarOptions = [
|
|
|
+ ["bold", "italic", "underline", "strike"], // toggled buttons
|
|
|
+ [{ list: "ordered" }, { list: "bullet" }],
|
|
|
+ [{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
|
+ [{ color: [] }, { background: [] }], // dropdown with defaults from theme
|
|
|
+ ["link", "image"],
|
|
|
+ ["clean"],
|
|
|
+];
|
|
|
+import "quill/dist/quill.core.css";
|
|
|
+import { addOp, updateinst } from "@/api/user";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "instUpdata",
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["userid"]),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ inData: {
|
|
|
+ userid: this.userid,
|
|
|
+ content: "",
|
|
|
+ file: [],
|
|
|
+ },
|
|
|
+ progress: 0,
|
|
|
+ proVisible: false,
|
|
|
+ quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
|
|
|
+ content: null,
|
|
|
+ editorOption: {
|
|
|
+ placeholder: "",
|
|
|
+ theme: "snow", // or 'bubble'
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: toolbarOptions,
|
|
|
+ handlers: {
|
|
|
+ image: function (value) {
|
|
|
+ if (value) {
|
|
|
+ // 触发input框选择图片文件
|
|
|
+ document.querySelector(".avatar-uploader").click();
|
|
|
+ } else {
|
|
|
+ this.quill.format("image", false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ // token: sessionStorage.token
|
|
|
+ }, // 有的图片服务器要求请求头需要有token
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addImg(e) {
|
|
|
+ var el = e.currentTarget;
|
|
|
+ console.log(el);
|
|
|
+ el.getElementsByTagName("input")[0].click();
|
|
|
+ e.target.value = "";
|
|
|
+ },
|
|
|
+ uploadCon() {
|
|
|
+ if (!this.id) return this.$message.error("上传课程id");
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ idL: this.id,
|
|
|
+ con: JSON.stringify(this.inData),
|
|
|
+ };
|
|
|
+ console.log("params", params);
|
|
|
+
|
|
|
+ updateinst(params)
|
|
|
+ .then(async (response) => {
|
|
|
+ if (response) {
|
|
|
+ console.log("response", response);
|
|
|
+
|
|
|
+ await addOp({
|
|
|
+ uid: this.userid,
|
|
|
+ cid: "",
|
|
|
+ type: "user_op",
|
|
|
+ content: `修改了${this.id}课程说明`,
|
|
|
+ });
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "修改成功",
|
|
|
+ });
|
|
|
+ this.id = "";
|
|
|
+ this.inData = {
|
|
|
+ userid: this.userid,
|
|
|
+ content: "",
|
|
|
+ file: [],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("请求失败，错误信息：", error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeUpload(event) {
|
|
|
+ // const loading = this.openLoading();
|
|
|
+ // var file = "";
|
|
|
+
|
|
|
+ // for (let cfindex = 0; cfindex < event.target.files.length; cfindex++) {
|
|
|
+ console.log("event.target.files", event.target.files);
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var imgA = [
|
|
|
+ "png",
|
|
|
+ "jpg",
|
|
|
+ "jpeg",
|
|
|
+ "bmp",
|
|
|
+ "gif",
|
|
|
+ "webp",
|
|
|
+ "psd",
|
|
|
+ "svg",
|
|
|
+ "tiff",
|
|
|
+ ];
|
|
|
+ if (
|
|
|
+ imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) ==
|
|
|
+ -1
|
|
|
+ ) {
|
|
|
+ this.$message.error("图片格式错误");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // this.imgLoading = true;
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ // this.inputShow = false;
|
|
|
+ // this.progress = 0;
|
|
|
+ this.proVisible = true;
|
|
|
+ // this.isFinishSize = 0;
|
|
|
+ // this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
|
|
|
+ _this.$forceUpdate();
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function () {
|
|
|
+ //这里可以写进度条
|
|
|
+ // _this.progress = parseInt((evt.loaded / evt.total) * 100);
|
|
|
+ // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
|
|
|
+ _this.$forceUpdate();
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ // _this.imgLoading = false;
|
|
|
+ // loading.close();
|
|
|
+ // _this.progress = 100;
|
|
|
+ // _this.isFinishSize = _this.isAllSize;
|
|
|
+ _this.$forceUpdate();
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ _this.$forceUpdate();
|
|
|
+ }, 1000);
|
|
|
+ // _this.inputShow = true;
|
|
|
+
|
|
|
+ if (err) {
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ let quill = _this.$refs.myQuillEditor.quill;
|
|
|
+ // 如果上传成功
|
|
|
+ let length = quill.getSelection().index;
|
|
|
+ // 插入图片 res.url为服务器返回的图片地址
|
|
|
+ quill.insertEmbed(length, "image", data.Location);
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(length + 1);
|
|
|
+ // if (!res) {
|
|
|
+ // // 获取光标所在位置
|
|
|
+ // } else {
|
|
|
+ // this.$message.error("图片插入失败");
|
|
|
+ // }
|
|
|
+ // loading动画消失
|
|
|
+ this.quillUpdateImg = false;
|
|
|
+
|
|
|
+ // _this.recordData.recordImg.push(data.Location);
|
|
|
+ _this.$forceUpdate();
|
|
|
+
|
|
|
+ // console.log(_this.checkJson);
|
|
|
+ // console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // var file = event.target.files[0];
|
|
|
+ },
|
|
|
+ onEditorChange({ html }) {
|
|
|
+ //内容改变事件
|
|
|
+ // console.log("---内容改变事件---");
|
|
|
+ this.inData.content = html;
|
|
|
+ // console.log(html);
|
|
|
+ },
|
|
|
+ // async beforeUpload1(event) {
|
|
|
+ // var file = event.target.files;
|
|
|
+ // console.log('event.target.files',event.target.files);
|
|
|
+
|
|
|
+ // var credentials = {
|
|
|
+ // accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ // secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ // }; //秘钥形式的登录上传
|
|
|
+ // window.AWS.config.update(credentials);
|
|
|
+ // window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ // var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ // var _this = this;
|
|
|
+ // // _this.progress = 0;
|
|
|
+ // var photoA = [
|
|
|
+ // 'PDF'
|
|
|
+ // ];
|
|
|
+ // if (
|
|
|
+ // photoA.indexOf(
|
|
|
+ // file.name.split(".")[file.name.split(".").length - 1].toLocaleUpperCase()
|
|
|
+ // ) == -1
|
|
|
+ // ) {
|
|
|
+ // _this.$message.error("请上传PDF!");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (file) {
|
|
|
+ // var params = {
|
|
|
+ // Key:
|
|
|
+ // file.name.split(".")[0] +
|
|
|
+ // new Date().getTime() +
|
|
|
+ // "." +
|
|
|
+ // file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ // ContentType: file.type,
|
|
|
+ // Body: file,
|
|
|
+ // "Access-Control-Allow-Credentials": "*",
|
|
|
+ // ACL: "public-read",
|
|
|
+ // }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ // var options = {
|
|
|
+ // // partSize: 2048 * 1024 * 1024,
|
|
|
+ // partSize: 1024 * 1024 * 1024,
|
|
|
+ // queueSize: 2,
|
|
|
+ // leavePartsOnError: true,
|
|
|
+ // };
|
|
|
+ // bucket
|
|
|
+ // .upload(params, options)
|
|
|
+ // .on("httpUploadProgress", function () {
|
|
|
+ // //这里可以写进度条
|
|
|
+ // })
|
|
|
+ // .send(function (err, data) {
|
|
|
+ // if (err) {
|
|
|
+
|
|
|
+ // _this.$message.error("上传失败");
|
|
|
+ // } else {
|
|
|
+ // _this.inData.file.push(data.Location)
|
|
|
+ // console.log(data.Location);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ async beforeUpload1(event) {
|
|
|
+ var files = Array.from(event.target.files);
|
|
|
+ console.log("上传文件列表:", files);
|
|
|
+
|
|
|
+ if (files.length === 0) {
|
|
|
+ this.$message.warning("请选择文件");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查文件格式
|
|
|
+ var photoA = ["PDF"];
|
|
|
+ var invalidFiles = files.filter((file) => {
|
|
|
+ var extension = file.name.split(".")[file.name.split(".").length - 1].toLocaleUpperCase();
|
|
|
+ return photoA.indexOf(extension) === -1;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (invalidFiles.length > 0) {
|
|
|
+ this.$message.error("请只上传PDF格式文件!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // AWS配置
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ };
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1";
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } });
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ var uploadedCount = 0;
|
|
|
+ var failedFiles = [];
|
|
|
+
|
|
|
+ // 顺序上传每个文件
|
|
|
+ for (let i = 0; i < files.length; i++) {
|
|
|
+ let file = files[i];
|
|
|
+
|
|
|
+ try {
|
|
|
+ var result = await new Promise((resolve, reject) => {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "_" +
|
|
|
+ i + // 添加索引避免重复
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read",
|
|
|
+ };
|
|
|
+
|
|
|
+ var options = {
|
|
|
+ partSize: 1024 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true,
|
|
|
+ };
|
|
|
+
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function (progress) {
|
|
|
+ // 显示单个文件的上传进度
|
|
|
+ console.log(
|
|
|
+ `文件 ${file.name} 上传进度: ${(
|
|
|
+ (progress.loaded / progress.total) *
|
|
|
+ 100
|
|
|
+ ).toFixed(2)}%`
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ reject(err);
|
|
|
+ } else {
|
|
|
+ resolve(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log('result',result);
|
|
|
+
|
|
|
+ _this.inData.file.push({
|
|
|
+ name:files[i].name,
|
|
|
+ url:result.Location,
|
|
|
+ });
|
|
|
+ uploadedCount++;
|
|
|
+ console.log(`文件 ${file.name} 上传成功:`, result.Location);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(`文件 ${file.name} 上传失败:`, error);
|
|
|
+ failedFiles.push({
|
|
|
+ fileName: file.name,
|
|
|
+ error: error.message,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示最终结果
|
|
|
+ if (uploadedCount > 0) {
|
|
|
+ this.$message.success(`成功上传 ${uploadedCount} 个文件`);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (failedFiles.length > 0) {
|
|
|
+ this.$message.error(`${failedFiles.length} 个文件上传失败`);
|
|
|
+ console.error("失败的文件:", failedFiles);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.intPage {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ padding: 20px 10%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.tit {
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.editer {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.editer >>> .ql-align-center {
|
|
|
+ text-align: center !important;
|
|
|
+}
|
|
|
+.editer >>> .ql-editor {
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
+/* .editer >>> .el-picker-panel__icon-btn {
|
|
|
+ button {
|
|
|
+ padding: 10px 20px !important;
|
|
|
+ }
|
|
|
+} */
|
|
|
+.avatar-uploader {
|
|
|
+ opacity: 0;
|
|
|
+ height: 0;
|
|
|
+ margin: 0 20px;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
11wqe1