- <template>
- <div class="publicImgFileUpload">
- <el-upload
- v-model:file-list="fileList"
- action="#"
- :auto-upload="false"
- :on-remove="handleRemove"
- :on-change="handleChange"
- :limit="limit"
- :show-file-list="false"
- :list-type="listType"
- :accept="accept.join()"
- :class="{ hide: fileList.length >= limit }"
- >
- <el-button type="primary" icon="Plus" v-if="listType == 'text'">点击上传文件</el-button>
- </el-upload>
- </div>
- </template>
- <script setup name="ImageFileUpload">
- import { videoupload } from '@/api/voice/recordpage.js';
- import useUserStore from '@/store/modules/user';
- const userStore = useUserStore();
- const props = defineProps({
- // 数组值
- saveFileArr: {
- type: Array,
- default: () => [],
- },
- // 文件列表的类型 'text' | 'picture' | 'picture-card'
- listType: {
- type: String,
- default: 'picture',
- },
- // 数量限制
- limit: {
- type: Number,
- default: 3,
- },
- // 大小限制(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
- // 文件类型, 例如['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => ['jpg', 'png', 'jpeg', 'svg', 'gif'],
- },
- uploadbusinessSourceCode: {
- type: String,
- default: 'text',
- },
- });
- const { proxy } = getCurrentInstance();
- const emit = defineEmits();
- const fileList = ref([]);
- const uploadList = ref([]);
-
- const handleChange = file => {
- if (props.fileSize) {
- const isLt = file.size / 1024 / 1024 < props.fileSize;
- if (!isLt) {
- proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
- fileList.value.pop(); //删除失败的
- return false;
- }
- }
- if (file.name.length > 50) {
- proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
- fileList.value.pop(); //删除失败的
- return false;
- }
- proxy.$modal.loading('正在上传音频,请稍候...');
- let formData = new FormData();
- formData.append('file', file.raw);
- formData.append('businessSourceCode', props.uploadbusinessSourceCode);
- formData.append('createBy', userStore.userInfo.userName);
- videoupload(formData).then(res => {
- console.log(res);
- if (res.code == 200) {
- let datas = res.data;
- // datas.refField = props.refField; //关联字段
- datas.voiceId = res.data.voiceId; //关联类型
- datas.voiceFilePath = pathToUrl(res.data.voiceFilePath); //关联类型
- uploadList.value.push(datas);
- props.saveFileArr.push(datas);
- // 文件状态改为上传成功
- fileList.value.map(item => (item.status = 'success'));
- } else {
- fileList.value.pop(); //删除失败的
- proxy.$modal.msgError('上传失败');
- }
- proxy.$modal.closeLoading();
- });
- };
- // 图片删除
- const handleRemove = file => {
- // console.log('图片删除--', file);
- let fileIndex = null;
- uploadList.value.map((item, index) => {
- meituan;
- if (file.name == item.originalName || file.originalName == item.originalName) {
- fileIndex = index;
- }
- });
- uploadList.value.splice(fileIndex, 1);
- props.saveFileArr.splice(fileIndex, 1);
- };
-
- function pathToUrl(path) {
- if (path) {
- const parts = path.split('\\');
- const fileName = parts[parts.length - 1];
- if (process.env.NODE_ENV === 'development') {
- // 在开发环境中,您可能需要使用不同的逻辑来处理 URL
- return `http://192.168.20.43:9100/voice/file/${encodeURIComponent(parts[1])}/${fileName}`;
- } else {
- // 在生产环境中,使用实际的服务器地址和端口
- return `${window.location.origin}/voice-file${path}`;
- }
- } else {
- return '';
- }
- }
-
- // 上传的文件类型
- const accept = computed(() => {
- if (props.fileType.length) {
- let data = [];
- data = props.fileType.map(val => {
- return `.${val}`;
- });
- return data;
- } else {
- return [];
- }
- });
- function editPic() {
- // console.log('修改时图片回显--', props.saveFileArr);
- // 修改时图片回显
- fileList.value = [];
- uploadList.value = [];
- props.saveFileArr.map(item => {
- let params = {
- id: item.id,
- name: item.name,
- originalName: item.originalName,
- status: 'success',
- url: item.url,
- };
- fileList.value.push(params);
- uploadList.value.push(params);
- });
- }
- watch(
- () => props.saveFileArr,
- () => {
- setTimeout(() => {
- editPic();
- });
- },
- { immediate: true }
- );
- onMounted(() => {});
- onBeforeMount(() => {
- fileList.value = [];
- uploadList.value = [];
- });
- </script>
- <style lang="scss">
- .publicImgFileUpload {
- width: 100%;
- .hide .el-upload {
- display: none;
- }
- .el-upload-list--picture-card .el-upload-list__item-actions span + span {
- margin-left: 10px;
- }
- .el-upload-list--picture {
- display: flex;
- flex-wrap: wrap;
- .el-upload-list__item {
- width: 48%;
- margin-right: 5px;
- .el-upload-list__item-file-name {
- width: 65%;
- }
- }
- }
- .el-upload-list--text {
- .el-upload-list__item {
- border-top: 1px dashed #c6c6c6;
- padding: 10px;
- margin-top: 10px;
- }
- }
- }
- </style>