mz666
/
Investment-data-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

频道管理 上传图片

Browse Source
zsk_admin
zsk 6 months ago
parent b98fd5f862
commit bc10b50fef
4 changed files with 141 additions and 143 deletions
Show Stats Download Patch File Download Diff File

7
src/api/base.js
Unescape Escape View File

@ -11,6 +11,13 @@ export function uploadImage(data) {
method: "get", method: "get",
}); });
} }
// 图片上传 改个名字
export function getOssPolicy(data) {
return request({
url: "/oss/policy",
method: "get",
});
}
// 检查token信息 // 检查token信息
export function checkTokenApi(data) { export function checkTokenApi(data) {

14
src/utils/request.js
Unescape Escape View File

@ -8,15 +8,15 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import commonJS from './common.js'; import commonJS from './common.js';
const router = useRouter() const router = useRouter()
// const baseURL = "https://admin.ibocai.com.cn/api_prod"; // 正式环境线上 const baseURL = "https://admin.ibocai.com.cn/api_prod"; // 正式环境线上
const baseURL = "http://192.168.3.83:8003"; // 正式环境线上 // const baseURL = "http://192.168.3.83:8003"; // 正式环境线上
// const baseURL2 = "https://a.matripe.com.cn/api_stock"; // 正式环境线上 // const baseURL2 = "https://a.matripe.com.cn/api_stock"; // 正式环境线上
let protocol = location.protocol // let protocol = location.protocol
let trueUrl = protocol == 'http:' ? baseURL : baseURL2 // let trueUrl = protocol == 'http:' ? baseURL : baseURL2
console.log(protocol); // console.log(protocol);
axios.defaults.withCredentials = true; //添加这行代码 axios.defaults.withCredentials = true; //添加这行代码
const service = axios.create({ const service = axios.create({
baseURL: trueUrl, // baseURL: "/api", // url = base url + request url 正式 baseURL: baseURL, // baseURL: "/api", // url = base url + request url 正式
withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
timeout: 60000, // request timeout timeout: 60000, // request timeout
crossDomain: true, crossDomain: true,
@ -100,5 +100,5 @@ service.interceptors.response.use(
console.log(error); console.log(error);
} }
); );
service.userCustom = trueUrl // service.userCustom = trueUrl
export default service; export default service;

260
src/views/homePage/channel.vue
Unescape Escape View File

@ -68,7 +68,7 @@
<div class="g_flex_1 g_mr_32 ms"> <div class="g_flex_1 g_mr_32 ms">
<a-form-item name="image" label="图片" :rules="[{ required: true, message: '请上传图片' }]"> <a-form-item name="image" label="图片" :rules="[{ required: true, message: '请上传图片' }]">
<div class="g_flex_row_start"> <div class="g_flex_row_start">
<div class="g_flex_none"> <!-- <div class="g_flex_none">
<a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" @change="handleChangs" :accept="accept"> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" @change="handleChangs" :accept="accept">
<img v-if="submitForm.image" :src="submitForm.image" alt="avatar" style="width: 100px; height: 100px; border-radius: 6px" /> <img v-if="submitForm.image" :src="submitForm.image" alt="avatar" style="width: 100px; height: 100px; border-radius: 6px" />
<div v-else> <div v-else>
@ -76,10 +76,20 @@
<div class="ant-upload-text">上传图片</div> <div class="ant-upload-text">上传图片</div>
</div> </div>
</a-upload> </a-upload>
</div> -->
<div class="upload-container">
<div v-if="submitForm.image" class="image-preview">
<img :src="submitForm.image" alt="Banner" @click="triggerUpload" />
</div>
<div v-else class="upload-placeholder" @click="triggerUpload">
<plus-outlined />
<div>上传图片</div>
</div>
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" accept="image/*" />
</div> </div>
<div class="g_flex_1 g_flex_column_end"> <div class="g_flex_1 g_flex_column_end">
<div class="g_flex_row_start" style="position: relative; top: -4px"> <div class="g_flex_row_start" style="position: relative; top: -4px">
<div class="g_c_main g_fs_14 g_cursor_point g_mr_4" @click="openSource">资源选择</div> <div class="g_c_main g_fs_14 g_cursor_point g_mr_4 g_ml_12" @click="openSource">资源选择</div>
<div class="g_fs_14">/ 上传图片</div> <div class="g_fs_14">/ 上传图片</div>
</div> </div>
</div> </div>
@ -283,12 +293,12 @@
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance, h, watch, onBeforeUnmount, createVNode } from "vue"; import { ref, onMounted, getCurrentInstance, h, watch, onBeforeUnmount, createVNode } from "vue";
import { getCmsListNew, delCms, getCmsDetail,getPositionList, addPositionApi, delPositionApi, updatePositionApi,getList } from "../../api/channel.js"; import { getCmsListNew, delCms, getCmsDetail, getPositionList, addPositionApi, delPositionApi, updatePositionApi, getList } from "../../api/channel.js";
import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons-vue"; import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { uploadImage } from "../../api/base.js"; import { getOssPolicy } from "../../api/base.js";
import { Modal, Switch, message } from "ant-design-vue"; import { Modal, Switch, message } from "ant-design-vue";
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G; const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
import $ from "jquery"; import $ from "jquery";
const submitForm = ref({ const submitForm = ref({
@ -424,59 +434,68 @@ const tableHeight = ref(552);
commonJS.gResize(() => { commonJS.gResize(() => {
tableHeight.value = window.innerHeight - 381; tableHeight.value = window.innerHeight - 381;
}); });
const handleChange = (e) => {
console.log("改变：", e);
uploadImage().then((res) => {
let dataObj = {};
dataObj.policy = res.data.data.policy;
dataObj.signature = res.data.data.signature;
dataObj.ossaccessKeyId = res.data.data.accessid;
dataObj.key = res.data.data.dir + commonJS.getUUID() + "_${filename}";
dataObj.dir = res.data.data.dir;
dataObj.host = res.data.data.host.replace("http://", "https://");
let url = "//bocai-cms.oss-cn-beijing.aliyuncs.com";
var formData = new FormData();
var idcardFormData = new FormData();
idcardFormData.append("uploadFile", e.file);
//注意formData里append添加的键的大小写 const triggerUpload = () => {
formData.append("key", dataObj.key); //存储在oss的文件路径 fileInput.value.click();
formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId };
formData.append("policy", dataObj.policy); //policy
formData.append("Signature", dataObj.signature); //签名
formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
formData.append("file", e.file); // 一定在最后
console.log(dataObj.host); const handleFileChange = async (event) => {
const file = event.target.files[0];
// 创建请求的选项对象 console.log(file);
$.ajax({
type: "post", if (!file) return;
url: commonJS.env() == "prod" ? dataObj.host : url,
// url, try {
data: formData, const response = await getOssPolicy();
contentType: false, // 不设置Content-Type请求头
processData: false, if (response.data) {
success: function (data) { const { policy, signature, accessid, dir, host } = response.data.data;
console.log("image.value", dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name));
submitForm.value.fileList = []; dataObj.policy = policy;
submitForm.value.fileList.push({ dataObj.signature = signature;
uid: "2", dataObj.ossaccessKeyId = accessid;
name: "yyy.png", dataObj.key = dir + getUUID() + "_${filename}";
status: "done", dataObj.dir = dir;
url: dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name), dataObj.host = host;
});
}, const formData = new FormData();
fail: function (err) { formData.append("key", dataObj.key);
console.log("上传异常：", err); formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId);
}, formData.append("policy", dataObj.policy);
}); formData.append("Signature", dataObj.signature);
}); formData.append("success_action_status", "200");
}; formData.append("file", file);
const handleDrop = (e) => {
console.log("拖拽：", e); const uploadResponse = await fetch(dataObj.host, {
method: "POST",
body: formData,
});
if (uploadResponse.ok) {
const imgUrl = dataObj.host + "/" + dataObj.key.replace("${filename}", file.name);
submitForm.value.image = imgUrl;
message.success("图片上传成功");
} else {
throw new Error("Upload failed");
}
}
} catch (error) {
console.error("文件上传失败:", error);
message.error("图片上传失败");
}
event.target.value = "";
}; };
// Generate UUID for file names
const getUUID = () => {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0;
const v = c === "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
};
onMounted(() => { onMounted(() => {
setType(); setType();
getTable(); getTable();
@ -858,58 +877,16 @@ const handleChangeTip = ($data) => {
console.log("$data", $data); console.log("$data", $data);
// submitForm.value.tipStr = $data; // submitForm.value.tipStr = $data;
}; };
const fileInput = ref(null);
const dataObj = ref({
policy: "",
signature: "",
ossaccessKeyId: "",
key: "",
dir: "",
host: "",
});
const handleChangs = (e) => {
console.log("改变：", e);
uploadImage().then((res) => {
let dataObj = {};
dataObj.policy = res.data.data.policy;
dataObj.signature = res.data.data.signature;
dataObj.ossaccessKeyId = res.data.data.accessid;
dataObj.key = res.data.data.dir + commonJS.getUUID() + "_${filename}";
dataObj.dir = res.data.data.dir;
dataObj.host = res.data.data.host.replace("http", "https");
let url = "//bocai-cms.oss-cn-beijing.aliyuncs.com";
var formData = new FormData();
var idcardFormData = new FormData();
idcardFormData.append("uploadFile", e.file);
//注意formData里append添加的键的大小写
formData.append("key", dataObj.key); //存储在oss的文件路径
formData.append("OSSAccessKeyId", dataObj.ossaccessKeyId); //accessKeyId
formData.append("policy", dataObj.policy); //policy
formData.append("Signature", dataObj.signature); //签名
formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
formData.append("file", e.file); // 一定在最后
console.log(dataObj.host);
// 创建请求的选项对象
$.ajax({
type: "post",
url: commonJS.env() == "prod" ? dataObj.host : url,
// url,
data: formData,
contentType: false, // 不设置Content-Type请求头
processData: false,
success: function (data) {
console.log("image.value", dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name));
// submitForm.value.fileList = [];
// submitForm.value.fileList.push({
// uid: '2',
// name: 'yyy.png',
// status: 'done',
// url: dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name),
// });
submitForm.value.image = dataObj.host + "/" + dataObj.key.replace("${filename}", e.file.name);
},
fail: function (err) {
console.log("上传异常：", err);
},
});
});
};
watch( watch(
() => channelShow.value, () => channelShow.value,
(val) => { (val) => {
@ -957,36 +934,6 @@ const poiModal = ref({
lng: "", lng: "",
type: "", type: "",
}); });
const handleOpenMap = ($type) => {
// 打开地图弹窗
poiModal.value = {
isShow: true,
// name: submitForm.value.aliasName,
address: submitForm.value.address,
lat: commonJS.isEmptyCheck(submitForm.value.lat) ? submitForm.value.lat : 0,
lng: commonJS.isEmptyCheck(submitForm.value.lng) ? submitForm.value.lng : 0,
type: $type,
};
console.log("poiModal.value", poiModal.value);
};
const getPoiInfo = (e) => {
console.log("获取地图选择信息：", e, " -- 类型：", poiModal.value.type);
// 关闭弹窗
poiModal.value.isShow = false;
// 赋值
var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
if (poiModal.value.type == "address") {
submitForm.value.address = e.pointInfo.address;
submitForm.value.district = e.initInfo.district
.match(reg)
.filter((item, index) => item)
.join(",");
submitForm.value.lat = e.initInfo.lat;
submitForm.value.lng = e.initInfo.lng;
submitForm.value.mdistrict = e.initInfo.mdistrict;
}
console.log(submitForm.value);
};
// 门店图片的数组 // 门店图片的数组
const shopImg = ref([]); const shopImg = ref([]);
@ -1094,8 +1041,7 @@ const getJoblist = () => {
keys: jobModal.value.keyword, keys: jobModal.value.keyword,
status: 1, // 过滤掉待审核和未通过 status: 1, // 过滤掉待审核和未通过
}).then((res) => { }).then((res) => {
console.log(res);
console.log(res);
jobModal.value.loading = false; jobModal.value.loading = false;
jobModal.value.count = res.data.pageBean.recordCount; jobModal.value.count = res.data.pageBean.recordCount;
@ -1214,6 +1160,48 @@ const setType = (clear = "clear") => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.upload-container {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.image-preview {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 4px;
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-placeholder {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fafafa;
border: 1px dashed #d9d9d9;
border-radius: 4px;
cursor: pointer;
}
.upload-placeholder:hover {
border-color: #1890ff;
}
.upload-hint {
font-size: 12px;
color: #999;
margin-top: 4px;
}
.i-x-item { .i-x-item {
width: 100px; width: 100px;
height: 100px; height: 100px;

3
src/views/homePage/index.vue
Unescape Escape View File

@ -357,6 +357,9 @@ const triggerUpload = () => {
const handleFileChange = async (event) => { const handleFileChange = async (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
console.log(file);
if (!file) return; if (!file) return;
try { try {

Write Preview
Loading…
Cancel
Save