Newer
Older
urbanLifeline_YanAn / src / views / voice / VoiceFileEscape / index.vue
@zhangqy zhangqy on 3 Oct 5 KB first commit
  1. <template>
  2. <div class="publicImgFileUpload">
  3. <el-upload
  4. v-model:file-list="fileList"
  5. action="#"
  6. :auto-upload="false"
  7. :on-remove="handleRemove"
  8. :on-change="handleChange"
  9. :limit="limit"
  10. :show-file-list="false"
  11. :list-type="listType"
  12. :accept="accept.join()"
  13. :class="{ hide: fileList.length >= limit }"
  14. >
  15. <el-button type="primary" icon="Plus" v-if="listType == 'text'">点击上传文件</el-button>
  16. </el-upload>
  17. </div>
  18. </template>
  19. <script setup name="ImageFileUpload">
  20. import { videoupload } from '@/api/voice/recordpage.js';
  21. import useUserStore from '@/store/modules/user';
  22. const userStore = useUserStore();
  23. const props = defineProps({
  24. // 数组值
  25. saveFileArr: {
  26. type: Array,
  27. default: () => [],
  28. },
  29. // 文件列表的类型 'text' | 'picture' | 'picture-card'
  30. listType: {
  31. type: String,
  32. default: 'picture',
  33. },
  34. // 数量限制
  35. limit: {
  36. type: Number,
  37. default: 3,
  38. },
  39. // 大小限制(MB)
  40. fileSize: {
  41. type: Number,
  42. default: 5,
  43. },
  44. // 文件类型, 例如['png', 'jpg', 'jpeg']
  45. fileType: {
  46. type: Array,
  47. default: () => ['jpg', 'png', 'jpeg', 'svg', 'gif'],
  48. },
  49. uploadbusinessSourceCode: {
  50. type: String,
  51. default: 'text',
  52. },
  53. });
  54. const { proxy } = getCurrentInstance();
  55. const emit = defineEmits();
  56. const fileList = ref([]);
  57. const uploadList = ref([]);
  58.  
  59. const handleChange = file => {
  60. if (props.fileSize) {
  61. const isLt = file.size / 1024 / 1024 < props.fileSize;
  62. if (!isLt) {
  63. proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
  64. fileList.value.pop(); //删除失败的
  65. return false;
  66. }
  67. }
  68. if (file.name.length > 50) {
  69. proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
  70. fileList.value.pop(); //删除失败的
  71. return false;
  72. }
  73. proxy.$modal.loading('正在上传音频,请稍候...');
  74. let formData = new FormData();
  75. formData.append('file', file.raw);
  76. formData.append('businessSourceCode', props.uploadbusinessSourceCode);
  77. formData.append('createBy', userStore.userInfo.userName);
  78. videoupload(formData).then(res => {
  79. console.log(res);
  80. if (res.code == 200) {
  81. let datas = res.data;
  82. // datas.refField = props.refField; //关联字段
  83. datas.voiceId = res.data.voiceId; //关联类型
  84. datas.voiceFilePath = pathToUrl(res.data.voiceFilePath); //关联类型
  85. uploadList.value.push(datas);
  86. props.saveFileArr.push(datas);
  87. // 文件状态改为上传成功
  88. fileList.value.map(item => (item.status = 'success'));
  89. } else {
  90. fileList.value.pop(); //删除失败的
  91. proxy.$modal.msgError('上传失败');
  92. }
  93. proxy.$modal.closeLoading();
  94. });
  95. };
  96. // 图片删除
  97. const handleRemove = file => {
  98. // console.log('图片删除--', file);
  99. let fileIndex = null;
  100. uploadList.value.map((item, index) => {
  101. meituan;
  102. if (file.name == item.originalName || file.originalName == item.originalName) {
  103. fileIndex = index;
  104. }
  105. });
  106. uploadList.value.splice(fileIndex, 1);
  107. props.saveFileArr.splice(fileIndex, 1);
  108. };
  109.  
  110. function pathToUrl(path) {
  111. if (path) {
  112. const parts = path.split('\\');
  113. const fileName = parts[parts.length - 1];
  114. if (process.env.NODE_ENV === 'development') {
  115. // 在开发环境中,您可能需要使用不同的逻辑来处理 URL
  116. return `http://192.168.20.43:9100/voice/file/${encodeURIComponent(parts[1])}/${fileName}`;
  117. } else {
  118. // 在生产环境中,使用实际的服务器地址和端口
  119. return `${window.location.origin}/voice-file${path}`;
  120. }
  121. } else {
  122. return '';
  123. }
  124. }
  125.  
  126. // 上传的文件类型
  127. const accept = computed(() => {
  128. if (props.fileType.length) {
  129. let data = [];
  130. data = props.fileType.map(val => {
  131. return `.${val}`;
  132. });
  133. return data;
  134. } else {
  135. return [];
  136. }
  137. });
  138. function editPic() {
  139. // console.log('修改时图片回显--', props.saveFileArr);
  140. // 修改时图片回显
  141. fileList.value = [];
  142. uploadList.value = [];
  143. props.saveFileArr.map(item => {
  144. let params = {
  145. id: item.id,
  146. name: item.name,
  147. originalName: item.originalName,
  148. status: 'success',
  149. url: item.url,
  150. };
  151. fileList.value.push(params);
  152. uploadList.value.push(params);
  153. });
  154. }
  155. watch(
  156. () => props.saveFileArr,
  157. () => {
  158. setTimeout(() => {
  159. editPic();
  160. });
  161. },
  162. { immediate: true }
  163. );
  164. onMounted(() => {});
  165. onBeforeMount(() => {
  166. fileList.value = [];
  167. uploadList.value = [];
  168. });
  169. </script>
  170. <style lang="scss">
  171. .publicImgFileUpload {
  172. width: 100%;
  173. .hide .el-upload {
  174. display: none;
  175. }
  176. .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  177. margin-left: 10px;
  178. }
  179. .el-upload-list--picture {
  180. display: flex;
  181. flex-wrap: wrap;
  182. .el-upload-list__item {
  183. width: 48%;
  184. margin-right: 5px;
  185. .el-upload-list__item-file-name {
  186. width: 65%;
  187. }
  188. }
  189. }
  190. .el-upload-list--text {
  191. .el-upload-list__item {
  192. border-top: 1px dashed #c6c6c6;
  193. padding: 10px;
  194. margin-top: 10px;
  195. }
  196. }
  197. }
  198. </style>