feat:增加投票题干图片上传

This commit is contained in:
wuyx
2023-02-23 11:41:08 +08:00
parent 255400dce2
commit 13c5d8ede1

View File

@@ -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;