uni-app 不限文件类型的上传插件

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 不限文件类型的上传插件

需求描述

插件市场的上传插件基本上都是上传图片的，但是文档，电子表格，pdf都不能上传，并且这些图片不需要预览，图片插件修改起来比较麻烦，所以需要一个全文档类型的上传插件，类型上传附件形式，上面的表单填定一些内容，下面使用上传附件功能添加图片，表格，文档，pdf等，然后提交。

Harmonyos Next教程
3 回复

这个需求不需要原生插件，Native.js就可以。插件市场有上传普通文件的，Android app支持，仔细看。 https://ext.dcloud.net.cn/search?q=文件上传


想要个包装好的，直接引用，初始化一些参数就能用的插件啊。不过，多谢了。

在uni-app中，实现不限文件类型的上传功能，你可以使用<input type="file">结合uni.uploadFile API来实现。以下是一个简单的代码案例，展示了如何实现这一功能：

页面模板 (template)

<template>
  <view class="container">
    <button type="primary" @click="chooseFile">选择文件</button>
    <view v-if="fileInfo">
      <text>文件名: {{ fileInfo.name }}</text>
      <image :src="fileInfo.path" mode="widthFix" style="width: 100px;"></image>
      <button type="primary" @click="uploadFile">上传文件</button>
    </view>
  </view>
</template>

脚本部分 (script)

<script>
export default {
  data() {
    return {
      fileInfo: null, // 存储文件信息
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 1, // 默认9
        type: 'all', // 可以指定类型 'all', 'image', 'video', 'file'
        extension: ['*'], // 不限文件类型
        success: (res) => {
          this.fileInfo = res.tempFiles[0]; // 获取文件信息
        },
        fail: (err) => {
          console.error(err);
        },
      });
    },
    uploadFile() {
      if (!this.fileInfo) {
        uni.showToast({ title: '请先选择文件', icon: 'none' });
        return;
      }

      const filePath = this.fileInfo.path;
      const cloudPath = `${Date.now()}_${this.fileInfo.name}`; // 生成云存储路径

      uni.uploadFile({
        url: 'https://your-server-upload-url.com/upload', // 替换为你的服务器上传接口
        filePath: filePath,
        name: 'file', // 后台接收的文件参数名
        formData: {
          user: 'test',
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          console.log('上传成功：', data);
        },
        fail: (err) => {
          console.error('上传失败：', err);
        },
      });
    },
  },
};
</script>

样式部分 (style)

<style>
.container {
  padding: 20px;
}
button {
  margin-top: 10px;
}
</style>

说明

  1. chooseFile 方法：使用uni.chooseMessageFile选择文件，不限文件类型。
  2. uploadFile 方法：使用uni.uploadFile上传选择的文件到服务器。
  3. cloudPath：生成一个唯一的文件名以避免冲突。
  4. formData：可以添加额外的表单数据一起上传。

确保你的服务器能够处理文件上传请求，并且URL正确。这个示例仅展示了前端部分，实际项目中还需要处理后端接收和存储文件的逻辑。

回到顶部