uniapp h5图片压缩上传 缺少文件后缀

在uniapp中进行H5图片压缩上传时，如果缺少文件后缀，可能会导致上传失败或者无法正确显示图片。这是因为文件后缀在H5中起到了区分文件类型的作用，缺少后缀会让浏览器无法识别文件的类型。

为了解决这个问题，我们可以在图片上传前对其进行检测，确保文件名中包含后缀。可以通过获取文件的后缀名来判断文件是否缺少后缀。可以使用JavaScript的字符串处理函数来实现此功能。

首先，我们可以获取到上传的图片文件，可以使用uniapp提供的文件选择器组件获取到图片文件的路径。然后，使用JavaScript中的字符串处理函数，比如split()函数，将文件路径字符串根据'.'进行分割，获取到最后一个元素即为文件后缀。

接下来，我们可以判断获取到的后缀是否为空。如果为空，则说明文件名中没有后缀，我们可以手动给文件添加一个常见的图片后缀，比如'.jpg'或'.png'等。

最后，我们将带有后缀的文件名称进行上传。这样就可以确保文件上传成功，并且能够在H5中正确显示。

综上所述，我们可以通过获取文件后缀并手动添加后缀的方式来解决uniapp H5图片压缩上传缺少文件后缀的问题。注意在添加文件后缀时，要根据实际情况选择常见的图片后缀。

相关问题

uniapp h5图片压缩并上传到后台服务器

UniApp是一个基于Vue.js的跨平台框架，它允许开发者构建一次，部署到多个平台的应用，包括H5网页。当需要在H5页面中压缩图片并上传至后台服务器，你可以按照以下步骤操作：

1. **图片压缩**:
- 使用JavaScript库，如`html2canvas`配合`canvas-to-blob`或`sharp`等工具，先将图片转为Base64编码的Data URL，然后通过第三方库如`compressible`或自定义算法对数据进行压缩。

   import compressImage from 'compressible';

   async function compress(imgData) {
     const compressedImg = await compressImage(imgData, { quality: 0.8 });
     return compressedImg.data;
   }

2. **上传到服务器**:
- 创建FormData，将压缩后的图片作为formData的一部分。
- 发起POST请求到后端API，通常使用fetch、axios或者其他HTTP客户端库。

   async function uploadCompressedImage(compressedImgData) {
     const formData = new FormData();
     formData.append('image', compressedImgData, 'compressedImage.jpg');
   
     try {
       const response = await axios.post('/api/upload', formData);
       // 处理服务器返回的数据
       console.log(response.data);
     } catch (error) {
       console.error(error);
     }
   }

3. **整合到页面**:
- 用户选中图片后，触发压缩并上传的函数。

   <input type="file" @change="onFileChange">
   <button @click="uploadCompressedImage">上传</button>

   methods: {
     onFileChange(e) {
       const file = e.target.files[0];
       if (file) {
         // 图片读取转换为blob
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => {
           this.uploadCompressedImage(reader.result);
         };
       }
     }
   }

uniapp h5 刷新页面url上的后缀参数消失了是什么原因

可能是因为你的 uniapp 项目中使用了路由的 hash 模式，导致刷新页面时浏览器会将后缀参数截取掉。解决方法是将路由模式改为 history 模式。在 `main.js` 中修改路由模式的代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

将 `router` 的创建方式修改为如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

这样，刷新页面时后缀参数就不会消失了。