mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 03:46:45 +08:00
feat:增加投票题干图片上传
This commit is contained in:
@@ -7,45 +7,34 @@
|
|||||||
<div class="inname">选项</div>
|
<div class="inname">选项</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="in">
|
<div class="in">
|
||||||
<a-input
|
<a-input v-model:value="formData.optionName" show-count :maxlength="30" style="border-radius: 8px" />
|
||||||
v-model:value="formData.optionName"
|
|
||||||
show-count
|
|
||||||
:maxlength="30"
|
|
||||||
style="border-radius: 8px"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="delete" @click="handleDel">删除</div>
|
<div class="delete" @click="handleDel">删除</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name uploadContent">
|
<div class="name uploadContent">
|
||||||
<a-upload
|
<a-upload v-show="!formData.imgVal" class="in uploadBtn" :show-upload-list="false" :before-upload="beforeUpload">
|
||||||
v-show="!formData.imgVal"
|
<div class="addimg">+添加图片</div>
|
||||||
class="in uploadBtn"
|
|
||||||
:show-upload-list="false"
|
|
||||||
>
|
|
||||||
<div class="addimg">+添加图片{{ index }}</div>
|
|
||||||
</a-upload>
|
</a-upload>
|
||||||
<div v-show="formData.optionPictureAddress" class="picture" style="position: relative">
|
<div v-show="formData.optionPictureAddress" class="picture" style="position: relative">
|
||||||
<img class="pictureimg" :src="formData.optionPictureAddress"/>
|
<img class="pictureimg" :src="formData.optionPictureAddress" />
|
||||||
<div class="picturename" v-show="hasImgName">{{ hasImgName }}</div>
|
<div class="picturename" v-show="hasImgName">{{ hasImgName }}</div>
|
||||||
<img
|
<img style="
|
||||||
style="
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
"
|
" src="../../assets/images/basicinfo/close.png" @click="handleCancel" />
|
||||||
src="../../assets/images/basicinfo/close.png"
|
|
||||||
@click="handleCancel"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import {defineEmits, defineProps, ref} from "vue";
|
import { defineEmits, defineProps, ref } from "vue";
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
import { fileUp } from "../../api/indexEval";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {},
|
item: {},
|
||||||
@@ -55,6 +44,36 @@ const emit = defineEmits(['del'])
|
|||||||
|
|
||||||
const formData = ref(props.item)
|
const formData = ref(props.item)
|
||||||
|
|
||||||
|
const beforeUpload = (file) => {
|
||||||
|
const isJpgOrPng =
|
||||||
|
file.type === "image/jpg" ||
|
||||||
|
file.type === "image/jpeg" ||
|
||||||
|
file.type === "image/png" ||
|
||||||
|
file.type === "image/svg" ||
|
||||||
|
file.type === "image/bmp" ||
|
||||||
|
file.type === "image/gif";
|
||||||
|
if (!isJpgOrPng) {
|
||||||
|
message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let isLt1M = file.size / 10240 / 10240 <= 1;
|
||||||
|
if (!isLt1M) {
|
||||||
|
this.$message.error("图片大小超过10MB!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formDatas = new FormData();
|
||||||
|
formDatas.append("file", file);
|
||||||
|
fileUp(formDatas).then((res) => {
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
console.log(res.data.data, 45);
|
||||||
|
formData.value.optionPictureAddress = process.env.VUE_APP_FILE_PATH + res.data.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
function handleDel() {
|
function handleDel() {
|
||||||
emit('del', props.index)
|
emit('del', props.index)
|
||||||
}
|
}
|
||||||
@@ -334,8 +353,7 @@ function handleDel() {
|
|||||||
//line-height: 24px;
|
//line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-wrapper {
|
.ant-radio-wrapper {}
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input {
|
.ant-input {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|||||||
Reference in New Issue
Block a user